用于事件驱动架构的jQuery插件吗? [英] jQuery plugin for Event Driven Architecture?

问题描述

是否有任何事件驱动架构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即可.

---

Or if you don't care about exposing jQuery, then simply use an empty object and call bind and trigger directly on the jQuery wrapped object.

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.

这基本上是发布/订阅或

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插件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！