0

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

page1.html：

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

根.html

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

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

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

4

1 回答 1

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以便跟踪它们。

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

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

于 2014-09-22T18:07:51.177 回答