什麼是事件總線

事件總線（Event Bus）是一種實現應用內各模塊、組件之間“通信解耦”非常常用的機制。通俗來説，它相當於一個集中的中轉站，所有需要發佈或接收消息的對象，都統一通過事件總線進行註冊和消息派發。這樣，消息發送方無須知道消息最終會被誰處理，消息監聽方也不必關心消息是由誰、何時、如何發出的。其本質是“發佈-訂閲模式”（Publish-Subscribe Pattern），也是觀察者模式的一種變體，可被看作全局的消息訂閲中心。

在前端開發領域，事件總線廣泛應用在模塊間無強依賴的通信場景，比方説兄弟組件之間的信息共享、業務側工具庫與具體頁面間解耦、插件間通知等。藉助事件總線，開發者可以實現模塊間的低耦合協作、靈活插拔和統一管理事件流。事件總線對於動態擴展和灰度功能切換等複雜業務也十分友好，因為監聽者可動態註冊與移除，方便做功能按需加載。

此外，事件總線的接口通常支持訂閲（on/once）、觸發（emit）、取消訂閲（off）等方法，方便靈活管理事件生命週期。不過，濫用事件總線也可能讓事件鏈路變複雜，調試變難，因此應結合具體業務需求合理使用，配合調試工具和命名規範，才能讓項目的通信關係既靈活又清晰。

何時使用事件總線

事件總線非常適用於多個業務模塊之間的鬆耦合通信，例如跨模塊的廣播訂閲、一次性的瞬時消息分發，以及一些需要按需監聽或臨時擴展灰度功能的場景。通過事件總線，消息的發送方與接收方彼此無需強直接依賴，只需根據事件名稱進行派發和監聽，就能達到靈活通信和動態擴展的目的。這對於大型前端系統、插件架構或需要動態註冊/移除功能的應用尤為友好。同時，事件總線天然支持“訂閲-發佈”模型，讓消息流轉路徑變得簡單而可控，便於在複雜業務場景下逐步引入和治理事件鏈路。

但並非所有場景都適合引入事件總線。如果業務鏈路明確、需要嚴格的依賴管理以及清晰的錯誤傳遞，優先考慮直接調用或依賴注入，這樣能讓代碼關係和異常流轉一目瞭然。在涉及跨頁面通信、全局複雜狀態管理時，推薦採用如 Redux、Pinia、Zustand 這類專門的狀態管理庫，以實現數據統一、時序可追蹤的高可維護架構。而在處理原生 DOM 事件（例如冒泡、捕獲、阻止默認行為等）時，則應強化使用原生 CustomEvent 機制，因為它在瀏覽器原生事件系統中擁有更佳的兼容性和可控性。選擇通信方案時，應充分權衡業務複雜度、可讀性與維護便利性，合理利用事件總線工具以發揮其最佳價值。

Show You Code

// 定義一個事件總線類，用於管理所有事件的訂閲和發佈
class EventBus {
  // 構造函數：在創建 EventBus 實例時執行
  // 初始化一個空對象 events，用來存儲所有事件及其對應的回調函數列表
  // events 的結構類似：{ 'user:login': [callback1, callback2], 'todo:added': [callback3] }
  constructor() {
    this.events = {};
  }

  // 訂閲事件方法：當某個事件發生時，執行傳入的回調函數
  // eventName: 事件名稱，比如 'user:login' 或 'todo:added'
  // callback: 當事件觸發時要執行的函數
  on(eventName, callback) {
    // 如果這個事件名稱還沒有被註冊過，就創建一個空數組來存儲回調函數
    // 這樣可以避免後續 push 時出錯
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    // 將回調函數添加到該事件名稱對應的數組中
    // 同一個事件可以有多個監聽器，所以用數組存儲
    this.events[eventName].push(callback);
    // 返回一個函數，調用這個函數就可以取消訂閲
    // 這是一個閉包，記住了 eventName 和 callback，方便後續取消訂閲
    return () => this.off(eventName, callback);
  }

  // 訂閲一次方法：只監聽一次事件，觸發後自動取消訂閲
  // 常用於只需要執行一次的場景，比如初始化完成通知
  once(eventName, callback) {
    // 創建一個包裝函數，這個函數會先執行原始回調，然後自動取消訂閲
    // 使用箭頭函數和剩餘參數 ...args 來接收所有傳入的參數
    const wrapper = (...args) => {
      // 執行原始的回調函數，並傳遞所有參數
      callback(...args);
      // 執行完後，取消對這個包裝函數的訂閲
      // 注意這裏取消的是 wrapper，不是原始的 callback
      this.off(eventName, wrapper);
    };
    // 將包裝函數註冊到事件總線上
    // 當事件觸發時，會執行 wrapper，wrapper 會執行 callback 並自動取消訂閲
    this.on(eventName, wrapper);
  }

  // 觸發事件方法：通知所有訂閲了該事件的回調函數執行
  // eventName: 要觸發的事件名稱
  // ...args: 剩餘參數，可以傳遞任意數量的參數給回調函數
  emit(eventName, ...args) {
    // 獲取該事件名稱對應的所有回調函數列表
    const callbacks = this.events[eventName];
    // 如果存在回調函數列表（即有人訂閲了這個事件）
    if (callbacks) {
      // 遍歷所有回調函數，依次執行它們
      // forEach 會遍歷數組中的每個元素，cb 就是每個回調函數
      // ...args 會將所有參數展開傳遞給回調函數
      callbacks.forEach(cb => cb(...args));
    }
  }

  // 取消訂閲方法：移除某個事件的某個回調函數
  // eventName: 事件名稱
  // callback: 要移除的回調函數（必須是之前註冊的同一個函數引用）
  off(eventName, callback) {
    // 獲取該事件名稱對應的所有回調函數列表
    const callbacks = this.events[eventName];
    // 如果存在回調函數列表
    if (callbacks) {
      // 查找要移除的回調函數在數組中的位置
      // indexOf 返回該函數在數組中的索引，如果不存在則返回 -1
      const index = callbacks.indexOf(callback);
      // 如果找到了（索引不是 -1），就從數組中移除它
      // splice(index, 1) 表示從 index 位置開始，刪除 1 個元素
      if (index !== -1) callbacks.splice(index, 1);
    }
  }

  // 清空方法：移除所有事件的訂閲
  // 常用於應用重置或清理場景
  clear() {
    // 直接將 events 重置為空對象，所有訂閲都會被清除
    this.events = {};
  }
}

// 創建一個全局的事件總線實例
// 這樣整個應用都可以使用這個 eventBus 來進行事件通信
const eventBus = new EventBus();

使用事件總線

下面通過一個用户登錄的場景來演示事件總線的實際應用。在這個例子中，登錄模塊只需要負責登錄邏輯，其他模塊（如用户信息顯示、數據加載、統計分析）通過訂閲登錄事件來響應，實現了模塊間的解耦。

// 模塊 A：用户登錄模塊
// 這個模塊負責處理用户登錄的邏輯，登錄成功後通過事件總線通知其他模塊
function loginModule() {
  // 定義登錄函數，接收用户名和密碼
  const login = (username, password) => {
    console.log('正在登錄...');
    // 使用 setTimeout 模擬異步登錄請求（實際項目中可能是 fetch 或 axios）
    // 1000 毫秒後執行回調函數
    setTimeout(() => {
      // 模擬登錄成功，創建一個用户對象
      // 對象包含用户的基本信息：id、用户名、郵箱和角色
      const user = { id: 1, username, email: `${username}@example.com`, role: 'user' };
      // 觸發 'user:login' 事件，並將用户信息作為參數傳遞
      // 所有訂閲了這個事件的模塊都會收到通知
      eventBus.emit('user:login', user);
    }, 1000);
  };
  // 返回一個對象，包含 login 方法，供外部調用
  return { login };
}

// 模塊 B：用户信息顯示模塊
// 這個模塊負責在用户登錄後顯示歡迎信息
// 它不需要知道登錄模塊的具體實現，只需要訂閲登錄事件即可
function userInfoModule() {
  // 訂閲 'user:login' 事件
  // 當登錄事件觸發時，這個回調函數會自動執行
  // user 參數就是登錄模塊通過 emit 傳遞的用户信息
  eventBus.on('user:login', (user) => {
    // 在控制枱輸出歡迎信息，使用用户對象的 username 屬性
    console.log('🎉 歡迎回來，' + user.username);
    // 輸出用户的郵箱信息
    console.log('📧 郵箱：' + user.email);
  });
}

// 模塊 C：數據加載模塊
// 這個模塊負責在用户登錄後加載相關的用户數據
// 同樣通過訂閲登錄事件來實現，與登錄模塊解耦
function dataModule() {
  // 訂閲 'user:login' 事件
  eventBus.on('user:login', (user) => {
    // 輸出開始加載數據的提示
    console.log('📦 開始加載用户數據...');
    // 使用用户 ID 來加載對應的數據（這裏只是示例，實際會調用 API）
    console.log('用户ID：' + user.id);
  });
}

// 模塊 D：分析統計模塊
// 這個模塊負責記錄用户的登錄行為，用於數據分析和統計
// 通過事件總線，可以在不影響其他模塊的情況下添加統計功能
function analyticsModule() {
  // 訂閲 'user:login' 事件
  eventBus.on('user:login', (user) => {
    // 記錄登錄事件，包含用户 ID 和登錄時間
    // new Date().toISOString() 獲取當前時間的 ISO 格式字符串
    console.log('📊 記錄登錄事件', { userId: user.id, time: new Date().toISOString() });
  });
}

// 初始化所有模塊
// 先創建登錄模塊的實例，獲取 login 方法
const login = loginModule();
// 初始化其他模塊，它們會自動訂閲登錄事件
userInfoModule();
dataModule();
analyticsModule();
// 執行登錄操作，傳入用户名和密碼
// 登錄成功後，所有訂閲了 'user:login' 事件的模塊都會自動執行
login.login('zhangsan', '123456');

總結

事件總線是一種強大的通信機制，特別適用於需要跨模塊通信和解耦的場景。它通過發佈-訂閲模式，讓消息的發送方和接收方彼此獨立，實現了鬆耦合的架構設計。但是，事件總線也不是萬能的，需要根據具體場景合理使用，避免濫用導致事件鏈路過於複雜，增加調試和維護的難度。

在實際應用中，應該配合良好的命名規範、完善的錯誤隔離機制和靈活的調試開關，來提升代碼的可維護性。命名規範可以讓事件的含義一目瞭然，錯誤隔離可以防止單個監聽器的錯誤影響整個系統，調試開關可以在開發時提供詳細的日誌信息，而在生產環境中保持性能。同時，事件總線應該與自定義事件、DOM 事件等機制組合使用，根據不同的場景選擇最合適的通信方式，這樣才能構建出清晰、可擴展的前端交互體系。