重温发布订阅

定义

观察者模式定义了对象之间一对对多的依赖关系，当一个对象改变了状态，它的全部依赖会被通知，而后自动更新。

1. 订阅：将全部的事件统一放入事件池中（this.planList）中
2. 发布：时机到来执行$plan.fire()，把全部的方法都执行
3. 取消订阅：$plan.remove(fn3)，取消就是在事件池中找到这个方法，而后删除。

~(function() {
    let each = (ary,callbacks) => {
        for(var i = 0; i< ary.length; i++) {
            let reault = callbacks && callbacks(ary[i],i);
            if(reault === false) break;
            if(reault === 'DEL') i--;
        }
    }
    
    class Plan {
        constructor() {
            this.planList = [];
        }
        // 添加方法
        add(fn) {
            let planList = this.planList,
            flag = true;
            each(planList,(ary, index) => {
                if(fn === ary) {
                    flag = false;
                    return false;
                }
            })
            flag && planList.push(fn);
        }
        // 删除方法
        remove(fn) {
            let planList = this.planList;
            each(planList, (item, index) => {
                if(fn === item) {
                    planList[index] = null;
                    return false;
                }
            })
        }
        // 触发方法
        fire(...arg) {
            let planList = this.planList;
            each(planList, (item, index) => {
                if(item === null) {
                    planList.splice(index,1)
                    return 'DEL';
                }
                item(...arg)
            })
        }

        static CallBacks () {
            return new Plan();
        }
    }
    window.$ = window.Plan = Plan;
})()

let $plan = $.CallBacks();
fn1 = () => {
    console.log('第一件事')
}
$plan.add(fn1); // 订阅：第一件事物
fn2 = () => {
    console.log('第二件事')
}
$plan.add(fn2); // 订阅：第二件事物
fn3 = () => {
    console.log('第三件事')
}
$plan.add(fn3); // 订阅：第三件事物
$plan.remove(fn3); // 删除第三件事物
$plan.fire(); // 发布：第一件事 第二件事
复制代码