我有两个 JavaScript 模块,它们作用于页面的不同部分。现在,正如您所看到的,我正在使用 PubSubJS
库来发布和订阅数据,并在需要时以解耦的方式将数据从一个模块传输到另一个模块。但我在想是否可以完全省略 PubSubJS
库,使用 JQuery Promise(或任何其他 native JQuery 方法)来实现相同的目的。我不太擅长 JQuery promise ,因此需要这个问题。有人可以为我提供更好的 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
Promises
:Promises
本质上是异步的;您真的想要组件之间的异步通信 channel 吗?使用Promises
,您希望所有订阅者都能正确响应,因为您的发布商可能会使用.then
采取行动。一旦您期望订阅者对事件做出相应响应,事情就会变得复杂。jQuery有
.on
、.off
、.one
来发布事件;您只需将{}
作为聚合器传递即可。有关更多详细信息,请参阅该主题:Passing an empty object into jQuery function 。然而,与简单的pubSub/aggreagator
机制相比,jQuery
有一些开销。
我构建了几个渐进复杂性的实验室,重点关注 PubSub
模式,您可以在下面查阅。 LineApp
是入口点。
关于javascript - 在两个解耦的 javascript 模块之间传输数据的 PubSub 模式替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34140209/