事件驱动架构的jQuery插件？

Question

有没有Event Driven Architecture jQuery插件？

第1步:订阅

订阅者在中间订阅事件处理程序,并传递回调方法,以及他们正在侦听的事件的名称......

即两个绿色用户将监听p0事件.蓝色用户将收听p1事件.

---

第2步:p0事件由另一个组件触发到事件处理程序

1. 向事件处理程序触发p0事件
2. 事件处理程序通知它的订阅者事件,调用他们在步骤1:订阅中订阅时指定的回调方法.

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

---

第3步:向事件处理程序触发p1事件组件

p1事件由另一个组件触发

与以前一样,除了现在蓝色订阅者通过其回调接收事件,而其他两个绿色订阅者不接收该事件.

图片来自leeand00,在Flickr上

我似乎无法找到一个,但我猜他们只是在Javascript/jquery中称之为其他东西

这个模式还有一个名字吗？因为它不仅仅是一个基本的发布者/订阅者,它必须被称为我想的其他东西.

Answer 1

您可能不需要插件来执行此操作.首先,DOM本身完全是事件驱动的.您可以使用事件委派来侦听根节点上的所有事件(jQuery实时使用的技术).要处理可能与DOM无关的自定义事件,您可以使用普通的旧JavaScript对象来完成工作.我写了一篇关于在MooTools中用一行代码创建一个中央事件调度程序的博客文章.

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

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

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,那么只需使用一个空对象bind并trigger直接调用jQuery包装对象.

var EventManager = {};

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

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

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

包装器只是隐藏底层的jQuery库,因此如果需要,您可以稍后替换实现.

这基本上是Publish/Subscribe或Observer模式,一些很好的例子是Cocoa的NSNotificationCenter类,Ray Ryan在GWT社区中推广的EventBus模式,以及其他几个.

Answer 2

虽然不是jQuery插件,但Twitter发布了一个名为Flight的JavaScript框架,它允许您创建基于组件的体系结构,这些体系结构通过事件进行通信.

Flight是一个来自Twitter的轻量级,基于组件的JavaScript框架.与基于MVC模式的其他JavaScript框架不同,Flight将行为直接映射到DOM节点.

Flight与请求的路由方式或您决定使用的模板库无关.飞行强制严格分离关注点.飞行中的组件不会直接相互接触.

他们将自己的行为广播为事件,订阅这些事件的组件可以根据这些事件采取行动.要使用Flight,你需要ES5-shim和jQuery以及AMD加载器.

Flight - 来自Twitter的轻量级,基于组件的JavaScript框架