如何在我的 javascript class (ES6) 中实现事件处理程序

Question

如何在 class 中创建自己的 "on" 事件处理程序？例如，WebSocket 有多个 "on" 事件处理程序，如下所示。

var ws = new WebSocket("wss://localhost:1000/hoge");
ws.connect();
ws.onopen = function(e){
    //TO DO once connection get established
}
ws.onmessage = function(e){
    // TO DO once message comes from server sie
}

这可能是个愚蠢的问题，但我想为上面的内容提供简单的示例代码。

Answer 1

使这些属性成为 getter 和 setter：

class Foo {
  get onsomeevent() {
    return this._someeventHandler;
  }
  set onsomeevent(newVal) {
    this._someeventHandler = newVal;
  }
  trigger() {
    if (this._someeventHandler) {
      this._someeventHandler();
    }
  }
}
const f = new Foo();
f.onsomeevent = () => console.log('handler running');
console.log('about to trigger');
f.trigger();
console.log(f.onsomeevent);

Answer 2

假设您想要 ws.ongameover 并且希望在游戏结束时调用它。

你可以像这样简单地编写代码：

// assign your function to the ws.ongameover property
ws.ongameover = function() {
    console.log("game over");
}

然后，在您看到游戏实际结束的代码中的其他地方，您可以像这样触发它：

// if there's a gameover handler, then call it
if (ws.ongameover) {
   ws.ongameover();
}

请注意，使用事件和事件处理程序通常是一种更好的设计模式，因为它更具可扩展性，因为您可以为同一事件设置多个侦听器，并且各个代码段可以添加或删除自己的侦听器。在浏览器中，它们使用 addEventListener() and in node.js, they use the EventEmitter class 接口（两者在概念上相似）。无论使用哪一种，您都可以创建自己的事件名称，代码可以侦听这些事件名称，然后其他代码可以在这些事件发生时触发它们。

如何在我的 javascript class (ES6) 中实现事件处理程序

How to implement on-event handler in my javascript class (ES6)

javascript

events

class

handler

ecmascript-6