事件驱动架构的 jQuery 插件？

Question

是否有事件驱动架构 jQuery 插件？

第 1 步：订阅

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

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

---

步骤 2：p0 事件由事件处理程序的另一个组件触发

1. p0 事件被触发事件处理程序
2. 通知其事件订阅者，调用他们在第 1 步：订阅中订阅时指定的回调方法。

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

---

步骤 3：p1 事件被触发到事件处理程序的组件

p1 事件被触发另一个组件

与之前一样，只是现在蓝色订阅者通过其回调接收事件，而其他两个绿色订阅者不接收该事件。

Flickr 上 leeand00 的图片

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

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

Answer 1

您可能不需要插件来执行此操作。首先，DOM 本身完全是事件驱动的。您可以使用事件委托来侦听根节点上的所有事件（jQuery live 使用的技术）。要处理可能与 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，则只需使用一个空对象并直接在 jQuery 包装对象上调用 bind 和 trigger 即可。

var EventManager = {};

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

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

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

包装器只是为了隐藏底层 jQuery 库，以便您可以在以后根据需要替换实现。

这基本上是 发布/订阅 或 观察者模式，Cocoa 的 NSNotificationCenter 类，EventBus 模式由 Ray Ryan 在 GWT 社区和其他几个社区中推广。

Answer 2

尽管不是 jQuery 插件，Twitter 发布了一个名为 Flight 的 JavaScript 框架，它允许您创建基于组件的架构，通过事件进行通信。

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

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

它们将其操作作为事件进行广播，订阅这些事件的组件可以根据这些事件采取操作。要使用 Flight，您需要 ES5-shim 和 jQuery 以及 AMD 加载程序。

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

Answer 3

实际上有两个：

• Listen（更快）：http://plugins .jquery.com/project/Listen
• 拦截（更高级）：http://plugins.jquery.com/project/Intercept

Answer 4

这可以作为轻量级消息传递框架吗？

function MyConstructor() {
    this.MessageQueues = {};

    this.PostMessage = function (Subject) {
        var Queue = this.MessageQueues[Subject];
        if (Queue) return function() {
                                        var i = Queue.length - 1;
                                        do Queue[i]();
                                        while (i--);
                                    }
        }

    this.Listen = function (Subject, Listener) {
        var Queue = this.MessageQueues[Subject] || [];
        (this.MessageQueues[Subject] = Queue).push(Listener);
    }
}

那么你可以这样做：

var myInstance = new MyConstructor();
myInstance.Listen("some message", callback());
myInstance.Listen("some other message", anotherCallback());
myInstance.Listen("some message", yesAnotherCallback());

然后：

myInstance.PostMessage("some message");

将调度队列

Answer 5

使用虚拟 jQuery 节点作为调度程序可以轻松完成此操作：

var someModule = (function ($) {

    var dispatcher = $("<div>");

    function init () {
        _doSomething();
    }

    /**
        @private
    */
    function _doSomething () {
        dispatcher.triggerHandler("SOME_CUSTOM_EVENT", [{someEventProperty: 1337}]);
    }

    return {
        dispatcher: dispatcher,
        init: init
    }

}(jQuery));



var someOtherModule = (function ($) {

    function init () {
        someModule.dispatcher.bind("SOME_CUSTOM_EVENT", _handleSomeEvent)
    }

    /**
        @private
    */
    function _handleSomeEvent (e, extra) {
        console.log(extra.someEventProperty) //1337
    }

    return {
        init: init
    }

}(jQuery));

$(function () {
    someOtherModule.init();
    someModule.init();
})

Answer 6

最近的开发是 msgs.js “面向 JavaScript 的消息编程。受到 Spring Integration 的启发”。它还支持通过 WebSocket 进行通信。

msgs.js 将“企业集成模式”一书中定义的词汇和模式应用于 JavaScript，将面向消息传递的编程扩展到浏览器和/或服务器端 JavaScript。消息传递模式最初是为了集成松散耦合的不同系统而开发的，现在也适用于单个应用程序进程中松散耦合的模块。

[...]

测试环境：

• Node.js（0.6、0.8）
• Chrome（稳定）
• Firefox（稳定，ESR，应该可以在早期版本中使用）
• IE (6-10)
• Safari（5、6、iOS 4-6，应该可以在早期版本中使用）
• Opera（11、12，应该适用于早期版本）

Answer 7

我已使用 OpenAjax Hub 进行发布/订阅服务。它不是一个 jQuery 插件，而是一个独立的 JavaScript 模块。您可以从 SourceForge 下载并使用参考实现。我喜欢分层主题命名以及使用通配符订阅多个主题的支持。