2014-09-22 71 views
0

假設我想在JavaScript中使用jQuery實現一個簡單的EventBus模式。該頁面有一個div,我使用$()。load()加載了一些動態內容。此內容有一些JavaScript代碼,訂閱一些事件上的$(document)。就緒()jQuery EventBus - 卸載時的unsubsribe

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(「下一個」);

什麼我真的想實現的是讓內頁訂閱上載了一些事件和卸載

+0

jQuery在[$ .Callbacks](http://api.jquery.com/jquery.callbacks/)中附帶了一個事件總線實現。 – 2014-09-22 17:44:03

回答

0

退訂因此,首先,好像你正在尋找設計自己的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以便您可以跟蹤它們。

以上是不是完美的,你仍然必須實現unloadtrackSubscriptions,自己的消息訂閱API,以及一些方法來跟蹤那些沒有立即訂閱事件,但這一基本思路是可行的。

雖然如此,我會小心的。這個很難(硬。如果你不明白上面的所有代碼,你甚至不應該嘗試它(也許你不應該這樣做)。只需使用現有的框架。