简介

观察者模式是非常重要的模式，这个模式与“发布/订阅 模式”非常相似，
因为机制是一旦被观察的数据发生了改变，就会通知注册此数据的所有接口
，将更新的消息发送出去。这个模式可以实现一对多 或 一对一 或 多对多
本文暂时实现一对多的模式后续介绍多对多的模式

应用场景

-1-浏览器页面的所有的事件都是观察者模式实现的监听
-2-es6的promise的。then也是一个发布订阅模式，当状态改变时，可以通过自定义函数执行相应的操作
-3-nodejs的自定义事件也是一个观察者模式

原理

通过两个类之间加入观察者实现解耦，让用户的使用和观察者进行依赖，让主题和观察者进行依赖，主题
和观察者的关系为多对多的关系，即一个主题可以对应一个观察者，一个观察者，可以对应多个主题，每个主题可都具有一个保存观察者的数组，每个观察者也可以具有保存多个主题的钩子

UML时序图

观察者模式时序图.png

UML类图

观察者模式类图.png

原则

主题和观察者分离，不是主动触发，而是被动监听，两者相互解耦，符合开放封闭原则

实现

实现主题

class Subject{
   constructor(){
    this.data=0;
    this.observers=[];//初始化订阅者数组
  } 
  //获取数据
  getData(){ 
    return this.data;
  }
  //修改数据
  setData(data){
    this.data=data;
    this.notifyObserver();//触发通知函数
  }
  //订阅函数
  subScription(observer){
    this.observers.push(observer);
  }
  //通知绑定了此数据的所有观察者
  notifyOberserver(){
    this.observers.forEach(item=>{
      item.uodata();//调用对象的updata函数，实现通知
    });
  }
}

实现观察者

class Obersver{
  constructor(name,subject){//观察的名称，和观察者对象
    this.name=name;
    this.subject=subject;
    this.subject.subScription(this);//添加观察者对象
  }
  //发布接收函数
  updata(){
    let data=this.subject.getData();
    console.log(this.name+"收到了"+data);
    return data;
  }
}

test

const subject=new Suvject();
const obersver1=new Oberser("观察者1",subject);
const obersver2=new Oberser("观察者2",subject);
const obersver3=new Oberser("观察者3",subject);
//数据更新
subject.setData(2000);

结果为

观察者1收到了2000
观察者2收到了2000
观察者3收到了2000