ES6类/面向对象和事件处理程序 [英] ES6 Classes/Object oriented and Event Handlers

问题描述

我一直在学习JavaScript和面向对象/功能编程的来龙去脉，而不是编写虽然行之有效的hacking命令式代码，但实际上却效率低下.

I've been learning the ins and outs of JavaScript and Object Oriented/Functional programming instead of writing hacky imperative code that while works....just is ugly and honestly not efficient.

我正在重新编写井字游戏，并且正在使用Classes来实现棋盘"功能(更新棋盘/检查磁贴等)

I was re-writing a tic-tac-toe game and am using Classes to implement the "Board" functions (Updating the board/checking tiles/etc...)

，我意识到.....我应该在页面的哪儿放置事件侦听器(用于按钮/平铺块/等).我通常只是将jquery .click函数放在document.ready范围内，但这似乎不正确.

and I realized.....where on earth should I be putting Event listeners (for buttons/tiles/etc...) in the page. I usually just put jquery .click functions in the document.ready scope, but that doesn't seem right.

当我用new创建一个类时，事件侦听器将被附加或准备就绪"....我想我可能误解了侦听器的工作方式.并且它们是否可以作为功能/方法在类中工作?或者，甚至将它们附加在这里也很有意义.

When I create a class with new would event listeners get attached or "readied"....I guess maybe I mis-understand how listeners work. And if they would work within a class as functions/methods? Or if it even makes sense to attach them there.

例如，这是我现在的基类(从字面上看，它是刚刚设置的，所以这几乎是最低限度.

For instance here is my base class right now (it's literally just set up so it's like bare minimum.

"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至少正确调用时被实例化?

I thought maybe attaching the event listeners in the constructor would work? Since the constructor will be instantiated when new is called at least correct?

也许这只是我对事件处理程序是如何处理或准确绑定"的误解?

Maybe it's just my misunderstand of how event handlers are handled or "bound" exactly?

这是到目前为止我可怜的井字游戏，仅供参考: http://codepen .io/msmith1114/pen/qmNevg

edit: Here is my pitiful tic-tac-toe so far for reference: http://codepen.io/msmith1114/pen/qmNevg

(这是我在谈论董事会方面的内容)

(This is what im talking about in regards to the board)

推荐答案

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

JavaScript events are bound to the document object model (DOM) and aren't bound to any arbitrary object you might make.

https://developer.mozilla.org/zh-CN /docs/Web/API/Event

Event接口表示DOM中发生的任何事件；有些是用户生成的(例如鼠标或键盘事件)，而另一些则是由API生成的(例如表示动画已完成运行，视频已暂停等的事件).

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物理状态的另一种表示形式.是的，您正确的是将执行构造函数中放置的任何代码-包括添加事件处理程序.

So knowing that, we'd want to have some sort of DOM element in your class. It makes sense to connect your class which represents a physical object to the actual element - the class is just another presentation of the physical state of the DOM. Yes, you are correct that any code placed in the constructor will be executed - including any addition of event handlers.

如果您想在类上将侦听器创建为方法，则可以执行以下操作:

If you wanted to create listeners as methods on the class you'd do something like:

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

     handler() {
         this.hello();
     }

     hello() {
     }
}

关键是要记住，this范围必须通过传入绑定函数调用来修复，因为它作为侦听器传入时会丢失所有上下文.如果在上面的代码中您不使用该类的任何方法，则该绑定是不必要的，它只是成为this.domElement.addEventListener('click', this.handler);.

It's crucial that you remember that the this scope has to be fixed via passing in a bound function call since it loses all context when passed in as a listener. The binding is not necessary if in the above code you were to not use any methods of the class, and it just becomes this.domElement.addEventListener('click', this.handler);.

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

This is obviously not the only way to add the handler but seems to me the more sane way when dealing with classes that represent the DOM.

这篇关于ES6类/面向对象和事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！