我正在寻找一种使用 javascript 或 jquery 在 requireJS 模块中全局和内部分派(dispatch)事件的方法。
我希望能够在我的 js 文件中说:
dispatchEvent(myCustomEventWithSomeData);
然后在应用程序的其他部分添加一个监听器,如下所示:
addEventListener(“type Of Event”, executeThisFunction);
这可以使用 jquery 吗?还是有其他手段?一个潜在的解决方案是否可以在不是全局 javascript 对象的 requireJS 模块中工作?
另外,如何创建一个冒泡的事件。因此,如果我希望某个事件仅在代码的特定部分执行,它不会在全局范围内分派(dispatch)?
最佳答案
是的,这是我通常很早就在自己的应用程序中设置的东西。现在,您处理事件的方式将非常取决于您决定使用的库或技术,但核心概念将保持不变。
就我个人而言,我认为 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 消息传递层的容器,以及其他我不想单独显式包含在每个模块中的东西。
关于javascript - 如何在全局和 requireJS 对象内部调度事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20101576/