Javascript 创建事件方法答案

【问题标题】：Javascript create event methodJavascript 创建事件方法
【发布时间】：2017-09-21 20:55:04
【问题描述】：

我有辅助类，想定义一些值改变时触发的事件方法。

例如简化：

class HelperClass {
  activeIndex = 0;

  constructor(element) {}

  ...some computation methods...
}

当从外部更改 activeIndex 时，我需要触发事件。像 addEventListener 之类的东西。内部值何时更改时，可以从班级外部收听。例如：

const obj = new HelperClass(element);
obj.onActiveIndexChange((event, activeIndex) => ...something...)

or

obj.on('activeIndexChange', (event, activeIndex) => ....something.... )

我不想使用外部库。更喜欢带有原生特性的原版代码。

谢谢。

更新：简单的解决方案

class HelperClass {
  activeIndex = 0;

  addEventListener(eventName, func) {
    this[
      `on${eventName.substr(0, 1).toUpperCase()}${eventName.substr(1)}`
    ] = func;
  }

  onActiveIndexChange(activeIndex) {}
}

this.onActiveIndexChange(newValue) 更改值后调用

然后在定义之外：

objInstance.addEventListener('activeIndexChange', (activeIndex) =>
  ...myCustomCodePassed in callback...
);

【问题讨论】：

标签： javascript events event-handling

【解决方案1】：

可能你需要一些东西

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

或者https://nodejs.org/api/events.html#events_class_eventemitter如果你使用的是NodeJS

【讨论】：

试图弄清楚如何在我的情况下使用。我的 Javascript 不是主要语言，对我来说很难。

【解决方案2】：

您可以为对象属性定义一个设置器：

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperty

每次更改值时都会触发一个函数。

它是原生 JavaScript。

【讨论】：

defineProperty 很好，当我想从 self 类调用方法时，与 ES6 setter 相同的功能对吗？但我想创建可从外部访问的方法事件。
那它就不是方法了！
我创建了快速解决方案。不是最好的，但有效。我让方法 wchith 采用另一个函数，并且我可以从外部调用该函数。像这样： onValueChange(func) { this.callbackMethod = func }