事件驱动架构的jQuery插件?

问题描述

是否有任何事件驱动架构 jQuery 插件?

Are there any Event Driven Architecture jQuery plugins?

订阅者订阅中间的事件处理函数，并传入一个回调方法，以及他们正在监听的事件的名称......

The subscribers subscribe to the event handler in the middle, and pass in a callback method, as well as the name of the event they are listening for...

即两个绿色订阅者将监听 p0 事件.蓝色的订阅者将监听 p1 事件.

i.e. The two green subscribers will be listening for p0 events. And the blue subscriber will be listening for p1 events.

1. 一个 p0 事件被触发到事件处理程序
2. 事件处理程序通知它的订阅者该事件，调用他们在订阅时指定的回调方法步骤 1:订阅.

请注意，蓝色订阅者不会收到通知，因为它没有侦听 p0 事件.

Note that the blue subscriber is not notified because it was not listening for p0 events.

p1 事件被另一个组件触发

The p1 event is fired by another component

除了现在蓝色订阅者通过它的回调接收事件，而其他两个绿色订阅者没有接收到事件之外，与之前一样.

Just as before except that now the blue subscriber receives the event through its callback and the other two green subscribers do not receive the event.

Flickr 上 leeand00 的图片

我似乎找不到，但我猜他们只是在 Javascript/jquery 中将其称为其他名称

I can't seem to find one, but my guess is that they just call it something else in Javascript/jquery

还有这种模式的名称吗?因为它不仅仅是一个基本的发布者/订阅者，所以我认为它必须被称为其他名称.

Also is there a name for this pattern? Because it isn't just a basic publisher/subscriber, it has to be called something else I would think.

推荐答案

您可能不需要插件来执行此操作.首先，DOM 本身完全是事件驱动的.您可以使用事件委托来监听根节点上的所有事件(jQuery live 使用的一种技术).要处理可能与 DOM 无关的自定义事件，您可以使用普通的旧 JavaScript 对象来完成这项工作.我写了一篇博文，介绍在 MooTools 中使用只需一行代码.

You probably don't need a plugin to do this. First of all, the DOM itself is entirely event driven. You can use event delegation to listen to all events on the root node (a technique that jQuery live uses). To handle custom events as well that may not be DOM related, you can use a plain old JavaScript object to do the job. I wrote a blog post about creating a central event dispatcher in MooTools with just one line of code.

var EventBus = new Class({Implements: Events});

在 jQuery 中也很容易做到.使用作为所有事件的中央代理的常规 JavaScript 对象.任何客户端对象都可以发布和订阅此对象上的事件.请参阅这个相关的问题.

It's just as easy to do in jQuery too. Use a regular JavaScript object that acts as a central broker for all events. Any client object can publish and subscribe to events on this object. See this related question.

var EventManager = {
    subscribe: function(event, fn) {
        $(this).bind(event, fn);
    },
    unsubscribe: function(event, fn) {
        $(this).unbind(event, fn);
    },
    publish: function(event) {
        $(this).trigger(event);
    }
};

// Your code can publish and subscribe to events as:
EventManager.subscribe("tabClicked", function() {
    // do something
});

EventManager.publish("tabClicked");

EventManager.unsubscribe("tabClicked");

---

或者如果你不关心暴露 jQuery，那么只需使用一个空对象并直接在 jQuery 包装的对象上调用 bind 和 trigger.

var EventManager = {};

$(EventManager).bind("tabClicked", function() {
    // do something
});

$(EventManager).trigger("tabClicked");

$(EventManager).unbind("tabClicked");

包装器只是用来隐藏底层的 jQuery 库，以便您以后可以在需要时替换实现.

The wrappers are simply there to hide the underlying jQuery library so you can replace the implementation later on, if need be.

这基本上是 Publish/Subscribe 或 观察者模式，一些很好的例子是 Cocoa 的 NSNotificationCenter 类，EventBus 模式由 Ray Ryan 在 GWT 社区和其他几个社区推广.

This is basically the Publish/Subscribe or the Observer pattern, and some good examples would be Cocoa's NSNotificationCenter class, EventBus pattern popularized by Ray Ryan in the GWT community, and several others.

这篇关于事件驱动架构的jQuery插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！