微信小程序中的全局事件总线,原生JS编写
在微信小程序里，全局事件总线（Event Bus）是一种常用的实现组件间通信的方式，它能帮助不同页面或组件之间进行消息传递，实现松耦合通信。下面为你详细介绍微信小程序全局事件总线的相关内容：
实现原理
全局事件总线本质上是一个事件管理对象，它维护着一个事件队列，用于存储事件名称和对应的回调函数。当某个组件触发一个事件时，事件总线会遍历该事件对应的回调函数列表，并依次执行这些回调函数，从而实现消息的传递。
实现步骤
1. 创建全局事件总线模块
在小程序项目中创建一个新的 JavaScript 文件，例如 eventBus.js，用于实现全局事件总线的功能。以下是一个简单的实现示例：
// eventBus.js
const eventBus = {
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(callback => {
callback(...args);
});
}
},
// 移除事件监听
off(eventName, callback) {
if (this.events[eventName]) {
this.events[eventName] = this.events[eventName].filter(cb => cb!== callback);
}
}
};
export default eventBus;
上述代码定义了一个 eventBus 对象，包含三个主要方法：
on：用于监听指定事件，并将回调函数添加到该事件的回调函数列表中。emit：用于触发指定事件，会遍历该事件的回调函数列表并依次执行。off：用于移除指定事件的某个回调函数。
2. 在需要的页面或组件中引入并使用事件总线
在需要进行事件通信的页面或组件中引入 eventBus.js 文件，并使用其中的方法。
发送事件示例：
// 在某个页面或组件中触发事件
import eventBus from './eventBus.js';
// 触发名为 'message' 的事件，并传递参数
eventBus.emit('message', '这是一条消息');
接收事件示例：
// 在另一个页面或组件中监听事件
import eventBus from './eventBus.js';
Page({
onLoad() {
// 监听名为 'message' 的事件
eventBus.on('message', (msg) => {
console.log('接收到消息:', msg);
});
},
onUnload() {
// 页面卸载时移除事件监听，防止内存泄漏
eventBus.off('message', this.handleMessage);
},
handleMessage(msg) {
console.log('接收到消息:', msg);
}
});
注意事项
- 内存泄漏问题：在组件或页面销毁时，需要及时移除事件监听，避免内存泄漏。可以在组件的
detached生命周期函数或页面的onUnload生命周期函数中调用off方法移除监听。 - 事件命名冲突：在使用事件总线时，要注意事件名称的唯一性，避免不同组件或页面使用相同的事件名称导致冲突。可以采用命名空间或前缀的方式来区分不同模块的事件。
- 性能问题：如果事件总线中注册的事件和回调函数过多，可能会影响性能。因此，要合理使用事件总线，避免不必要的事件监听和触发。
通过使用全局事件总线，你可以方便地实现微信小程序中不同组件和页面之间的通信。