javascript - 如何在全局和 requireJS 对象内部调度事件？

Question

我正在寻找一种使用 javascript 或 jquery 在 requireJS 模块中全局和内部分派(dispatch)事件的方法。

我希望能够在我的 js 文件中说:

dispatchEvent(myCustomEventWithSomeData);

然后在应用程序的其他部分添加一个监听器，如下所示:

addEventListener(“type Of Event”, executeThisFunction);

这可以使用 jquery 吗？还是有其他手段？一个潜在的解决方案是否可以在不是全局 javascript 对象的 requireJS 模块中工作？

另外，如何创建一个冒泡的事件。因此，如果我希望某个事件仅在代码的特定部分执行，它不会在全局范围内分派(dispatch)？

Answer 1

是的，这是我通常很早就在自己的应用程序中设置的东西。现在，您处理事件的方式将非常取决于您决定使用的库或技术，但核心概念将保持不变。

就我个人而言，我认为 PostalJS 是最棒的，所以我将在此处使用它作为示例。我不会包含太多代码，因为它主要是仪式和样板文件，但我希望您能理解。

第一，您需要创建类似于全局 App 对象的东西，供您的事件依赖。总的来说，这是模块化你的 JS 代码的一个好习惯——你会想要一些在模块之间充当代理的东西。它可以非常简单和基本:

define(function() { 
    var App = {}; 
    return App;
});

现在，这个模块应该被加载到开始填充它的东西中。你可以暂时不这样做，但我发现最终循环依赖会让你咬你的屁股。因此，我建议将其包含在类似于您的“主”模块的内容中。从那里，包括您的事件系统并将其添加到 App。

define(['app', 'events'], function(App, Events) {
    App.events = new Events();
});

现在您有了一个漂亮的轻量级对象，您可以将其包含在共享相同事件对象的其他模块中。所以假设你有一个侧边栏:

define(['app'], function(App) {
    // User has clicked the sidebar
    App.events.publish('sidebar.clicked'); //
});

而且，哦，我不知道，也许点击侧边栏会出现一只恐龙，所以在您的恐龙模块中，您可以通过执行以下操作来收听/订阅:

define(['app'], function(App) {
    App.events.subscribe('sidebar.clicked', showDinosaur);
});

我发现拥有一个可以在模块之间共享的轻量级对象是成功的模块化 JS 架构的关键。我在我自己的项目中将其用作全局对象存储、我的 WebSocket 消息传递层的容器，以及其他我不想单独显式包含在每个模块中的东西。