设计模式之观察者模式

文章来源：知了堂杨老师原创

通俗的来解释，对象A（观察者）对对象B（被观察者）的某种变化高度敏感，需要在B变化的时候做出反应。举个例子，比如你生病了要去打吊瓶，吊瓶就相当于被观察者，当吊瓶的水快打完的时候就要通知医生来拔针头，医生就相当于观察者，医生观察吊瓶的行为，当吊瓶的水变化时候通知医生。

在Vue中，当data里面的数据发生改变的时候，就要去通知对应的Watcher（渲染，watch，计算属性等）去做更新操作，data里面的数据就相当于带瓶，Watcher就相当于医生观察者，所以学会观察者模式很有必要。

下面我们通过代码来实现：

 class Subject { //被观察者数据---吊瓶

           

           constructor(name="知了哥"){

               this.state = 100;

               this.name = name;

               this.obs = [] //会有多个观察者

           }

        

          addObs(ob){

               this.obs.push(ob)

          }

 

          setState(state){ //改变状态的方法

             

              this.state = state

              //要去通知观察者去做动作，--- 拔针 

              this.obs.forEach((ob)=>{

                   ob.update(this) //让观察者去做更新

              })

          }

     }

 class Obeserver{ //观察者 -- 医生

         

         constructor(name){

             this.name = name;

             //在观察者里面是不是也可以记录 观察了哪些 数据（吊瓶）

         }

         update(subject){

               //医生也有可能观察多个 打针的人 

            if (!subject.state) {

                 console.log(`${this.name} 收到通知 :${subject.name} 的 带瓶打完啦！`)

             }else {

                 console.log(` ${this.name} 收到通知 :${subject.name} 的 带瓶量: ${subject.state}！`)

               }

        

         }

     }

var zhiliao = new Subject();

     var hushi = new Obeserver("护士");

     var yisheng = new Obeserver("医生")

     zhiliao.addObs(hushi) //把观察者放到被观察这的里面去

     zhiliao.addObs(yisheng)

 

     zhiliao.setState(50)

最后说一下双向观察，一个吊瓶可以被多个医生观察，同时一个医生也可以观察多个吊瓶的。 Vue的观察者模式就是双向的，也就是Dep里面存放多个Watcher，Watcher里面同时保存了观察者。