自己封装订阅发布库

//基于es6自己封装发布订阅库 jQ中的发布订阅没有去重的功能
let _subscribe = function(){
    //SUB :发布订阅类
    class Sub{
        constructor(){
            //创建一个事件池,用来存储后期需要执行的方法
            this.$pond = [];
        }
        //给事件池追加方法(做重复处理)
        add(func){
            let flag = this.$pond.some(item=>{
                return item === func;
            });
            !flag ? this.$pond.push(func) : null;
        }
        //从事件池中移除方法
        remove(func){
            let $pond = this.$pond;
            for(let i = 0;i < $pond.length; i++){
                let item  = $pond[i];
                if(item === func){
                    //移除(顺序不变的情况下基本上只能用splice了,但是不能这样写,这样写会导致数组塌陷问题,我们不能真正移除,只能把当前项赋值为null.
                    // $pond.splice(i,1);
                    $pond[i] = null;
                    break;
                }
            }
        }
        //通知事件池中的方法,按照顺序执行
        fire(...args){
            let $pond =this.$pond;
            for(let i = 0; i< $pond.length;i++){
                let item = $pond[i];
                if(typeof item !== 'function'){
                    //此时再删除
                    $pond.splice(i,1);
                    i--;
                    continue;
                }
                item.call(this, ...args)
            }
        }
    }
    //暴露给外面用
    return function subscribe(){
        return new Sub();
    }
}();

//使用 let s1 = _subscribe();
//事件池中移出事件导致的数组塌陷问题:fire的时候通知事件执行时,拿循环的索引i去对应数组的下标,当有事件被移除时,数组发生变化,但是去对应的索引i继续去对应,会导致事件中某几项被跳过.
//解决:移除用假装移除,把当前项改成null,这样索引还是不变.真正移除在fire的时候去进行,此时fire时需检查执行的是否为function

标签：订阅,封装,item,发布,let,事件,func,移除,pond
来源： https://www.cnblogs.com/Ashton-ldb/p/11663410.html