JavaScript 事件总线

提示

事件总线是一种在前端应用中实现组件间通信的机制，它基于发布-订阅模式(Pub-Sub)，允许不直接关联的组件之间进行通信。

发布(emit): 发布一个事件

订阅(on): 监听一个事件

取消订阅(off): 移除事件监听

实现事件总线

利用对象类型数据的存储原理，引用地址不变，状态以此共享

class EventBus {
  constructor() {
    this.events = {};
  }

  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(cb => cb(...args));
    }
  }

  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(
        cb => cb !== callback
      );
    }
  }

  once(eventName, callback) {
    const onceWrapper = (...args) => {
      callback(...args);
      this.off(eventName, onceWrapper);
    };
    this.on(eventName, onceWrapper);
  }
}

// 使用示例
const bus = new EventBus();
bus.on('message', (msg) => console.log(msg));
bus.emit('message', 'Hello World!');

vue 中的内置事件总线

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 组件A - 发布事件
EventBus.$emit('event-name', payload);

// 组件B - 订阅事件
EventBus.$on('event-name', payload => {
  // 处理事件
});

// 组件B - 取消订阅
EventBus.$off('event-name');

第三方包

mitt: 超轻量级(200字节)事件总线