2015-12-07 60 views
0

我有兩個JavaScript模塊,它們作用於頁面的不同部分。現在您可以看到我正在使用PubSubJS庫來發布和訂閱數據,如果需要將數據從一個模塊以分離的方式傳輸到另一個模塊。但我在考慮是否可以完全忽略PubSubJS庫使用JQuery承諾(或任何其他本機JQuery方法)來實現相同。我對JQuery承諾不太好,因此需要這個問題。有人可以爲我提供更好的JQuery解決方案。PubSub模式替代在兩個解耦javascript模塊之間傳輸數據

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); 

回答

1

我廣泛使用PubSub圖案的第二模塊。您的問題是我前一段時間正在研究的問題。這裏是我的意見:

  • jQuery的PromisesPromises本質上是異步;你真的想要一個組件之間的異步通信渠道嗎?使用Promises,您會希望任何訂閱者都能正確響應,因爲您的發佈商可能會使用.then採取行動。只要您希望訂戶對事件做出相應響應,情況就會變得複雜。

  • jQuery有.on,.off,.one發佈事件;你只需要通過{}作爲聚合器。請參閱該主題了解更多詳情:Passing an empty object into jQuery function。然而與簡單的pubSub/aggreagator機制相比,jQuery有一些開銷。

我建的增量複雜性集中在PubSub模式,你可以諮詢以下幾個實驗室。 LineApp是入口點。

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