简单的事件聚合器答案

【问题标题】：Simple event aggregator简单的事件聚合器
【发布时间】：2013-04-21 07:39:52
【问题描述】：

我正在寻找一个与 require.js 一起使用的简单事件聚合器。我有两个模块，一个包含视图模型，另一个包含某种“监听器”：

// view model
define(['lib/knockout-2.2.1', 'events/aggregator'], function(ko, events){

    var squareViewModel = function(contents) {
        this.click = function(){
            events.publish('squareClicked', this);
        };
    };

    return squareViewModel;
});

// some listener of some kind
define(['events/aggregator'], function(events){
    events.subscribe('squareClicked', function(e){
        alert("hurrah for events");
    });
});

有什么东西可以做到这一点吗？这种架构甚至是一个好主意吗？这是我第一次涉足客户端架构。

【问题讨论】：

标签： javascript events requirejs eventaggregator

【解决方案1】：

这与您发布的内容类似，但我很幸运地扩展了 Backbone 事件（实际上，您不必使用 Backbone 的任何其他东西来工作），如下所示：

define(['underscore', 'backbone'], function( _, Backbone ) {
    var _events = _.extend({}, Backbone.Events);
    return _events;
});

然后您的所有视图模型（或任何代码）都可以使用它：

define(['knockout', 'myeventbus'], function(ko, eventBus){

    return function viewModel() {
        eventBus.on('someeventname', function(newValue) { 
        // do something
        });

        this.someKOevent = function() {
            eventBus.trigger('someotherevent', 'some data');
        };

    };
});

最初的想法来自this article by Derick Bailey。我在客户端事件中的其他最爱之一是this one by Jim Cowart

同样，它与您发布的内容几乎相同。但是，我不喜欢将其绑定到 jQuery 文档 DOM 节点的方法的一件事是，您可能还会有其他类型的事件从那里飞过，从子节点冒泡等等。而通过扩展主干事件，您可以拥有自己的专用事件总线（如果您希望拥有单独的数据事件和 UI 事件，甚至可以拥有多个）。

关于此示例中 RequireJS 的注意事项：Backbone 和 Underscore 不兼容 AMD，因此您需要使用 shim config 加载它们。

【讨论】：

这就是我最终要做的，但Backbone.events 应该是Backbone.Events。显然不能只编辑字符。

【解决方案2】：

我最终使用 jQuery 来制作我自己的：

define([], function(){
    return {

        publish: function (type, params){
            $(document.body).trigger(type, params);
        },

        subscribe: function(type, data, callback){
            $(document.body).bind(type, data, callback);
        },
    };
});

它适用于我想要的用途，但尚未经过广泛测试。

正如 explunit 在他的 answer 中指出的那样，这将捕获 document.body 上的任何事件。在传递的回调函数中访问 this 时，我还发现了一个范围问题。

【讨论】：