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'
});
},