eventBus.js
在微信小程序中实现发布/订阅模式可以通过创建一个简单的事件管理器来实现。这个事件管理器将负责注册事件监听器、触发事件以及移除监听器。下面是一个具体的实现示例：
1. 创建事件管理器
首先，我们创建一个单独的文件 eventBus.js 来管理事件的发布和订阅。
// eventBus.js
class EventBus {constructor() {this.events = {};}// 订阅事件on(eventName, callback) {if (!this.events[eventName]) {this.events[eventName] = [];}this.events[eventName].push(callback);}// 触发事件emit(eventName, ...args) {const callbacks = this.events[eventName];if (callbacks) {callbacks.forEach((callback) => callback(...args));}}// 移除事件监听器off(eventName, callback) {if (this.events[eventName]) {this.events[eventName] = this.events[eventName].filter((cb) => cb !== callback);}}
}const eventBus = new EventBus();export default eventBus;
2. 在 app.js 中使用事件管理器
在 app.js 中，我们可以使用事件管理器来触发用户信息更新的事件。
// app.js
import eventBus from "./utils/eventBus";App({globalData: {userInfo: null,},onLaunch: function () {// 模拟异步请求用户信息wx.request({url: "your-api-url",method: "GET",success: (res) => {this.globalData.userInfo = res.data; // 更新全局数据eventBus.emit("userInfoUpdated", res.data); // 触发用户信息更新事件},fail: () => {// 错误处理},});},
});
3. 在页面中订阅事件
在页面中，我们可以订阅 userInfoUpdated 事件，并在事件触发时更新页面数据。
// pages/index/index.js
import eventBus from "../../utils/eventBus";Page({data: {userInfo: null,},onLoad: function () {const app = getApp();this.setData({ userInfo: app.globalData.userInfo }); // 初始化数据this.subscribeToUserInfoUpdate();},subscribeToUserInfoUpdate: function () {eventBus.on("userInfoUpdated", (userInfo) => {this.setData({ userInfo });});},onUnload: function () {// 移除事件监听器，防止内存泄漏eventBus.off("userInfoUpdated", this.handleUserInfoUpdate);},handleUserInfoUpdate: function (userInfo) {this.setData({ userInfo });},
});
解释
-
事件管理器 (
eventBus.js)：on(eventName, callback)：注册一个事件监听器。emit(eventName, ...args)：触发一个事件，所有注册的回调函数都会被执行。off(eventName, callback)：移除一个事件监听器。
-
app.js：- 在
onLaunch中发起请求获取用户信息。 - 当请求成功时，更新
globalData并触发userInfoUpdated事件。
- 在
-
页面 (
index.js)：- 在
onLoad中初始化用户信息。 - 订阅
userInfoUpdated事件，并在事件触发时更新页面数据。 - 在
onUnload中移除事件监听器，防止内存泄漏。
- 在
通过这种方式，你可以实现一个简单的发布/订阅模式，使得不同页面之间能够高效地通信和同步数据。
⚠️ 注意
务必记得在离开页面的时候，移出事件监听器，不然不只是什么性能问题，而是会触发所有未移出的回调方法。
可以参考下面这段伪代码：
// chat.js - 这是需要监听的页面逻辑/*** 生命周期函数--监听页面加载*/
onLoad() {// 订阅消息通知this.initEventBus();
},/*** 生命周期函数--监听页面卸载*/
onUnload() {// 取消订阅this.closeEventBus();
},/** 订阅消息通知 */
initEventBus() {// 监听聊天好友消息eventBus.on("chatMsgResponse", this.chatMsgResponseCb);
},/** 取消订阅 */
closeEventBus() {// 监听聊天好友消息eventBus.off("chatMsgResponse", this.chatMsgResponseCb);
},/** 监听事件的回调函数 */
chatMsgResponseCb(response) {console.log('[chatMsgResponseCb] 当前聊天中的好友消息 response:', response);// todo ...
},
)
