标签：function 订阅 console log 代码 模式 add let pond

let _subscribe = function() {
    class Sub {
        constructor() {
            // 创建一个事件池，用来存储后期需要执行的方法
            this.$pond = [];
        }

        //向事件池中追加方法（重复处理）
        add(func) {
            let flag = this.$pond.some(item => {
                return item === func;
            });
            if(!flag) this.$pond.push(func);
        }

        //从事件池中移除方法
        remove(func) {
            let $pond = this.$pond;
            for(let i=0; i<$pond.length; i++) {
                let item = $pond[i];
                if(item === func) {
                    //移除，但是不能这样写，这样会导致数组塌陷问题，原因看下图
                    //移除不能真移除，因为移除后就break了，肯定会发生数组塌陷问题，只能把当前项赋值为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 pond = _subscribe();
document.querySelector('.submit').onclick = function(e) {
    pond.fire(e);
}
let fn1 = function() {
	console.log(1);
}
let fn2 = function() {
    console.log(2);
    pond.remove(fn1);
}
pond.add(fn1);
pond.add(fn1);
pond.add(fn2);
let fn3 = function() {
    console.log(3);
}
let fn4 = function(e) {
    console.log(4, e);
}
pond.add(fn3);
pond.add(fn4);

标签：function,订阅,console,log,代码,模式,add,let,pond
来源： https://www.cnblogs.com/Hhhighway/p/14487431.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。