PubSub模式在两个解耦的javascript模块之间传输数据的替代方案

PubSub模式在两个解耦的javascript模块之间传输数据的替代方案,javascript,jquery,html,observer-pattern,Javascript,Jquery,Html,Observer Pattern,我有两个javascript模块,它们作用于页面的不同部分。现在,正如您所看到的,我正在使用pubsubs库来发布和订阅数据,并在需要时以解耦的方式将数据从一个模块传输到另一个模块。但是我在想,我是否可以完全省略pubsubs库使用jquerypromises(或任何其他原生JQuery方法)来实现同样的功能。我不太擅长JQuery承诺,因此需要回答这个问题。有人能为我提供JQuery更好的解决方案吗 var salesOrder = (function() { "use strict

我有两个javascript模块,它们作用于页面的不同部分。现在,正如您所看到的,我正在使用
pubsubs
库来发布和订阅数据,并在需要时以解耦的方式将数据从一个模块传输到另一个模块。但是我在想,我是否可以完全省略
pubsubs
库使用jquerypromises(或任何其他原生JQuery方法)来实现同样的功能。我不太擅长JQuery承诺,因此需要回答这个问题。有人能为我提供JQuery更好的解决方案吗

var salesOrder = (function() {

    "use strict";

    var $root, $salesOrderNo, $closeButton;

    var _init = function() {
        $root = $("#sales-order")
        $closeButton = $root.find("#close-button");

        _attachEvents();
    };

    var _attachEvents = function() {
        $closeButton.on("click", _closeSalesOrder);
    };

    var _closeSalesOrder = function() {
        PubSub.publish("ui.unloadShell", "closed"); //Here I'm publishing
    }

    return {
        init: _init
    }


})();

$(document).ready(salesOrder.init);
第二个模块也是如此

var erpTest = (function() {

    "use strict";

    var $root, $btnMenu, $shell;

    var _init = function() {
        $root = $("body")
        $btnMenu = $root.find(".menu-button");
        $shell = $root.find("#shell");

        _attachEvents();
    }

    var _attachEvents = function() {
        $btnMenu.on("click", _loadShell);
        PubSub.subscribe('ui.unloadShell', _unloadShell); //Here I'm subscribing
    }

    var _loadShell = function(evt) {
        var url = $(evt.target).data("url");
        if (url && url.length) {
            $shell.load(url, _loadCompleted);
        }
    };

    var _unloadShell = function(evt, data) {
        $shell.html(null); //Here is the subscribed handler
    };

    var _loadCompleted = function(evt) {
        $.each([buttonModule.init, nameModule.init], function(index, func) {
            func($shell);
        });
    };

    return {
        init: _init
    }


})();

$(document).ready(erpTest.init);

我广泛使用
PubSub
模式。你的问题是我刚才研究的问题。以下是我的评论:

  • jQuery
    承诺
    承诺
    本质上是异步的;您真的想要组件之间的异步通信通道吗?使用
    承诺
    ,您希望所有订阅者都能正确响应,因为您的发布者可能会使用
    收回操作。一旦您希望订阅者对事件做出相应的响应,事情就会变得复杂

  • jQuery有
    .on
    .off
    。一个
    来发布事件;您只需将
    {}
    作为聚合器传递。有关更多详细信息,请参阅该主题:。然而,与简单的
    pubSub/aggreagator
    机制相比,
    jQuery
    有一些开销

我建立了几个增加复杂性的实验室,重点是
PubSub
模式,您可以在下面查阅<代码>LineApp
是入口点