重温发布订阅

最新推荐文章于 2023-01-05 23:38:22 发布

weixin_33842328

最新推荐文章于 2023-01-05 23:38:22 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c8b923c5188257ed47b2030

本文深入讲解了观察者模式的定义及实现方式，通过一个具体的代码示例，展示了如何使用观察者模式来创建对象间的一对多依赖关系。当一个对象的状态发生变化时，所有依赖的对象会自动收到通知并进行更新。

定义

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

订阅：将所有的事件统一放入事件池中（this.planList）中
发布：时机到来执行$plan.fire()，把所有的方法都执行
取消订阅：$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(); // 发布：第一件事 第二件事
复制代码