重溫發佈訂閱

定義

觀察者模式定義了對象之間一對對多的依賴關係，當一個對象改變了狀態，它的全部依賴會被通知，而後自動更新。

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(); // 發佈：第一件事 第二件事
複製代碼