定义在模块中发生事件时调用的方法

Question

我确定以前有人问过这个问题，但我只能找到不同问题的答案。

我想要做的这个要点是，当用户单击按钮时，我有一个模块调用另一个模块中的函数。但这是非常紧密的耦合，并导致各种维护问题，在一个模块中更改代码意味着我必须在多个其他模块中更改它。

我想做的只是定义一个函数或属性，然后在用户单击按钮后调用它。

当前代码示例：

// MyModule.js
class MyClass() {
    constructor(options) {
        // Set options
        // ...
    }

    // Called when button is clicked via event listener
    onClick() {
        // Update Module State
        // ...

        AnotherModule.someFunction(clickInfo);
    }
}

但这一点都不灵活，意味着模块不能单独存在。

我更喜欢这样的东西：

// MyModule.js
class MyClass() {
    constructor(options) {
        // Set options
        // ...

        this.clickCallback = null; // Function to be called
    }

    // Called when button is clicked via event listener
    onClick() {
        // Update Module State
        // ...

        this.onClickCallback(clickInfo);
    }

    // Called everytime user clicks
    onClickCallback(clickInfo) {
        this.clickCallback(clickInfo);
    }

    setClickCallback(customFunction) {
        this.clickCallback = customFunction;
    }
}

// SomeOtherFile.js
import myModule from './mymodule'

myModule.setClickCallback( (clickInfo) => { this.myFunction(clickInfo) } );

myFunction(data) {
    // Do stuff with click data
}

但这意味着我只能定义 1 个外部函数。如果在计算 clickInfo 后需要调用多个函数怎么办？
这至少是正确的想法吗？
我应该通过方法还是通过设置属性来设置clickCallback 函数？
我应该改用某种类型的自定义事件发射器/侦听器吗？

我想过直接使用回调，但是使用回调没有意义，因为我希望函数被多次调用。

（如果 class 关键字不清楚，我使用的是 ES6 和 Babel）。

编辑：似乎更好的方法是在调用 onClickCallback() 函数时向数组添加一个函数，然后创建一个调度函数，该函数循环遍历该数组调用所有函数，并将数据作为参数传递.

Answer 1

如果一个回调应该被重用，它可以在构造时传递：

class MyClass() {
    constructor(options) {
        // Set options
        // ...

        this.clickCallback = options.clickHandler;
    }
    ...
}

从构造函数参数或单个选项对象设置属性适用于可以设置实例属性的任何情况。

但这意味着我只能定义 1 个外部函数。如果在计算 clickInfo 后需要调用多个函数怎么办？

然后可以调用多个函数：

new MyClass({
  clickHandler: clickInfo => {
    this.foo(clickInfo);
    this.bar(clickInfo);
  }
});