小程序使用全局事件总线 Event Bus

在开发小程序的时候，有时需要做页面之间的数据局部刷新或者组件间的状态更新，这个逻辑就非常复杂。

注意

我在实际开发过程中，主要是将Event Bus用在组件封装中，但是我觉得并不是特别好用，写这篇文章只是记录下

代码

注意在调用 on() 之后需要调用 off() 移除事件监听器，清除事件总线中的回调函数
如果调用的是 once() 可以自动销毁

// utils/eventBUs.js
// 全局事件总线

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

  // 注册事件，仅执行一次
  once(eventName, callback) {
    const wrappedCallback = (data) => {
      callback(data);
      this.off(eventName, wrappedCallback);
    };

    this.on(eventName, wrappedCallback);
  }

  //注册
  on(eventName, callback) {
    if (!this.eventList[eventName]) {
      this.eventList[eventName] = [];
    }
    this.eventList[eventName].push(callback);
  }

  //移除
  off(eventName, callback) {
    const callbacks = this.eventList[eventName];
    if (callbacks) {
      const index = callbacks.indexOf(callback);
      if (index !== -1) {
        callbacks.splice(index, 1);
      }
    }
  }

  //触发
  emit(eventName, data) {
    const callbacks = this.eventList[eventName];
    if (callbacks) {
      callbacks.forEach(callback => {
        callback(data);
      });
    }
  }
}

module.exports = new EventBus();

调用

const eventBus = require('./eventBus');

const listener1 = (data) => {
  console.log('listener1:', data);
};

eventBus.once('customEvent', listener1);

eventBus.emit('customEvent', 'Hello World!');  // 输出: listener1: Hello World!

eventBus.emit('customEvent', 'Goodbye World!');  // 不会触发任何回调函数

小程序使用全局事件总线 Event Bus #

注意 #

代码 #

调用 #

小程序使用全局事件总线 Event Bus

注意

代码

调用