Javascript設計模式學習之Observer(觀察者)模式

DevWiki 發布于2019-08-19 17:50 / 2157人閱讀

摘要：一個對象維持一系列依賴于它觀察者的對象，將有關狀態的任何變更自動通知給它們。觀察者模式的實現模擬擁有的一系列依賴使用擴展對象模擬目標和在觀察者列表上添加刪除或通知觀察者

一個對象（subject)維持一系列依賴于它(觀察者）的對象，將有關狀態的任何變更自動通知給它們。

當一個目標需要告訴觀察者發生了什么有趣的事情,它會向觀察者廣播一個通知

當我們不再希望某個特定的觀察者獲取其注冊目標發出的改變通知時,該目標可以將它從觀察者列表中刪除。

Observer(觀察者)模式列表組件

Subject(目標): 維護一系列觀察者,方便添加或刪除觀察者

Observer(觀察者): 為那些在目標狀態發生改變時需獲得通知的對象提供一個更新接口

ConcreteSubject(具體目標):狀態發生改變時,向Observer發出通知,存儲ConcreteObserver的狀態

ConcreteObserver(具體觀察者):存儲一個指向ConcreteSubject的更新接口,實現Observer的更新接口,以使自身狀態與目標的狀態保持一致。

1. 觀察者模式的實現

1.1 模擬擁有的一系列依賴Observer

function ObserverList(){
   this.observerList = [];
}
ObserverList.prototype.Add = function(obj){
   return this.observerList.push(obj);
};
ObserverList.prototype.Remove = function(obj){
   return this.observerList.pop(obj);
};
ObserverList.prototype.Empty = function(){
   this.observerList = [];
};
ObserverList.prototype.Count = function(){
   return this.observerList.length;
};
ObserverList.prototype.Get = function(index){
   if(index > -1 && index < this.observerList.length){
      return this.observerList[index];
   }
};
ObserverList.prototype.Insert = function(obj,index){
   var pointer = -1;
   if(index === 0){
      this.observerList.unshift(obj);
      pointer = index;
   }else if(index === this.observerList.length){
      this.observerList.push(obj);
      pointer = index;
   }
   return pointer;
};
ObserverList.prototype.IndexOf = function(obj,startIndex){
   var i = startIndex,
       pointer = -1;
   while(i < this.observerList.length){
       if(this.observerList[i] === obj){
          pointer = i;
       }
       i++;
   }
   return pointer;
};
ObserverList.prototype.RemoveIndexAt = function(index){
   if(index === 0){
     this.observerList.shift();
   }else if(index === this.observerList.length - 1){
     this.observerList.pop();
   }
};
//使用extension擴展對象
function extend(obj,extension){
   for(var key in obj){
       extension[key] = obj[key];
   }
};
var liuyidi = {};
var observer = new ObserverList();
extend(observer,liuyidi);
console.log(liuyidi);

1.2 模擬目標(Subject)和在觀察者列表上添加、刪除或通知觀察者

function Subject(){
   this.observers = new ObserverList();
}

Subject.prototype.AddObserver = function(observer){
   this.observers.Add(observer);
};

Subject.prototype.RemoveObserver = function(observer){
   this.observers.RemoveIndexAt(this.observers.IndexOf(observer,0));
};

Subject.prototype.Notify = function(context){
   var observerCount = this.observers.Count();
   for(var i = 0; i < observerCount; i++){
      this.observers.Get(i).Update(context);
   }
};

GPU云服務器云服務器設計模式觀察者模式觀察者模式 php觀察者模式 ios觀察者模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78880.html

忘了再看設計模式-行為型

摘要：推文用設計模式解構三國是一種什么體驗行為型設計模式一策略模式工廠模式優化結構狀態模式隨著狀態改變而改變行為。推文狀態機與狀態模式責任鏈模式多個對象依次處理請求前者指定后者。代理模式代理針對一個對象，為了增加控制等中介雙方都是多個，為了解耦。策略模式選擇使用封裝好的一系列算法，可相互替換。類比：商店[Context]買完衣服買單[Stratege]（現金[Concrete Stra...

ShevaKuilin 2019-08-15 12:03 評論0 收藏0
vue源碼學習之簡單的數據監聽

摘要：先實現一個簡單的數據劫持。思路遍歷對象的每個屬性，為每個屬性掛上監聽函數即利用進行元編程考慮屬性的子屬性的監聽先上代碼你訪問了你設置了新的其中涉及的知識點如果屬性值還是對象，則遞歸繼續先實現一個簡單的數據劫持。思路：遍歷對象的每個屬性，為每個屬性掛上監聽函數（即利用Object.defineProperty進行元編程）；考慮屬性的子屬性的監聽；先上代碼： function ...

zone 2019-08-20 15:17 評論0 收藏0
一起學設計模式 - 觀察者模式

摘要：觀察者模式是一種使用頻率非常高的設計模式，無論是移動應用應用或者桌面應用，觀察者模式幾乎無處不在，它為實現對象之間的聯動提供了一套完整的解決方案，凡是涉及到一對一或者一對多的對象交互場景都可以使用觀察者模式。觀察者模式（Observer Pattern）屬于對象行為型模式的一種，定義對象之間的一種一對多依賴關系，使得每當一個對象狀態發生改變時，其相關依賴對象皆得到通知并被自動更新。 ...

cpupro 2019-08-16 10:56 評論0 收藏0
Javascript設計模式學習之Decorator(裝飾者)模式

摘要：抽象模式使用的裝飾者模式允許我們在運行時或者在隨后一個點上動態地將兩個或兩個以上的對象和它們的屬性一起擴展或合并為一個單一對象。定義三個對象目的是為了裝飾對象將的額外功能附加到上。抽象decorator模式使用jQuery的裝飾者模式 jQuery.extend()允許我們在運行時或者在隨后一個點上動態地將兩個或兩個以上的對象(和它們的屬性)一起擴展(或合并）為一個單一對象。定義...

Joyven 2019-08-19 17:50 評論0 收藏0
Javascript設計模式學習之Module(模塊)模式

摘要：實現模塊的幾種方法對象字面量表示法模式模式模式模塊對象字面量對象字面量型完整版配置對象基本方法根據配置信息輸出內容重寫當前的配置信息輸出結果值模式最初被定義為一種在傳統軟件工程中為類提供私有和公有封裝的方法。該模式返回一個對象。 javascript實現模塊的幾種方法: 對象字面量表示法 Module模式 AMD模式 CommonJS模式 ECMAScript Harmony模塊 ...

付永剛 2019-08-19 17:48 評論0 收藏0