js实现bus
实现事件总线（Bus）的方法
事件总线（Bus）是一种用于组件间通信的机制，允许不同组件通过发布（publish）和订阅（subscribe）事件来交互。以下是使用 JavaScript 实现事件总线的几种方法。
使用自定义事件类
创建一个简单的 EventBus 类，管理事件的订阅和发布：
class EventBus {
constructor() {
this.events = {};
}
subscribe(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(callback);
}
publish(eventName, ...args) {
const callbacks = this.events[eventName];
if (callbacks) {
callbacks.forEach(callback => callback(...args));
}
}
unsubscribe(eventName, callback) {
const callbacks = this.events[eventName];
if (callbacks) {
this.events[eventName] = callbacks.filter(cb => cb !== callback);
}
}
}
// 使用示例
const bus = new EventBus();
bus.subscribe('event1', (data) => console.log('Event1:', data));
bus.publish('event1', 'Hello World');使用 Vue 的事件总线模式
Vue 中可以通过创建一个空的 Vue 实例作为事件总线：
import Vue from 'vue';
const bus = new Vue();
// 订阅事件
bus.$on('event-name', (data) => {
console.log('Event received:', data);
});
// 发布事件
bus.$emit('event-name', { message: 'Hello' });
// 取消订阅
bus.$off('event-name');使用 Node.js 的 EventEmitter
Node.js 内置的 events 模块提供了 EventEmitter 类，可以直接用作事件总线：
const EventEmitter = require('events');
const bus = new EventEmitter();
// 订阅事件
bus.on('event', (data) => {
console.log('Event data:', data);
});
// 发布事件
bus.emit('event', { key: 'value' });
// 取消订阅
bus.off('event', listenerFunction);使用第三方库
一些第三方库如 mitt 或 tiny-emitter 提供了轻量级的事件总线实现：
// 使用 mitt
import mitt from 'mitt';
const bus = mitt();
bus.on('event', (data) => console.log(data));
bus.emit('event', 'Hello');
// 使用 tiny-emitter
import { TinyEmitter } from 'tiny-emitter';
const emitter = new TinyEmitter();
emitter.on('event', (data) => console.log(data));
emitter.emit('event', 'World');注意事项
- 避免内存泄漏，及时取消不再需要的事件订阅。
- 事件总线适合小型应用或简单场景，复杂状态管理建议使用专门的工具（如 Vuex、Redux）。
- 命名冲突问题可以通过命名空间或前缀解决。
