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,以及一些方法来跟踪那些没有立即订阅事件,但这一基本思路是可行的。

虽然如此,我会小心的。这个很难(硬。如果你不明白上面的所有代码,你甚至不应该尝试它(也许你不应该这样做)。只需使用现有的框架。