当然!下面是一个使用 JavaScript 实现简单的 EventBus(事件总线)的例子:
class EventBus {
constructor() {
this.events = {};
}
// 订阅事件
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(callback);
}
// 发布事件
emit(eventName, ...args) {
const eventCallbacks = this.events[eventName];
if (eventCallbacks) {
eventCallbacks.forEach(callback => {
callback(...args);
});
}
}
// 取消订阅
off(eventName, callback) {
const eventCallbacks = this.events[eventName];
if (eventCallbacks) {
this.events[eventName] = eventCallbacks.filter(cb => cb !== callback);
}
}
}
// 使用示例
const eventBus = new EventBus();
// 订阅事件
const callback1 = (data) => {
console.log('Callback 1:', data);
};
eventBus.on('event1', callback1);
const callback2 = (data) => {
console.log('Callback 2:', data);
};
eventBus.on('event1', callback2);
// 发布事件
eventBus.emit('event1', 'Hello, EventBus!');
// 取消订阅
eventBus.off('event1', callback1);
// 再次发布事件
eventBus.emit('event1', 'Hello, EventBus again!');
在上面的示例中,EventBus 类有三个主要的方法:
on
:用于订阅事件,将回调函数添加到对应的事件名称的回调数组中。emit
:用于发布事件,触发对应事件名称下的所有回调函数,并传递参数。off
:用于取消订阅事件,从对应事件名称的回调数组中移除指定的回调函数。
你可以根据需要扩展这个简单的 EventBus 实现来满足更复杂的场景,例如添加事件命名空间、一次性订阅、错误处理等功能。这个示例只是一个基础的起点,供你开始使用 EventBus。
正文结束
Ctrl + Enter