javascript - ES6 类/面向对象和事件处理程序

Question

我一直在学习 JavaScript 和面向对象/函数式编程的细节，而不是编写虽然有效但很丑陋且效率不高的命令式代码。

我正在重写一个井字棋游戏，并使用类来实现“棋盘”功能(更新棋盘/检查图 block /等...)

我意识到......我到底应该在页面中放置事件监听器(用于按钮/图 block /等...)。我通常只是将 jquery .click 函数放在 document.ready 范围中，但这似乎不对。

当我用 new 创建一个类时，事件监听器会被附加或“准备好”......我想也许我误解了监听器的工作原理。它们是否可以在类中作为函数/方法工作？或者如果将它们附加在那里有意义的话。

例如，现在这是我的基类(它实际上刚刚设置好，所以它就像是最低限度的。

"use strict";

class Board
{
   constructor(playerIcon,compIcon) { 
        this.playerIcon = playerIcon;
        this.compIcon = compIcon;
});
    }

    getTileContents(tile){
      return $("#tile-" + tile).text()
    }

    tileIsEmpty(tile){
        console.log($("#tile-" + tile).text())
      if($("#tile-" + tile).text() != 'X' || $("#tile-" + tile).text() != 'Y')
        return true
      else
        return false
    }  
}

let board = new Board('X','Y');

我想也许在构造函数中附加事件监听器会起作用？既然构造函数会在调用 new 时实例化，至少是正确的？

也许这只是我对事件处理程序如何处理或“绑定(bind)”的误解？

编辑:这是我迄今为止可怜的井字棋供引用:http://codepen.io/msmith1114/pen/qmNevg

(这就是我所说的关于董事会的内容)

Answer 1

JavaScript 事件绑定(bind)到文档对象模型 (DOM)，而不绑定(bind)到您可能创建的任何任意对象。

https://developer.mozilla.org/en-US/docs/Web/API/Event

The Event interface represents any event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth).

因此，知道了这一点，我们希望在您的类中拥有某种 DOM 元素。将表示物理对象的类连接到实际元素是有意义的 - 该类只是 DOM 物理状态的另一种表示。是的，您是对的，放置在构造函数中的任何代码都将被执行 - 包括任何添加的事件处理程序。

如果您想创建监听器作为类上的方法，您可以执行以下操作:

class {
     constructor() {
         this.domElement.addEventListener('click', this.handler.bind(this));
     }

     handler() {
         this.hello();
     }

     hello() {
     }
}

记住 this 作用域必须通过传入绑定(bind)函数调用来修复，这一点至关重要，因为当作为监听器传入时，它会丢失所有上下文。如果在上面的代码中您不使用该类的任何方法，则不需要绑定(bind)，它只是变为 this.domElement.addEventListener('click', this.handler);。 p>

这显然不是添加处理程序的唯一方法，但在我看来，在处理表示 DOM 的类时，这是更明智的方法。