使用javascript实现一个EventBus

在前端开发中,实现一个简单的EventBus可以通过以下方式来完成。这里是一个基本的EventBus类的实现,你可以根据自己的需要进行修改或扩展。

class EventBus {
    constructor() {
        this.subscribers = {};
    }

    // 注册事件
    subscribe(event, callback) {
        if (!this.subscribers[event]) {
            this.subscribers[event] = [];
        }
        this.subscribers[event].push(callback);
    }

    // 取消事件订阅
    unsubscribe(event, callback) {
        if (this.subscribers[event]) {
            this.subscribers[event] = this.subscribers[event].filter(subscriberCallback => subscriberCallback !== callback);
        }
    }

    // 触发事件
    publish(event, data) {
        if (this.subscribers[event]) {
            this.subscribers[event].forEach(callback => callback(data));
        }
    }
}

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

// 订阅事件
eventBus.subscribe('event1', (data) => {
    console.log('Event1 triggered with data:', data);
});

eventBus.subscribe('event2', (data) => {
    console.log('Event2 triggered with data:', data);
});

// 触发事件
eventBus.publish('event1', { message: 'Hello from Event1' });
eventBus.publish('event2', { message: 'Hello from Event2' });

在这个示例中,我们创建了一个EventBus类,该类有三个主要方法:subscribeunsubscribepublishsubscribe方法用于注册事件和回调函数,unsubscribe方法用于取消事件订阅,而publish方法则用于触发事件并传递数据给订阅了该事件的回调函数。

使用示例展示了如何订阅两个事件(event1event2),并通过publish方法触发这些事件。当事件被触发时,订阅了该事件的回调函数将被执行,并接收到传递的数据。

posted @ 2025-01-05 09:15  王铁柱6  阅读(96)  评论(0)    收藏  举报