《论 · 前端设计模式之一：观察者模式》

观察者模式: 定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

    // 素材:
    //     学生(被观察者):派大星,
        
    //     老板、老师、同事(三个观察者):蟹阿金、泡芙老师、章鱼哥

    class Observer{     //一:
        constructor(name , fun = () => {}){ //传参这里表示是默认的函数,带参数后会被替换掉
            this.name = name; //在这里添加观察者的名字
            this.fun = fun; //这里添加每个人的技能
        }
    }
    

    //直接在这里添加观察者 // 二:
    let XAJ = new Observer('蟹阿金', (name)=>{ console.log(name + '说:好了别说了派大星你被开了') })
    let PF = new Observer('泡芙老师', (name)=>{ console.log(name + '说:派大星上课迟到了') })
    let ZYG = new Observer('章鱼哥',(name)=>{ console.log(name + '说:不要把你的口水流在我的竖笛上') })
    //在这里打印你会发现 3个实例已经全部创建好

    //现在让我们添加被观察者
    class BeObserved{    //三:
        constructor(state){
            this.state = state;
            this.observers = []; //这里是为了把观察者们放进去
        }
        setState(NewState){ //改变初始状态的函数,
            //一旦派大星企图改变自己的状态,会依次触发不同观察者的技能
            this.state = NewState; //当派大星改变状态
            this.observers.forEach((item)=>{ //既然是依次触发,我们直接给个依次遍历
                item.fun(item.name) //这里的item是每个示例对象,对象身上我们已经安排了不同的事件
            }) 
        }
        addObserver(observer){
            this.observers = this.observers.filter((item)=>{
                return item !== observer 
            }) //去重
            this.observers.push(observer) //添加到 this.observers数组里面去
        }
    }

    
    //设定派大星一开始正在学习的初始状态
    let PDX = new BeObserved('正在学习');

    //现在我们给派大星加几个观察者,这里对应的是上面3个实例化出来的对象
    PDX.addObserver(XAJ)
    PDX.addObserver(PF)
    PDX.addObserver(ZYG)
    
    

    //写完收工,我们康康一下成果