如何在全局和內部requireJS對象中分派事件？

Question

我正在尋找一種使用javascript或jquery在全局和內部requireJS模塊中分派事件的方法。

我希望能夠在我的js文件說：

dispatchEvent(myCustomEventWithSomeData); 

，然後在應用程序的其它部分添加一個偵聽器，像這樣：

addEventListener(「type Of Event」, executeThisFunction); 

是這可能使用jQuery的？或者其他方式？ requireJS模塊中的潛在解決方案是否會在全局javascript對象內工作？

另外，如何創建一個泡泡的事件。因此，如果我想要一個事件只在代碼的特定部分執行，它不會在全局範圍內調度？

Answer 1

是的，這是我通常在我自己的應用程序中很早建立的東西。現在，你如何處理你的事件將是非常依賴於你決定使用什麼庫或技術，但核心概念將保持不變。

就個人而言，我認爲PostalJS是散步的公雞，所以我將以此爲例。我不會包含太多的代碼，因爲它主要是典禮和樣板，但我希望你能明白。

一，你會想創建一個像全局的應用程序對象，讓你的事件休息。總體而言，這是將模塊化JS代碼的好實踐 - 您需要充當模塊間代理的東西。它可以是非常簡單的和基本的：

define(function() { 
    var App = {}; 
    return App; 
}); 

現在，這個模塊也可以加載到一些東西，開始填充它。有一段時間你可以避免這樣做，但我最終發現循環依賴會讓你在屁股上咬你。所以我建議將它包含在類似於「主」模塊的內容中。從那裏，包括你的事件系統，並將其添加到應用程序。

define(['app', 'events'], function(App, Events) { 
    App.events = new Events(); 
}); 

現在你有一個很好的輕量級對象，你可以在其他共享同一個事件對象的模塊中包含它。因此，可以說你有一個側邊欄：

define(['app'], function(App) { 
    // User has clicked the sidebar 
    App.events.publish('sidebar.clicked'); // 
}); 

而且，哦，我不知道，也許是點擊側邊欄，使恐龍出現，所以你的恐龍模塊中，你會聽/通過執行以下操作訂閱：

define(['app'], function(App) { 
    App.events.subscribe('sidebar.clicked', showDinosaur); 
}); 

讓我可以在模塊之間共享一個輕量級對象我發現是一個成功的模塊化JS架構的關鍵。我在自己的項目中使用它作爲全局對象存儲，WebSocket消息傳遞層的容器，以及其他我不想在每個模塊中單獨明確包含的內容。