丁鹿学堂：前端异步解决方案：观察者模式小结

js异步解决方案之观察者模式

在观察者模式里面就是被观察者，它只需要维护一套观察者的集合，将有关状态的任何变更，自动通知给他们的watcher（观察者），这个设计是松耦合的。 观察者模式和发布订阅模式还是不一样的，很多人会把他们混为一谈。 在发布订阅模式中，发布者和订阅者之间没有关系，他们通过消息中心去发布和订阅。 上次分享了发布订阅模式，简单来说就是有一个对象，往里面push一个类型a和一个回调，就是订阅a。 当判断有a的时候就去执行回调，就是发布a。 而观察者模式中，发布者和订阅者是互相联系的。

代码实现观察者模式

当对象之间存在一对多的依赖关系时，其中一个对象的状态发生改变，所有依赖它的对象都会收到通知，这就是观察者模式 观察者模式中有两个类，一个是目标对象，一个是观察者。 目标对象： s1：维护观察者列表
s1:定义添加观察者的方法 s3:当自身发生变化后,通知每个观察者调用update方法

class Subject {
  constructor() {
      this.observerList = []
  }
  addObserver(observer) {
      this.observerList.push(observer);
  }
  notify(task) {
      this.observerList.forEach(observer => observer.update(task))
  }
}

观察者： 定义自己的update方法，给目标对象调用。

class Observer {
  constructor(name) {
      this.name = name;
  }
  update(msg) {
     console.log(msg +'任务来了，执行！---' + this.name)   
  }
}

一个完整的建议实现

class Observer {
  constructor(name) {
      this.name = name;
  }
  update(msg) {
     console.log(msg +'任务来了，执行！---' + this.name)   
  }
}

class Subject {
  constructor() {
      this.observerList = []
  }
  addObserver(observer) {
      this.observerList.push(observer);
  }
  notify(msg) {
      this.observerList.forEach(observer => observer.update(msg))
  }
}

const subject = new Subject();
const stu1 = new Observer("zhangsan");
const stu2 = new Observer("lisi");

subject.addObserver(stu1);
subject.addObserver(stu2);
let msg = '任务：开始学习观察者模式'
subject.notify(msg);