当前位置：首页 > article >正文

面试之《实现Event Bus》

article 2025/3/15 1:23:58

Event Bus（事件总线）是一种用于在应用程序不同组件之间进行解耦通信的设计模式。它允许组件之间通过发布和订阅事件来进行交互，而不需要直接依赖彼此。以下介绍使用 JavaScript 实现 Event Bus 的方法。

JavaScript 实现 Event Bus

class EventBus {
    constructor() {
        // 用于存储事件和对应的回调函数列表
        this.events = {};
    }

    // 订阅事件
    on(eventName, callback) {
        if (!this.events[eventName]) {
            // 如果事件不存在，则创建一个新的数组来存储回调函数
            this.events[eventName] = [];
        }
        // 将回调函数添加到对应事件的数组中
        this.events[eventName].push(callback);
    }

    // 发布事件
    emit(eventName, ...args) {
        if (this.events[eventName]) {
            // 遍历事件对应的回调函数列表并依次执行
            this.events[eventName].forEach(callback => {
                callback(...args);
            });
        }
    }

    // 取消订阅事件
    off(eventName, callback) {
        if (this.events[eventName]) {
            // 过滤掉指定的回调函数
            this.events[eventName] = this.events[eventName].filter(cb => cb!== callback);
        }
    }
}

// 使用示例
const eventBus = new EventBus();

// 定义一个回调函数
const callback = (message) => {
    console.log(`Received message: ${message}`);
};

// 订阅事件
eventBus.on('messageEvent', callback);

// 发布事件
eventBus.emit('messageEvent', 'Hello, Event Bus!');

// 取消订阅事件
eventBus.off('messageEvent', callback);

// 再次发布事件，此时回调函数不会被执行
eventBus.emit('messageEvent', 'This message won\'t be received.');