编写微信小程序全局事件总线代码

在微信小程序中使用基于 PubSub（发布 - 订阅模式） 的全局事件总线，能够让不同页面或组件之间更方便地进行通信。以下为你详细介绍如何实现：

实现思路

• 发布 - 订阅模式：这是一种设计模式，它包含一个事件中心（事件总线），订阅者可以向事件中心订阅特定的事件，而发布者可以向事件中心发布这些事件。当事件被发布时，事件中心会通知所有订阅了该事件的订阅者。
• 全局事件总线：在微信小程序里，我们可以创建一个全局的事件总线对象，让各个页面和组件都能访问，从而实现跨页面和组件的通信。

实现步骤

1. 封装 PubSub 工具类

在小程序项目里创建一个新的 JavaScript 文件，比如 pubsub.js，用来实现 PubSub 功能。下面是一个简单的实现示例：

// pubsub.js
class PubSub {
    constructor() {
        // 用于存储事件及其对应的回调函数列表
        this.events = {};
    }

    // 订阅事件
    subscribe(eventName, callback) {
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }
        // 将回调函数添加到对应事件的回调列表中
        this.events[eventName].push(callback);
        // 返回一个取消订阅的函数
        return () => {
            this.events[eventName] = this.events[eventName].filter(cb => cb!== callback);
        };
    }

    // 发布事件
    publish(eventName, ...args) {
        if (this.events[eventName]) {
            // 遍历事件对应的回调函数列表并执行
            this.events[eventName].forEach(callback => {
                callback(...args);
            });
        }
    }

    // 取消订阅所有事件
    unsubscribeAll() {
        this.events = {};
    }
}

// 创建一个全局的 PubSub 实例
const pubsub = new PubSub();
export default pubsub;

2. 在页面或组件中使用 PubSub

• 订阅事件：在需要接收消息的页面或组件中订阅特定事件。

// 在某个页面的 js 文件中
import pubsub from './pubsub.js';

Page({
    data: {
        message: ''
    },
    onLoad() {
        // 订阅名为 'newMessage' 的事件
        this.unsubscribe = pubsub.subscribe('newMessage', (msg) => {
            this.setData({
                message: msg
            });
        });
    },
    onUnload() {
        // 页面卸载时取消订阅，防止内存泄漏
        if (this.unsubscribe) {
            this.unsubscribe();
        }
    }
});

• 发布事件：在需要发送消息的页面或组件中发布事件。

// 在另一个页面的 js 文件中
import pubsub from './pubsub.js';

Page({
    onLoad() {
        // 发布名为 'newMessage' 的事件，并传递消息内容
        pubsub.publish('newMessage', '这是一条新消息');
    }
});

优势与注意事项

• 优势：
  • 松耦合：发布者和订阅者不需要直接相互了解，通过事件总线进行通信，降低了组件之间的耦合度。
  • 可扩展性：可以方便地添加新的事件和订阅者，易于扩展功能。
• 注意事项：
  • 内存管理：在页面或组件销毁时，要及时取消订阅，避免内存泄漏。
  • 事件命名：要保证事件名称的唯一性，防止不同模块使用相同名称的事件导致冲突。

通过上述步骤，你就能在微信小程序里基于 PubSub 模式实现全局事件总线，实现不同页面和组件之间的消息传递。