发布订阅模式的应用：解决react中复杂层级的数据交互

天蒙蒙亮

已于 2024-02-02 08:01:39 修改

阅读量550

点赞数 2

分类专栏： React 文章标签： react.js 前端前端框架

于 2024-02-02 08:00:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38719039/article/details/135985395

版权

以自定义事件为调度中心，创建一个EventCenter类，默认导出一个EventCenter实例

// 调度中心
class EventCenter {
    constructor() {
        // 创建一个事件中心，数据模型：{ event : [fn, fn] }
        this.eventCenter = {};
    }

    /**
     * 订阅事件
     * eventName {string} 订阅事件名称
     * backFn {Function} 收到通知的回调函数
     **/
    listen(eventName, backFn) {
        // 确定是否有订阅过该事件
        if (!this.eventCenter[eventName]) {
            this.eventCenter[eventName] = [];
        }
        // 控制backFn的唯一性，防止出现重复的backFn
        const backFnList = this.eventCenter[eventName];
        const hasFn = backFnList.some((fn) => fn === backFn);
        if (hasFn) {
            return;
        }
        backFnList.push(backFn);
    }
    
    /**
     * 取消订阅函数
     * eventName {string} 取消订阅的事件名称
     * backFn {Function} 取消订阅的回调函数
     **/
    unListen(eventName, backFn) {
        // 判断是否有该事件，及该事件是否有订