当前位置：首页 > JavaScript

js实现bus

2026-04-06 17:30:42JavaScript

实现事件总线（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 提供了轻量级的事件总线实现：

js实现bus

// 使用 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');