js实现总线
实现总线模式的方法
总线模式（Event Bus）是一种用于组件或模块间通信的设计模式，允许不同部分通过事件发布/订阅机制交互，而无需直接引用彼此。以下是JavaScript中实现总线模式的几种方法：
自定义事件总线类
通过类封装事件管理逻辑，提供on（订阅）、emit（发布）、off（取消订阅）等方法：
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(cb => cb(...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(data));
bus.emit('message', 'Hello EventBus');使用浏览器原生API
现代浏览器支持CustomEvent和EventTarget接口，可直接用于简单场景：
const bus = new EventTarget();
// 订阅
bus.addEventListener('customEvent', (e) => {
console.log(e.detail);
});
// 发布
bus.dispatchEvent(new CustomEvent('customEvent', {
detail: { message: 'Hello' }
}));基于第三方库
现有库如mitt或EventEmitter3提供更完善的实现：
// 使用mitt（体积仅200字节）
import mitt from 'mitt';
const bus = mitt();
bus.on('event', () => console.log('triggered'));
bus.emit('event');Vue中的事件总线
Vue 2.x可通过空Vue实例实现跨组件通信：
// 创建总线
export const bus = new Vue();
// 组件A发布事件
bus.$emit('update', payload);
// 组件B订阅事件
bus.$on('update', (payload) => {...});注意事项
- 需处理内存泄漏，及时取消无用订阅
- 大型项目建议结合状态管理工具（如Vuex/Pinia）
- 避免过度使用导致代码难以维护
- TypeScript项目可添加类型定义增强安全性
