微信小程序中的全局事件总线,原生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 方法移除监听。
• 事件命名冲突：在使用事件总线时，要注意事件名称的唯一性，避免不同组件或页面使用相同的事件名称导致冲突。可以采用命名空间或前缀的方式来区分不同模块的事件。
• 性能问题：如果事件总线中注册的事件和回调函数过多，可能会影响性能。因此，要合理使用事件总线，避免不必要的事件监听和触发。

通过使用全局事件总线，你可以方便地实现微信小程序中不同组件和页面之间的通信。