观察者模式（Observer模式）

观察者模式JS实现

let observer_ids=0;
let observed_ids=0;
//观察者类
class Observer {
   constructor() {
      this.id = observer_ids++;
   }
   //观测到变化后的处理
   update(ob){
      console.log("观察者" + this.id + `-检测到被观察者${ob.id}变化`);
   }
}
//被观察者列
class Observed {
   constructor() {
      this.observers = [];
      this.id=observed_ids++;
   }
   //添加观察者
   addObserver(observer) {
      this.observers.push(observer);
   }
   //删除观察者
   removeObserver(observer) {
      this.observers = this.observers.filter(o => {
         return o.id != observer.id;
      });
   }
   //通知所有的观察者
   notify() {
      this.observers.forEach(observer => {
         observer.update(this);
      });
   }
}

let mObserved=new Observed();
let mObserver1=new Observer();
let mObserver2=new Observer();

mObserved.addObserver(mObserver1);
mObserved.addObserver(mObserver2);

mObserved.notify();

输出结果为

观察者0-检测到被观察者0变化

观察者1-检测到被观察者0变化

我们把执行代码修改，添加删除观察者的代码，

let mObserved=new Observed();
let mObserver1=new Observer();
let mObserver2=new Observer();
let mObserver3=new Observer();


mObserved.addObserver(mObserver1);
mObserved.addObserver(mObserver2);
mObserved.addObserver(mObserver3);
mObserved.removeObserver(mObserver2);

mObserved.notify();

输出结果为

观察者0-检测到被观察者0变化

观察者2-检测到被观察者0变化

扩展

我们可以不直接使用上面的两个类，而是把观察者和被观察者这两个类作为基类供其他类实现。

class Teacher extends Observer{
   constructor(name){
      super();
      this.name=name;
   }
    update(st){
      //   super.update(st);
        console.log(st.name+`提交了${this.name}作业`);
    }
}
class Student extends Observed{
    constructor(name){
       super();
       this.name=name;
    }
    submitHomeWork(){
       this.notify(this)
    }
}
let teacher1=new Teacher("数学");
let teacher2=new Teacher("语文");
let stu1=new Student("小玲");
let stu2=new Student("小明");
let stu3=new Student("小李");
stu1.addObserver(teacher1);
stu1.addObserver(teacher2);
stu2.addObserver(teacher1);
stu2.addObserver(teacher2);
stu3.addObserver(teacher1);
stu3.addObserver(teacher2);

stu1.submitHomeWork();
stu2.submitHomeWork();
stu3.submitHomeWork();

上述代码的输出结果为

小玲提交了数学作业
小玲提交了语文作业
小明提交了数学作业
小明提交了语文作业
小李提交了数学作业
小李提交了语文作业