觀察者模式（JavaScript實現）

介紹

觀察者模式中通常有兩個模型，一個觀察者（observer）和一個被觀察者（Observed）。從字面意思上理解，即被觀察者發生某些行爲或者變化時，會通知觀察者，觀察者根據此行爲或者變化做出處理。那麼具體如何操作呢，下面👇我們就用JavaScript代碼實現一個觀察者模式。

實現

觀察者模式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(ob) {
      this.observers.forEach(observer => {
         observer.update(ob);
      });
   }
}

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();

上述代碼的輸出結果爲

小玲提交了數學作業
小玲提交了語文作業
小明提交了數學作業
小明提交了語文作業
小李提交了數學作業
小李提交了語文作業

觀察者模式通常也被稱爲發佈/訂閱模式，這時候被觀察者作爲發佈者，觀察者被稱爲訂閱者。這個也很容易理解，我們以訂閱微信公衆號爲例。我可以訂閱很多個微信公衆號，這時候我是訂閱者，而微信公衆號爲發佈者，當有微信公衆號發佈新的文章，他會將相關的消息發佈到訂閱者我這裏，我接到消息就可以去閱讀了。

注意：上面關於發佈訂閱者模式的描述並不正確，下面進行更正。

觀察者模式

發佈訂閱者模式與觀察者模式類似，但是兩者並不完全相同，發佈訂閱者模式與觀察者相比多了一箇中間層的調度中心，用來對發佈者發佈的信息進行處理再發布到訂閱者，大致過程如下圖所示。

發佈訂閱模式

那麼問題來了，爲什麼要加一箇中間成的調度中心呢？通過我們上面👆對觀察者模式的實現，我們的observed類中是持有observer對象的，因此並沒有實現兩個類的完全解耦。通過添加中間層的調度中心類，我麼可以將訂閱者和發佈者完全解耦，兩者不再有直接的關聯，而是通過調度中心關聯起來。下面我們繼續實現一個發佈訂閱者模式。

//發佈者
class Pub{
   constructor(dispatcher){
       this.dispatcher=dispatcher;
       this.id=observed_ids++;
   }
   /**
    * @description: 發佈方法
    * @param {type} 通知類型
    */
   publish(type){
      this.dispatcher.publish(type,this)
   }
}
//訂閱者
class Subscriber{
    constructor(dispatcher){
      this.dispatcher=dispatcher;
      this.id=observer_ids++;
    }
    subscribe(type){
       this.dispatcher.subscribe(type,this);
    }
    doUpdate(type,arg){
        console.log("接受到消息"+arg)
    }
}
//調度中心
class Dispatcher{
   constructor(){
      this.dispatcher={};
   }
   subscribe(type,subscriber){
      if(!this.dispatcher[type]){
         this.dispatcher[type]=[];
      }  
      this.dispatcher[type].push(subscriber);
   }
   unsubscribe(type, subscriber) {
      let subscribers = this.dispatcher[type];
      if (!subscribers || !subscribers.length) return;
      this.dispatcher[type] = subscribers.filter(item =>{ 
         return item.id !== subscriber.id
      });
  }
  publish(type, args) {
      let subscribers = this.dispatcher[type];
      if (!subscribers || !subscribers.length) return;
      subscribers.forEach(subscriber=>{
         subscriber.doUpdate(type,args);
      });        
   }
}
class Reader extends Subscriber{
   constructor(name,dispatcher){
      super(dispatcher);
      this.name=name;
   }
    doUpdate(type,st){
      //   super.update(st);
        console.log(this.name+`閱讀了--${type}--公衆號的文章`);
    }
}
class WeiX extends Pub{
    constructor(name,dispatcher){
       super(dispatcher);
       this.name=name;
    }
    publishArticle(type){
       this.publish(type)
    }
}

let dispatcher=new Dispatcher();
//公衆號
let wei1=new WeiX("前端",dispatcher);
let wei2=new WeiX("數據庫",dispatcher);
//讀者們
let reader1=new Reader("小玲",dispatcher);
let reader2=new Reader("小明",dispatcher);
let reader3=new Reader("小李",dispatcher);
//讀者訂閱公衆號
reader1.subscribe("前端");
reader2.subscribe("數據庫");
reader3.subscribe("數據庫");
//公衆號發佈文章
wei1.publishArticle("前端");
wei1.publishArticle("數據庫");

上述代碼運行效果如下：

小玲閱讀了–前端–公衆號的文章
小明閱讀了–數據庫–公衆號的文章
小李閱讀了–數據庫–公衆號的文章

最後

以上是自己在閱讀了《設計模式之禪》相關章節後自己對觀察者模式的理解，如有不當之處還望指正！