觀察者模式（JavaScript實現）

時間  2021-08-12
標籤 javascript 前端 java 數據庫 設計模式 微信 markdown this spa 欄目 JavaScript 简体版
原文   原文鏈接

介紹

觀察者模式中一般有兩個模型，一個觀察者（observer）和一個被觀察者（Observed）。從字面意思上理解，即被觀察者發生某些行爲或者變化時，會通知觀察者，觀察者根據此行爲或者變化作出處理。那麼具體如何操做呢，接下來咱們就用JavaScript代碼實現一個下圖👇所示的觀察者模式。 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() {
      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變化java

觀察者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變化markdown

觀察者2-檢測到被觀察者0變化ui

擴展

咱們能夠不直接使用上面的兩個類，而是把觀察者和被觀察者這兩個類做爲基類供其餘類實現。this

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();
複製代碼

上述代碼的輸出結果爲spa

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

發佈訂閱者模式

觀察者模式一般也被稱爲發佈/訂閱模式，這時候被觀察者做爲發佈者，觀察者被稱爲訂閱者。這個也很容易理解，咱們以訂閱微信公衆號爲例。我能夠訂閱不少個微信公衆號，這時候我是訂閱者，而微信公衆號爲發佈者，當有微信公衆號發佈新的文章，公衆號平臺會通知我，接到通知就能夠去閱讀新文章了。

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

發佈訂閱者模式與觀察者模式相似，可是二者並不徹底相同，發佈訂閱者模式與觀察者相比多了一箇中間層的調度中心，用來對發佈者發佈的信息進行處理再發布到訂閱者，大體過程以下圖所示。

那麼問題來了，爲何要加一箇中間層的調度中心呢？經過上面👆對觀察者模式的實現，咱們的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(pub,subscriber){
      if(!this.dispatcher[pub.id]){
         this.dispatcher[pub.id]=[];
      }  
      this.dispatcher[pub.id].push(subscriber);
   }
   //退訂
   unsubscribe(pub, 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("數據庫");
複製代碼

運行結果以下：

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

經過上面的代碼咱們的確實現了一個簡單的發佈訂閱模式，可是咱們發現Pub類好像並沒必要要，由於這個類實際上只是單純的調用了調度中心Dispatcher的publish方法。所以咱們能夠對上述代碼進行簡化。

let ids=0;
let observer_ids=0;
//訂閱者
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={};
      this.id=ids++;
   }
   //訂閱
   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 Dispatcher{
    constructor(name){
       super();
       this.name=name;
    }
    publishArticle(type){
       this.publish(type)
    }
}
//微信公衆號平臺
let wx1=new WeiX();
//讀者們
let reader1=new Reader("小玲",wx1);
let reader2=new Reader("小明",wx1);
let reader3=new Reader("小李",wx1);
//讀者訂閱公衆號
reader1.subscribe("前端");
reader2.subscribe("數據庫");
reader3.subscribe("數據庫");
//公衆號發佈文章
wx1.publishArticle("前端");
wx1.publishArticle("數據庫");
複製代碼

最後

以上是本身在閱讀了《設計模式之禪》相關章節後本身對觀察者模式的理解，若有不當之處還望指正！
感謝fengwei對文中我對觀察者模式和發佈訂閱者模式描述錯誤的指正！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程