我有两个javascript模块,它们作用于页面的不同部分。现在,您可以看到我正在使用PubSubJS
库来发布和订阅并传输数据,如果需要以一种解耦的方式从一个模块到另一个模块。但我在想是否可以完全省略PubSubJS
库使用JQuery promises(或任何其他本机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);
答案 0 :(得分:1)
我广泛使用PubSub
模式。你的问题是我刚才看到的问题。以下是我的评论:
jQuery Promises
:Promises
本质上是异步的;你真的想要组件之间的异步通信渠道吗?使用Promises
,您希望任何订阅者都能正确回复,因为您的发布商可能会使用.then
采取行动。一旦您希望订阅者相应地响应事件,事情就会变得复杂。
jQuery有.on
,.off
,.one
来发布事件;您只需要将{}
作为聚合器传递。有关详细信息,请参阅该主题:Passing an empty object into jQuery function。但是,与简单的jQuery
机制相比,pubSub/aggreagator
有一些开销。
我构建了几个增量复杂性的实验室,重点关注PubSub
模式,您可以在下面参考。 LineApp
是切入点。