讓我們在JavaScript中創建輕巧的本機活動巴士

事件總線是一種設計模式（雖然我們將在這裡討論JavaScript，但它在任何語言中都是一種設計模式），可用於簡化不同組件之間的通信。它也可以被認為是發布/訂閱或pubsub。

其思想是，組件可以監聽事件總線以了解何時執行其操作。例如，“選項卡面板”組件可能會監聽指示其更改活動選項卡的事件。當然，這可能是由單擊其中一個選項卡引起的，因此完全在該組件內處理。但是，使用事件總線，其他一些元素可以告訴選項卡進行更改。想像一下表單提交導致用戶需要在特定選項卡中收到警報的錯誤，因此表單向事件總線發送消息，指示選項卡組件將活動選項卡更改為包含錯誤的選項卡。這就是它在事件總線上看起來的樣子。

這種情況的偽代碼如下所示……

 // 選項卡組件Tabs.changeTab = id => {
  // 更改活動選項卡的DOM操作。
};
MyEventBus.subscribe("change-tab", Tabs.changeTab(id));

// 其他組件...
// 發生某些事情，然後：
MyEventBus.publish("change-tab", 2);

您是否需要JavaScript 庫來實現此功能？ （技巧問題：您永遠不需要JavaScript 庫）。好吧，有很多選擇：

• PubSubJS
• EventEmitter3
• Postal.js
• jQuery 甚至支持自定義事件，這與這種模式高度相關。

此外，請查看Mitt，這是一個僅200 字節gzip 的庫。這種簡單的模式激發了人們以盡可能簡潔的方式自己解決它的靈感。

讓我們自己動手吧！我們根本不使用任何第三方庫，而是利用JavaScript 中已經內置的事件偵聽系統，即我們都熟悉和喜愛的addEventListener 。

首先，一些上下文

JavaScript 中的addEventListener API 是EventTarget類的成員函數。我們可以將點擊事件綁定到按鈕的原因是（ HTMLButtonElement ）的原型接口間接繼承自EventTarget 。

與大多數其他DOM 接口不同，可以使用new關鍵字直接創建EventTarget 。它在所有現代瀏覽器中都受支持，但只是最近才支持。正如我們在上面的屏幕截圖中看到的， Node繼承了EventTarget ，因此所有DOM 節點都有方法addEventListener 。

訣竅

我建議使用一種極其輕量級的Node 類型作為我們的事件偵聽總線：HTML 註釋（ <!-- --> ）。

對於瀏覽器渲染引擎，HTML 註釋只是代碼中的註釋，除了為開發人員提供描述性文本之外，沒有任何功能。但是，由於註釋仍然是用HTML 編寫的，因此它們最終作為真實的節點出現在DOM 中，並具有自己的原型接口—— Comment ——它繼承自Node 。

Comment類可以直接從new創建，就像EventTarget一樣：

 const myEventBus = new Comment('my-event-bus');

我們也可以使用古老但廣泛支持的document.createComment API。它需要一個數據參數，即註釋的內容。它甚至可以是空字符串：

 const myEventBus = document.createComment('my-event-bus');

現在我們可以使用dispatchEvent發出事件，它接受一個Event對象。要傳遞用戶定義的事件數據，請使用CustomEvent ，其中detail字段可用於包含任何數據。

 myEventBus.dispatchEvent(
  new CustomEvent('event-name', {
    detail: 'event-data'
  })
);

Internet Explorer 9-11 支持CustomEvent ，但沒有任何版本支持new CustomEvent 。使用document.createEvent模擬它很複雜，因此如果IE 支持對您很重要，則有一種方法可以對其進行填充。

現在我們可以綁定事件偵聽器：

 myEventBus.addEventListener('event-name', ({ detail }) => {
  console.log(detail); // => event-data
});

如果事件打算只觸發一次，我們可以使用{ once: true }進行一次性綁定。其他選項不適合這裡。要刪除事件偵聽器，我們可以使用原生的removeEventListener 。

偵錯

綁定到單個事件總線的事件數量可能非常大。如果您忘記刪除它們，也可能存在內存洩漏。如果我們想知道有多少事件綁定到myEventBus呢？

myEventBus是一個DOM 節點，因此瀏覽器中的DevTools 可以對其進行檢查。在那裡，我們可以在“元素”→“事件偵聽器”選項卡中找到事件。請務必取消選中“祖先”以隱藏綁定到document和window上的事件。

示例

一個缺點是EventTarget的語法略顯冗長。我們可以為它編寫一個簡單的包裝器。下面是TypeScript 中的演示：

 class EventBus<detailtype any> {
  private eventTarget: EventTarget;
  constructor(description = '') { this.eventTarget = document.appendChild(document.createComment(description)); }
  on(type: string, listener: (event: CustomEvent<detailtype> ) => void) { this.eventTarget.addEventListener(type, listener); }
  once(type: string, listener: (event: CustomEvent<detailtype> ) => void) { this.eventTarget.addEventListener(type, listener, { once: true }); }
  off(type: string, listener: (event: CustomEvent<detailtype> ) => void) { this.eventTarget.removeEventListener(type, listener); }
  emit(type: string, detail?: DetailType) { return this.eventTarget.dispatchEvent(new CustomEvent(type, { detail })); }
}

// 用法const myEventBus = new EventBus<string> ('my-event-bus');
myEventBus.on('event-name', ({ detail }) => {
  console.log(detail);
});

myEventBus.once('event-name', ({ detail }) => {
  console.log(detail);
});

myEventBus.emit('event-name', 'Hello'); // => Hello Hello
myEventBus.emit('event-name', 'World'); // => World</string></detailtype></detailtype></detailtype></detailtype>

下面的演示提供了編譯後的JavaScript。

就是這樣！我們剛剛創建了一個無依賴的事件偵聽總線，一個組件可以通知另一個組件更改以觸發操作。執行此類操作不需要完整的庫，並且它開啟的可能性是無限的。

以上是讓我們在JavaScript中創建輕巧的本機活動巴士的詳細內容。更多資訊請關注PHP中文網其他相關文章！