js实现bus
JavaScript 实现事件总线（Event Bus）
事件总线是一种用于组件或模块间通信的机制，通过发布/订阅模式实现解耦。以下是几种常见的实现方式：
基础版 Event Bus 实现
class EventBus {
constructor() {
this.events = {};
}
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(callback);
}
emit(eventName, ...args) {
const callbacks = this.events[eventName];
if (callbacks) {
callbacks.forEach(callback => callback(...args));
}
}
off(eventName, callback) {
const callbacks = this.events[eventName];
if (callbacks) {
this.events[eventName] = callbacks.filter(cb => cb !== callback);
}
}
once(eventName, callback) {
const wrapper = (...args) => {
callback(...args);
this.off(eventName, wrapper);
};
this.on(eventName, wrapper);
}
}Vue 风格的 Event Bus
Vue 2.x 中常通过空的 Vue 实例作为事件总线：
import Vue from 'vue';
const bus = new Vue();
// 发送事件
bus.$emit('event-name', payload);
// 监听事件
bus.$on('event-name', callback);
// 取消监听
bus.$off('event-name', callback);支持异步的 Event Bus
class AsyncEventBus extends EventBus {
async emitAsync(eventName, ...args) {
const callbacks = this.events[eventName];
if (callbacks) {
await Promise.all(callbacks.map(callback => callback(...args)));
}
}
}使用示例
const bus = new EventBus();
// 订阅事件
bus.on('message', (text) => {
console.log(`Received: ${text}`);
});
// 发布事件
bus.emit('message', 'Hello Event Bus');
// 一次性订阅
bus.once('alert', (msg) => {
console.log(`Alert: ${msg}`);
});
// 取消订阅
const handler = (data) => console.log(data);
bus.on('data', handler);
bus.off('data', handler);注意事项
- 避免内存泄漏，及时取消不再需要的事件监听
- 大型项目建议使用专业状态管理工具（如 Vuex、Redux）
- 事件命名建议使用常量或命名空间防止冲突
- 考虑添加错误处理机制
以上实现可根据具体需求进行扩展，如添加优先级、拦截器等功能。
