微信小程序,事件总线(Event Bus) 实现
1、util.js文件
/*** 事件总线*/
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、如何使用
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'});},