面试之《实现Event Bus》

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

JavaScript 实现 Event Bus

javascript 复制代码

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.');

代码解释

1. 构造函数

在 JavaScript 的实现中，构造函数都会初始化一个空对象（JavaScript）或字典（Python）来存储事件和对应的回调函数列表。

2. `on` 方法

用于订阅事件。如果事件不存在，则创建一个新的数组（JavaScript）来存储回调函数，并将回调函数添加到该数组或列表中。

3. `emit` 方法

用于发布事件。如果事件存在，则遍历该事件对应的回调函数列表，并依次执行这些回调函数，同时传递相应的参数。

4. `off` 方法

用于取消订阅事件。通过过滤掉指定的回调函数，将其从事件对应的回调函数列表中移除。

通过以上实现，你可以在应用程序中使用 Event Bus 来实现组件之间的解耦通信。