jquery - 管理 jQuery 自定义事件

Question

我已经做了几个小时的额外研究，但我仍然找不到一个好的模式来解决我认为的常见问题。

我正在开发 .Net MVC2 应用程序。我们的应用程序由一个主页和许多部分 View (包含的页面)组成，每个部分 View 对应一个由 HTML 结构和 JS-jQuery 组成的小部件强>胆量

我们的一些小部件之间有丰富的交互，因此我们当然使用 jQuery 的事件绑定(bind)来达到以下效果:

数据摘要小部件

$(document).bind("DataUpdated", summaryobject.updateTotals());

数据操作小部件

$(document).trigger("DataUpdated");

我们遇到的问题是，当用户导航到应用程序的某些部分时，这些小部件 (HTML/DOM) 将从页面中删除，并替换为新的部分 View 集。当用户向后导航时，HTML(可视化表示)将与创建双重绑定(bind)的 jQuery 绑定(bind)一起重新加载。

到目前为止，我的解决方案对我来说似乎很蹩脚。

(1) 绑定(bind)到绑定(bind)所针对的 DOM 对象:

$("#summaryobject").bind("DataUpdated", summaryobject.updateTotals());

这样做的问题是，我的触发小部件需要知道要触发什么 DOM 对象:$("#summaryobject") 这违背了目的。

(2) 创建一个EventBus对象来追踪谁绑定(bind)了哪些事件，并且只允许事件绑定(bind)一次。我遇到的问题是，在存储/绑定(bind)事件时，我无法跟踪谁创建了它，因此如果需要，我无法取消注册它......也许未注册的事件不是必需的事件。

其他人使用什么模式来管理自定义事件？

Answer 1

有两个很好的解决方案可以解决您的问题(我可以看到)。

1. 删除所有 bind 调用，并将其替换为对 delegate 的单个调用或live并设置一个监听器，监听应用程序中发生的所有事件并将它们路由到适当的位置。 (换句话说，创建一个 Controller )。

2. 使用允许取消订阅和订阅事件的 EventBus。我见过使用 EventBus 执行此操作的最简单方法是 Peter Michaux 的 Eventing script .

<小时/>

/* 
Extremely loosely coupled custom events
Source: 
http://peter.michaux.ca/articles/anonymous-events-extremely-loose-coupling
*/

EventManager = {};

EventManager.events = {};

EventManager.subscribe = function( event_name, subscriber, method_name ) {
    var event = this.events[event_name];
    if ( ! event ) {
        event = this.events[event_name] = [];
    }
    event.push( { s: subscriber, m: method_name } );
    return this;
};

EventManager.unsubscribe = function( event_name, subscriber ) {
    var event = this.events[event_name];
    if ( ! event ) {
        return;
    }
    for ( var i = event.length - 1; i >= 0; i-- ) {
        if ( event[i].s === subscriber ) {
            event.splice( i, 1 );
        }
    }
    return this;
};

EventManager.unsubscribe_all = function( event_name ) {
    delete this.events[event_name];
    return this;
};

EventManager.fire = function( event_name ) {
    var event = this.events[event_name];
    if ( ! event ) {
        return this;
    }
    for ( var i = event.length - 1; i >= 0; i-- ) {
        subscription = event[i];
        subscription.s[subscription.m].apply( subscription.s, arguments );
    }
    return this;
};

使用第二种方法的示例是:

EventManager.subscribe("DataUpdated", summaryobject, "updateTotals");
// ... at some point later on ...
EventManager.fire("DataUpdated");
// Fires `updateTotals` with `this` bound to `summaryobject`