js 实现 eventbus
实现 EventBus 的基本结构
EventBus 是一种发布/订阅模式,用于组件或模块间的通信。以下是一个简单的 EventBus 实现:
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]) {
if (callback) {
this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
} else {
delete this.events[eventName];
}
}
}
}
使用示例
const eventBus = new EventBus();
// 订阅事件
eventBus.on('message', (text) => {
console.log('Received:', text);
});
// 发布事件
eventBus.emit('message', 'Hello EventBus!');
// 取消订阅
const handler = (text) => console.log('Handler:', text);
eventBus.on('message', handler);
eventBus.off('message', handler);
支持一次性事件监听
可以通过扩展 on 方法或添加 once 方法实现一次性事件监听:
class EventBus {
constructor() {
this.events = {};
}
once(eventName, callback) {
const onceWrapper = (...args) => {
callback(...args);
this.off(eventName, onceWrapper);
};
this.on(eventName, onceWrapper);
}
}
// 使用示例
eventBus.once('greet', (name) => {
console.log(`Hello ${name}, this will only run once!`);
});
eventBus.emit('greet', 'Alice'); // 触发
eventBus.emit('greet', 'Bob'); // 不触发
支持异步事件处理
可以通过 Promise 或 async/await 支持异步事件处理:
class AsyncEventBus extends EventBus {
async emitAsync(eventName, ...args) {
if (this.events[eventName]) {
for (const callback of this.events[eventName]) {
await callback(...args);
}
}
}
}
// 使用示例
const asyncBus = new AsyncEventBus();
asyncBus.on('asyncEvent', async (data) => {
await new Promise(resolve => setTimeout(resolve, 1000));
console.log('Async processed:', data);
});
asyncBus.emitAsync('asyncEvent', 'Test Data');
支持事件优先级
可以通过扩展数据结构支持事件优先级:

class PriorityEventBus extends EventBus {
on(eventName, callback, priority = 0) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push({ callback, priority });
this.events[eventName].sort((a, b) => b.priority - a.priority);
}
emit(eventName, ...args) {
if (this.events[eventName]) {
this.events[eventName].forEach(({ callback }) => {
callback(...args);
});
}
}
}
// 使用示例
const priorityBus = new PriorityEventBus();
priorityBus.on('priorityEvent', () => console.log('Default Priority'), 0);
priorityBus.on('priorityEvent', () => console.log('High Priority'), 10);
priorityBus.emit('priorityEvent');






