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

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

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

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

当前代码示例：

// 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
}

但这意味着我只能定义一个外部函数。如果在计算clickInfo后需要调用多个函数，该怎么办？
至少这是正确的想法吗？
我应该通过方法还是通过设置属性来设置

clickCallback

函数？
我应该使用某种类型的自定义事件发射器/侦听器吗

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

（如果

class

关键字不清楚，我使用的是ES6和Babel）

---

编辑：似乎更好的方法是在调用

onClickCallback（）

函数时向数组中添加一个函数，然后创建一个分派函数，在该数组中循环调用所有函数，并将数据作为参数传递。

如果回调应该重用，可在施工时传递：

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

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

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

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

然后可以调用多个函数：

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

---

使用数组而不是对象来保存它们怎么样？更容易在数组上迭代。如果是这样，那么在实例化之后还提供一个函数来定义额外的回调函数有意义吗？做一个快速测试，这似乎可行，但不确定它是否“正确”。刚刚意识到这是一个lambda函数，而不是一个对象，但关于定义额外回调的问题仍然存在。我想说这是一个KISS原则的主题。如果你不确定为什么它是有益的，不要这样做。您需要将每个回调绑定到一个数组中，而单个箭头调用使用适当的上下文调用它们。如果您觉得需要更多地控制回调，可以使用一些发布子库/事件发射器实现。例如，RxJS可以充当通用事件发射器。是的，我认为你的观点很有道理。我想我现在可能在这个问题上陷入了一点分析瘫痪，所以最好是亲吻一下，直到我需要更多。我正在使用Vue.js w/Vuex，所以我有一些pub-sub选项，但我希望这些模块尽可能独立。谢谢你的建议。有时候试着把这些事情说出来是有帮助的。很高兴这有帮助。