jQuery EventBus - 卸载时取消订阅答案

【问题标题】：jQuery EventBus - unsubsribe on unloadjQuery EventBus - 卸载时取消订阅
【发布时间】：2014-11-16 18:28:04
【问题描述】：

假设我想使用 jQuery 在 javascript 中实现一个简单的 EventBus 模式。该页面有一个 div，我使用 $().load() 在其中加载一些动态内容。此内容有一些 javascript 代码订阅 $(document).ready() 上的一些事件

page1.html:

$(document).ready(function() {
    $eventBus.on("next", function() {
        // do something
    });        
});

root.html

$("#content").load("page1.html"); // load page1 and invoke it's javascript

当另一个内容与其他脚本加载到同一个 div 中时，我应该如何正确取消订阅此事件处理程序？ IE。放置 $eventBus.off("next"); 的最佳位置在哪里

我真正想要实现的是让内页在加载时订阅一些事件并在卸载时取消订阅

【问题讨论】：

jQuery 在$.Callbacks 中附带了一个事件总线实现

标签： jquery event-based-programming

【解决方案1】：

首先，您似乎希望设计自己的 SPA 框架。为什么？那里有很多。使用 angular、ember、knout、react 或 flight。

接下来，如果您要创建自己的框架，您将不得不创建自己的框架，不要半途而废。这意味着您需要一个包含大量 jquery 内容的 api，以便您拥有必要的钩子。

在我的脑海中，你可以做这样的事情

MyFramework.load({url: 'page1.html', target: '#content'}).then(...)

然后 MyFramework.load 会是这样的

MyFramework.load = (op) => {
    return $.Deferred( (d) => {
        $.get(op.url).then((html)=>{
            if(currentContexts[op.target])
                MyFramework.unload(currentContexts[op.target])
            var ctx = $.extend({}, op);
            ctx.subscriptions = MyFramework.events.trackSubscriptions(() => {
                 $(op.target).html(html);
            });
            d.resolve();
        });
    });
}

所有事件订阅要么必须通过您自己的 API，要么您必须覆盖 jquery.on 以便您可以跟踪它们。

以上内容并不完美，您仍然需要实现unload、trackSubscriptions、您自己的消息订阅API，以及一些跟踪未立即订阅的事件的方法，但这个基本想法是可行的。

不过，我再次提醒一下。这个很难（硬。如果你不理解以上所有代码，你甚至不应该尝试它（也许你不应该即使你这样做了）。只需使用现有框架即可。

【讨论】：