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

Question

我正在寻找一种方法来使用javascript或jquery在全局和内部的requireJS模块中调度事件.

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

dispatchEvent(myCustomEventWithSomeData);

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

addEventListener(“type Of Event”, executeThisFunction);

这有可能使用jquery吗？还是其他任何方式？并且潜在的解决方案是否可以在requireJS模块中工作,而这些模块不是全局javascript对象？

另外,我如何创建一个泡泡事件.因此,如果我希望事件仅在代码的特定部分执行,则不会全局调度？

Answer 1

是的,这是我通常在我自己的应用程序中很早就设置的东西.现在,您如何处理您的事件将非常依赖于您决定使用哪些库或技术,但核心概念将保持不变.

就个人而言,我认为PostalJS是步行的公鸡,所以我将以此为例.我不会包含太多的代码,因为它主要是仪式和样板,但我希望你能得到这个想法.

其一,您需要为事件创建类似全局App对象的东西.总的来说,在模块化JS代码时这是一个很好的做法 - 你需要在模块之间充当代理的东西.它可以非常简单和基本:

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

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

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

现在,您有一个漂亮的轻量级对象,您可以将其包含在共享相同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消息传递层的容器,以及其他我不想在每个模块中明确包含的东西.