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

【问题标题】：PubSub pattern alternative to transfer data between two decoupled javascript modules在两个解耦的 javascript 模块之间传输数据的 PubSub 模式替代方案
【发布时间】：2015-12-07 18:04:17
【问题描述】：

我有两个 javascript 模块，它们作用于页面的不同部分。现在，正如您所看到的，我正在使用PubSubJS 库来发布、订阅和传输数据，如果需要以解耦的方式从一个模块到另一个模块。但我在想我是否可以完全省略 PubSubJS 库使用 JQuery 承诺（或任何其他本机 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);

【问题讨论】：

标签： javascript jquery html observer-pattern

【解决方案1】：

我广泛使用PubSub 模式。你的问题是我不久前正在研究的问题。这是我的cmets：

jQuery Promises: Promises 本质上是异步的；你真的想要组件之间的异步通信通道吗？使用Promises，您希望任何订阅者都能正确响应，因为您的发布者可能会使用.then 采取行动。一旦您期望订阅者对事件做出相应响应，事情就会变得复杂。
jQuery 有.on、.off、.one 来发布事件；您只需将{} 作为聚合器传递。有关详细信息，请参阅该主题：Passing an empty object into jQuery function。但是，jQuery 与简单的 pubSub/aggreagator 机制相比有一些开销。

我建立了几个增加复杂性的实验室，专注于 PubSub 模式，您可以在下面查阅。 LineApp 是入口点。

https://pubsub-message-component-1975.herokuapp.com

【讨论】：