我一直在学习 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
(这就是我所说的关于董事会的内容)
最佳答案
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 的类时,这是更明智的方法。
关于javascript - ES6 类/面向对象和事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43691282/