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

How to dispatch events globally and inside requireJS objects?

本文关键字：对象 内部 调度 事件 requireJS 全局      更新时间：2023-09-26

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

我想在我的js文件中说：

dispatchEvent(myCustomEventWithSomeData);

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

addEventListener(“type Of Event”, executeThisFunction);

使用jquery可以做到这一点吗？或者其他方式？潜在的解决方案会在requireJS模块中工作吗？requireJS模块不是全局javascript对象？

此外，我如何创建一个冒泡的事件。所以，如果我想让一个事件只在代码的特定部分执行，它不会全局调度？

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

就我个人而言，我认为PostalJS是最棒的，所以我将在这里用它作为一个例子。我不打算包含太多的代码，因为它主要是仪式和样板，但我希望你会明白的。

首先，你会想创建一个类似全局应用程序对象的东西，让你的事件停留在上面。总的来说，在模块化你的JS代码时，这是一个很好的做法-你会想要一个在模块之间充当中介的东西。它可以非常简单和基本：

define(function() { 
    var App = {}; 
    return 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消息层的容器，以及其他我不想在每个模块中单独显式包含的东西。

相关文章：