微信小程序,事件总线(Event Bus) 实现

1、util.js文件

javascript 复制代码
/**
 * 事件总线
 */
function createEventBus() {
  // 私有事件存储对象,通过闭包保持私有性
  const events = {};

  return {
    /**
     * 监听事件,只执行一次
     * @param {string} eventName - 事件名称
     * @param {Function} callback - 回调函数
     */
    once(eventName, callback) {
      const onceCallback = (...args) => {
        callback(...args);
        this.off(eventName, onceCallback);
      };
      this.on(eventName, onceCallback);
    },

    /**
     * 监听事件
     * @param {string} eventName - 事件名称
     * @param {Function} callback - 回调函数
     */
    on(eventName, callback) {
      if (!events[eventName]) {
        events[eventName] = [];
      }
      events[eventName].push(callback);
    },

    /**
     * 触发事件
     * @param {string} eventName - 事件名称
     * @param {...any} args - 传递给回调的参数
     */
    emit(eventName, ...args) {
      const callbacks = events[eventName];
      if (callbacks) {
        // 复制数组防止回调中修改原数组
        callbacks.slice().forEach(callback => {
          callback(...args);
        });
      }
    },

    /**
     * 移除事件监听
     * @param {string} eventName - 事件名称
     * @param {Function} [callback] - 可选,指定要移除的回调函数
     */
    off(eventName, callback) {
      const callbacks = events[eventName];
      if (callbacks) {
        if (callback) {
          // 过滤掉指定的回调函数
          events[eventName] = callbacks.filter(cb => cb !== callback);
        } else {
          // 移除整个事件的所有监听
          delete events[eventName];
        }
      }
    }
  };
}

// 创建事件总线实例
const eventBus = createEventBus();

module.exports = {
  eventBus: eventBus,
}

2、如何使用

javascript 复制代码
const util = require("../../../utils/util.js");


  //生命周期函数--监听页面加载
  onLoad: function (options) {
    const that = this;
    // 监听事件,只一次
    util.eventBus.once('aaUpdate', (data) => {
      console.log(data)
    });

    
    // 监听事件,多次
    util.eventBus.on('aaUpdate', (data) => {
      console.log(data)
    });
  },

   // 触发事件
  saomaHexiao: function () {
    var that = this;

    // 触发事件
    util.eventBus.emit('aaUpdate', {
      code: 200,
      message: 'ok'
    });
  },