jQuery EventBus-卸載時取消訂閱

Question

假設我想使用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中加載帶有其他腳本的其他內容時，應如何正確取消訂閱此事件處理程序？ 即在哪里放$ eventBus.off（“ next”）;

我真正想要實現的是使內頁在加載時訂閱一些事件，在卸載時取消訂閱

Answer 1

因此，首先，您似乎正在設計自己的SPA框架。 為什么？ 有很多。 使用角形或余燼形或擊倒形或反作用形或飛行形。

接下來，如果您要創建自己的框架，則必須創建自己的框架 ，不要半途而廢。 這意味着您需要一個包裝很多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以及某種方式來跟蹤尚未立即訂閱的事件，但是這個基本思想可以奏效。

再次提醒您。 這個很難（硬。 如果您不理解上述所有代碼，那么您甚至都不要嘗試它（也許即使這樣做也不要）。 只需使用現有框架即可。