JS设计模式:发布订阅模式

落日映苍穹つ 2022-11-06 12:50 208阅读 0赞

## 发布订阅模式 ##

// 发布订阅模式
    // 灵感来源于 DOM2级事件绑定
    // 可以给元素的事件行为，绑定多个不同的方法[事件池机制]
    // 当元素的事件行为触发时，会一次将事件池中的方法执行
    // 
    let eventBus = (function () { 
        let pond = [];
    
        // 往事件池中添加事件
        const on = function on(type, func) { 
            // 判断当前事件池中 对应type类型的事件是否存在
            !Array.isArray(pond[type]) ? pond[type] = [] : null;
            let ary = pond[type];
            // 如果func不是 function类型 不处理 这步操作放在通知事件池中事件执行的时候也可以
            // if (typeof func !== 'function') return;
            // 如果事件池中已经存在 不再重复添加
            if (ary.includes(func)) return;
            ary.push(func);
        }
    
        // 移除事件池中的某个事件
        const off = function off(type, func) { 
            // 判断当前事件池中 对应type类型的事件是否存在
            if (!Array.isArray(pond[type])) throw new TypeError(`${ type} 在自定义事件池中不存在！`);
            let ary = pond[type],
                i = 0,
                len = ary.length,
                item = null;
            for (; i < len; i++) { 
                item = ary[i];
                // 如果当前项存在数组中 移除
                if (item === func) { 
                    // 使用ary.splice(ary[i],1) 存在数组塌陷问题
                    // 所以将当前项赋值为null,在emit触发事件池中的事件执行时，将此项移除即可
                    ary[i] = null;
                    break;
                }
            }
        }
    
        // 通知事件池中的指定自定义事件类型的方法执行
        const emit = function emit(type, ...params) { 
            // 判断当前事件池中 对应type类型的事件是否存在
            let ary = pond[type],
                i = 0,
                item = null;
            if (!Array.isArray(pond[type])) throw new TypeError(`${ type} 在自定义事件池中不存在！`);
            for (; i < ary.length; i++) { 
                item = ary[i];
                if (typeof item === 'function') { 
                    item(...params);
                    continue;
                }
                // 事件池中不是函数类型的值都移除掉
                ary.splice(i, 1);
                i--;
            }
        }
    
        return { 
            on,
            off,
            emit
        }
    })()
    
    let fn1 = (param) => console.log(1, param);
    let fn2 = (param) => console.log(2, param);
    // 使用方法
    eventBus.on('A', fn1);
    eventBus.on('A', fn2);
    eventBus.on('B', fn1);
    eventBus.on('B', fn2);
    setTimeout(() => { 
        eventBus.emit('A', 'AAAAAA');
        eventBus.emit('B', 'BBBBBB');
    }, 2000);