js实现总线

实现事件总线（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);
  }
}

使用示例

const bus = new EventBus();

// 订阅事件
bus.on('message', (text) => {
  console.log(`Received: ${text}`);
});

// 触发事件
bus.emit('message', 'Hello World!');

// 一次性订阅
bus.once('alert', (msg) => {
  console.log(`Alert: ${msg}`);
});

// 取消订阅
const handler = (data) => console.log(data);
bus.on('data', handler);
bus.off('data', handler);

高级功能扩展

1. 支持命名空间

   
   class NamespacedEventBus extends EventBus {
   constructor() {
    super();
    this.namespaces = {};
   }

getNamespace(ns) { if (!this.namespaces[ns]) { this.namespaces[ns] = new EventBus(); } return this.namespaces[ns]; } }

2. 支持异步事件
```javascript
async emitAsync(eventName, ...args) {
  const callbacks = this.events[eventName];
  if (callbacks) {
    await Promise.all(callbacks.map(callback => callback(...args)));
  }
}

1. 错误处理增强

   emit(eventName, ...args) {
   const callbacks = this.events[eventName];
   if (callbacks) {
    callbacks.forEach(callback => {
      try {
        callback(...args);
      } catch (e) {
        console.error(`Event ${eventName} handler error:`, e);
      }
    });
   }
   }

实际应用场景

1. Vue.js 中的事件总线

   
   // 创建总线
   const EventBus = new Vue();

// 组件A发送事件 EventBus.$emit('update', data);

// 组件B接收事件 EventBus.$on('update', (data) => { // 处理数据 });

2. React 中的跨组件通信
```javascript
// 创建全局总线实例
export const bus = new EventBus();

// 组件内使用
useEffect(() => {
  const handler = (data) => setState(data);
  bus.on('data-update', handler);
  return () => bus.off('data-update', handler);
}, []);

性能优化建议

1. 使用WeakMap存储事件处理函数，避免内存泄漏
2. 对于高频事件，考虑使用防抖或节流
3. 实现事件优先级机制
4. 添加事件拦截器中间件

这个实现提供了事件总线的基本功能，可以根据具体需求进行扩展和优化。在大型应用中，可能需要考虑更完善的状态管理方案如Redux或Vuex。