更好的方式來處理ExtJS/Javascript中的事件

我想在ExtJs/Javascript中構建一個應用程序，並且注意到事件是保持組件相互獨立的好方法。然而，事件發生和被捕獲的方式使得它們對於呼叫者和接收者更加具體。更好的方式來處理ExtJS/Javascript中的事件

有沒有更好的方法來做到這一點。我打算編寫一箇中心EventBus類，使用它可以讓任何組件提出一個事件，而另一個可以註冊來聽它。

是否有任何庫已經可用來實現這樣的事情。我看到backbone.js不確定它正在做同樣的事情，我正在尋找。

2012-11-14 Nas

用戶，請不要關的討論，試圖回答這個問題。感謝Norguard，Pheonix＆dbrin回答了這個問題。這非常有幫助 – Nas

寫Mediator是死簡單，如果你已經有了一個框架，做事件委派，使用publisher/subscriber或observer模型（無論他們是所謂的events或actions或者調用系統的emitter或任何）。

您只需使Mediator唯一的emitter/publisher/etc，然後讓您的模塊/類/服務/ etc訪問該Mediator。

var myEvents = Mediator(), 

Module1 = (function (events) { 
    var private_data = {}, 
     private_method = function() {}, 
     public_interface = { init : init }; 

    function init() { // setup procedures 
     events.listen("widget/process/request", function (data) { 
      var result = doStuff(data); 
      events.fire("widget/process/result", result); 
     }); 
    } 
}(myEvents)), 

Module2 = (function (events) { 
    var private_data = {}, 
     public_interface = { init : init }; 

    function init (data) { // setup procedures 
     events.fire("widget/process/request", data); 
     events.listen("widget/process/result", private_method); 
    } 

    return public_interface; 
}(myEvents)); 


Module1.init(); 
Module2.init(data);

如果你願意，你甚至可以做一些你的類裏面，包裹你的中介，讓你可以有你的「類」 /模塊的公共方法，這看起來像自己的事件，但將通過將數據傳遞給中介：現在

var myClass = function() { 
    var mediator = null, 
     public_interface = { 
     fire : function (evt, data) { if (!mediator) { return; } mediator.fire(evt, data); }, 
     listen : function (evt, handler) { if (!mediator) { return; } mediator.listen(evt, handler); }, 
     setMediator : function (newMediator) { mediator = newMediator; } 
    } 
}; 

var mediator = Mediator(), 
    obj1 = myClass(), 
    obj2 = myClass(); 

obj1.setMediator(mediator); 
obj2.setMediator(mediator); 

obj1.listen("event1", obj1.doStuff.bind(obj1)); 
obj2.fire("event1", obj2.data);

你的模塊都可以訪問到一個單一的調解員或然而，許多介質選擇......你可以給每個小部件自身的調解員，這它的各個組件可以共享... ...並使每個小部件都可以訪問系統範圍的中介，因此雖然組件不能訪問像AJAX或DOM這樣的全局服務，但是該部件t本身可以。

通過在你的組件中提供一個接口，你可以使用公共包裝器調用來整潔地編程（在你的主進程中以一種更傳統的方式，而不是使用lambda/callback-heavy JS方式），所以現在：

var imageLoader = ImageLoader(); 
imageLoader.setMediator(mediator); 
img = imageLoader.load("myimg037"); 
imageLoader.fire("imageloader/imageloaded/myimg037", img);

或者然而類似的東西可能會看在你的項目 - imageLoader一無所知任何其他模塊，但是當你調用它.fire方法，任何模塊共享相同的介質，並偵聽該事件將被通報。

來源

2012-11-14 21:14:32 Norguard