设计模式——观察者模式

一、是什么

二、实现方式

三、使用场景

四、总结

一、是什么

老板(被观察者)需要做一件重要的事情，亲自告知所有下属(观察者）------哈哈哈，突然想到察言观色。

要点：下属是老板底下的成员；老板通知后，下属需要各自履行自己的职责。

二、实现方式

1.干活需要人（添加被观察者）： addObserver

2.老板通知干什么活：notify

3.干什么活（每个被观察者都需要实现）：update

4.员工离职：removeObserver

5.具体代码：

javascript 复制代码

/**
 * 观察者模式： 需要知道被观察者是谁；观察者和被观察者是多对一的关系，紧密耦合
 * 通过调用观察者的update方法来通知观察者
 * 
 */


/**
 * 被观察者(老板，任务)
 */
class Subject{
  observers=[];
  addObserver(observer){
   if(!this.observers.includes(observer)){
    this.observers.push(observer)
   }
  }
  removeObserver(observer){
    this.observers = this.observers.filter(o => o !== observer)
  }
  
  //通知：干活啦！！！
  notify(data){
    console.log('全体成员注意,',data)
    this.observers.forEach(observer => {
      if(typeof observer.update === 'function'){
        observer.update(data)
      }
    })
  }
}

/**
 * 观察者(下属，任务执行者1，任务执行者2)
 */
class Observer1{

  update(data){
    console.log(data,'Observer1 去买菜')
  }
}
class Observer2{
  update(data){
    console.log(data,'Observer2 去煮饭')
  }
}
const subject = new Subject()
const observer1 = new Observer1()
const observer2 = new Observer2()
subject.addObserver(observer1)
subject.addObserver(observer2)
subject.notify('12：00前要吃上饭！')

三、使用场景

1.从属关系（例如：老板和员工）

2.依赖关系（例如：人和食物, computed,watch）

四、总结

1.观察者模式：被观察者notify自己拥有的oberser，让observer干活

2.和发布订阅模式的区别：

a.观察者模式被观察者直接存储了观察者，可以直接调用观察者的方法------观察者被持有，观察者和被观察者必须同时存在，紧耦合；知道谁订阅了，代码可读性高，排查容易 ，具体的执行由观察者自己执行。

b.发布订阅模式发布者只存储了订阅者要干的活，不知道哪个实例订阅了------发布者只是中介，松耦合；不知道谁订阅了，错误排查比较困难，需要循环找到所有的回调并且执行

共同点 ：都必须在不用的时候手动调用removeObserver(cancelSubscribe),否则可能会造成内存泄漏！

希望对你有帮助！

如有错误,欢迎指正,谢谢！