JS如何实现发布订阅？事件总线的原理

class EventBus {
    constructor() {
        // 存储所有事件及其对应的回调函数
        // 结构大概是: { 'eventName': [callback1, callback2], 'anotherEvent': [callback3] }
        this.events = {};
    }

    /**
     * 订阅事件
     * @param {string} eventName - 事件名称
     * @param {function} callback - 事件触发时执行的回调函数
     * @returns {function} 一个用于取消订阅的函数，方便链式调用或在特定时机取消
     */
    subscribe(eventName, callback) {
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }
        this.events[eventName].push(callback);

        // 返回一个取消订阅的函数，这样使用者就不需要手动调用unsubscribe并传入callback
        return () => {
            this.unsubscribe(eventName, callback);
        };
    }

    /**
     * 发布事件
     * @param {string} eventName - 要发布的事件名称
     * @param {*} data - 传递给订阅者的任意数据
     */
    publish(eventName, data) {
        if (this.events[eventName]) {
            // 遍历所有订阅了该事件的回调函数并执行
            // 这里加个try-catch，防止某个回调函数出错影响其他回调的执行
            this.events[eventName].forEach(callback => {
                try {
                    callback(data);
                } catch (e) {
                    console.error(`Error in callback for event "${eventName}":`, e);
                }
            });
        }
    }

    /**
     * 取消订阅
     * @param {string} eventName - 事件名称
     * @param {function} callback - 要取消的回调函数
     */
    unsubscribe(eventName, callback) {
        if (this.events[eventName]) {
            this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
        }
    }

    /**
     * 清除某个事件的所有订阅
     * @param {string} eventName - 事件名称
     */
    clear(eventName) {
        if (this.events[eventName]) {
            delete this.events[eventName];
        }
    }

    /**
     * 清除所有事件的所有订阅（慎用）
     */
    clearAll() {
        this.events = {};
    }
}

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

// 组件A订阅 'userLoggedIn' 事件
const unsubscribeA = eventBus.subscribe('userLoggedIn', (user) => {
    console.log(`Component A: User ${user.name} logged in!`);
});

// 组件B订阅 'userLoggedIn' 事件，并且只对特定用户感兴趣
const unsubscribeB = eventBus.subscribe('userLoggedIn', (user) => {
    if (user.id === 123) {
        console.log(`Component B: Special user ${user.name} (ID: ${user.id}) detected.`);
    }
});

// 组件C订阅 'itemAddedToCart' 事件
eventBus.subscribe('itemAddedToCart', (item) => {
    console.log(`Component C: Added ${item.name} to cart. Quantity: ${item.quantity}`);
});

// 模拟用户登录
console.log('\n--- Publishing userLoggedIn event ---');
eventBus.publish('userLoggedIn', { id: 123, name: 'Alice' });
eventBus.publish('userLoggedIn', { id: 456, name: 'Bob' });

// 模拟商品加入购物车
console.log('\n--- Publishing itemAddedToCart event ---');
eventBus.publish('itemAddedToCart', { id: 'prod001', name: 'Laptop', quantity: 1 });

// 组件A不再关心用户登录事件
console.log('\n--- Component A unsubscribes ---');
unsubscribeA(); // 调用之前subscribe返回的取消函数

// 再次模拟用户登录，Component A将不再收到通知
console.log('\n--- Publishing userLoggedIn again after unsubscribe ---');
eventBus.publish('userLoggedIn', { id: 789, name: 'Charlie' });

// 清除Component B的订阅
unsubscribeB();
console.log('\n--- Publishing userLoggedIn after B unsubscribes ---');
eventBus.publish('userLoggedIn', { id: 123, name: 'David' }); // 此时没有任何订阅者了

addEventListener

unsubscribe

useEffect

onUnmounted

console.log