如何在全局和内部的requireJS对象中调度事件？ [英] How to dispatch events globally and inside requireJS objects?

问题描述

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

I am looking for a way to dispatch events globally and inside requireJS modules using javascript or jquery.

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

I would like to be able to say within my js files:

dispatchEvent(myCustomEventWithSomeData);

然后在应用程序的其他部分添加一个类似的监听器：

and then in some other part of the application add a listener like so:

addEventListener("type Of Event", executeThisFunction);

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

is this possible using jquery? Or any other means? And will a potential solution work within requireJS modules which are not global javascript objects?

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

Also, How can I create an event that bubbles. So that if I want an event to execute only in a specific section of the code it is not dispatched globally?

推荐答案

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

Yes, this is something I typically setup very early within my own applications. Now, how you deal with your events is going to be very dependent on what library or techniques you decide to use, but the core concepts will remain the same.

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

Personally, I think PostalJS is the cock of the walk, so I'm going to use that as an example here. I'm not going to include too much code because it would be mostly ceremony and boilerplate, but I hope you'll get the idea.

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

One, you'll want to create something like a global App object for your events to rest on. Overall this is a good practice when modularizing your JS code - you'll want something which acts as a broker between modules. It can be very plain and basic:

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

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

Now, this module should be loaded into something which begins to populate it. You can get away with not doing this, for a while, but I find eventually circular dependencies tend you bite you in the ass. So I recommend including this in something akin to your "main" module. From there, include your event system and add it to App.

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

现在你有一个漂亮的轻量级对象，你可以包含在共享相同Events对象的其他模块中。所以我们假设你有一个侧边栏：

Now you have a nice, lightweight object you can include in other modules which shares the same Events object. So lets say you have a sidebar:

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

而且，哦，我不知道，或许点击边栏会出现恐龙，所以在你的恐龙模块，您可以通过以下方式收听/订阅：

And, oh I don't know, perhaps clicking the sidebar makes a dinosaur appear, so in your dinosaur module, you'd listen/subscribe by doing the following:

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

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

Having a lightweight object you can share between modules I've found is key to a successful modularized JS architecture. I use this in my own projects as a global object store, a container for my WebSocket messaging layer, and other things I don't want to need to explicitly include individually in each module.

这篇关于如何在全局和内部的requireJS对象中调度事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！