js实现bus
JavaScript 实现事件总线（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);
}
}
}使用示例
const bus = new EventBus();
// 订阅事件
bus.on('message', (data) => {
console.log('Received:', data);
});
// 发布事件
bus.emit('message', 'Hello World');
// 取消订阅
const handler = (data) => console.log('Handler:', data);
bus.on('log', handler);
bus.off('log', handler);高级功能扩展
- 一次性监听
once(eventName, callback) {
const wrapper = (...args) => {
callback(...args);
this.off(eventName, wrapper);
};
this.on(eventName, wrapper);
}- 异步事件支持
async emitAsync(eventName, ...args) {
const callbacks = this.events[eventName];
if (callbacks) {
await Promise.all(callbacks.map(cb => cb(...args)));
}
}- 错误处理增强
emit(eventName, ...args) {
try {
const callbacks = this.events[eventName];
if (callbacks) {
callbacks.forEach(callback => {
try {
callback(...args);
} catch (err) {
console.error(`Event ${eventName} handler error:`, err);
}
});
}
} catch (err) {
console.error(`Event emit error:`, err);
}
}Vue 中的事件总线
在 Vue 2 中常这样使用：
// 创建总线
export const bus = new Vue();
// 组件A发送事件
bus.$emit('event-name', payload);
// 组件B接收事件
bus.$on('event-name', payload => {
// 处理逻辑
});注意事项
- 避免内存泄漏，及时取消不再需要的事件监听
- 大型项目建议使用专业状态管理工具（Vuex/Pinia等）
- 事件命名建议采用常量管理，避免拼写错误
