JS 設計模式十三（觀察者模式）

shleyZ 發布于2019-08-19 18:24 / 639人閱讀

摘要：觀察者模式對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并被自動更新。具體主題角色在具體主題內部狀態改變時，給所有登記過的觀察者發出通知。

觀察者模式

對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并被自動更新。

觀察者要素

1.抽象主題(Subject)角色：把所有對觀察者對象的引用保存在一個集合中，每個抽象主題角色都可以有任意數量的觀察者。抽象主題提供一個接口，可以增加和刪除觀察者角色。一般用一個抽象類和接口來實現。

2.抽象觀察者(Observer)角色：為所有具體的觀察者定義一個接口，在得到主題的通知時更新自己。

3.具體主題(ConcreteSubject)角色：在具體主題內部狀態改變時，給所有登記過的觀察者發出通知。具體主題角色通常用一個子類實現。

4.具體觀察者(ConcreteObserver)角色：該角色實現抽象觀察者角色所要求的更新接口，以便使本身的狀態與主題的狀態相協調。通常用一個子類實現。如果需要，具體觀察者角色可以保存一個指向具體主題角色的引用。

例子

為了生產的安全，你決定為你的工廠安裝火警報警器，現在你需要為這個報警器寫個控制軟件。

// 觀察者模式

var DP = require("./DesignPattern.js");

function Factory() {
  DP.Interface(this, ["attach", "detach", "nofityObserver", "fire"])
  //添加火災報警器
  //移除火災報警器
  //通知報警器
  //發生火災
}
function FireAlarm(name) {
  var _name=name
  this.rang=function(){
    console.log(_name+"：發生工廠火災了,鳴笛");
  }
}
function PorscheFactory() {
  this.__proto__ = new Factory();
  var _alarms = [];
  this.attach = function (alarm) {
    _alarms.push(alarm);
  }
  this.detach = function (alarm) {
    _alarms.splice(_alarms.indexOf(alarm),1);
  }
  this.nofityObserver = function () {
    _alarms.forEach(function(alarm){
      alarm.rang()
    })
  }
  this.fire=function(){
    console.log("工廠著火了");
    this.nofityObserver();
  }
}

var f=new PorscheFactory();
var fireAlarm1=new FireAlarm("門衛報警器");
var fireAlarm2=new FireAlarm("消防局報警器");
var fireAlarm3=new FireAlarm("門衛報警器");
f.attach(fireAlarm1);
f.attach(fireAlarm2);
f.attach(fireAlarm3);
f.fire();
console.log("--------------------------------------");
f.detach(fireAlarm3);
f.fire();

觀察者模式優點：

1.觀察者和被觀察者是抽象耦合的。
2.建立一套觸發機制。

觀察者模式缺點：

1.如果一個被觀察者對象有很多的直接和間接的觀察者的話，將所有的觀察者都通知到會花費很多時間。
2.如果在觀察者和觀察目標之間有循環依賴的話，觀察目標會觸發它們之間進行循環調用，可能導致系統崩潰。
3.觀察者模式沒有相應的機制讓觀察者知道所觀察的目標對象是怎么發生變化的，而僅僅只是知道觀察目標發生了變化。

適用場景：

1.當一個抽象模型有兩個方面, 其中一個方面依賴于另一方面。將這二者封裝在獨立的對象中以使它們可以各自獨立地改變和復用。
2.當對一個對象的改變需要同時改變其它對象, 而不知道具體有多少對象有待改變。
3.當一個對象必須通知其它對象，而它又不能假定其它對象是誰。換言之, 你不希望這些對象是緊密耦合的。

云服務器 GPU云服務器 js觀察者模式視頻設計模式觀察者模式觀察者模式 php觀察者模式

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

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

開篇：二十三種設計模式的通俗理解

摘要：里氏替換原則里氏代換原則面向對象設計的基本原則之一。里氏代換原則中說，任何基類可以出現的地方，子類一定可以出現。里氏代換原則是對開閉原則的補充。而基類與子類的繼承關系就是抽象化的具體實現，所以里氏代換原則是對實現抽象化的具體步驟的規范。 showImg(https://segmentfault.com/img/bVbuXAu?w=640&h=361); 本文為本次系列文章的第一篇，接下...

morgan 2019-08-16 18:33 評論0 收藏0
忘了再看設計模式-行為型

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

ShevaKuilin 2019-08-15 12:03 評論0 收藏0
前端面試題小集

摘要：一一個頁面上兩個左右鋪滿整個瀏覽器，要保證左邊的一直為，右邊的跟隨瀏覽器大小變化比如瀏覽器為，右邊為，瀏覽器為，右邊為，請寫出大概的代碼。如果需要使用，最好是通過動態給添加屬性值，這樣可以繞開以上兩個問題。一、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化（比如瀏覽器為500，右邊div為400，瀏覽器為900，右邊div為...

bawn 2019-08-20 14:15 評論0 收藏0
JS基礎入門篇（三十三）—正則表達式

摘要：舉例一使用這個正則，打印結果為使用這個正則，打印結果為舉例二打印結果如下過濾標簽你好美麗的上海想轉化成你好，美麗的上海如果后面加，就會進入非貪婪模式。如果后面不加，就會進入貪婪模式，結果為上海。你好美麗的上海。 1.創建一個正則表達式方法一：使用一個正則表達式字面量，其由包含在斜杠之間的模式組成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二：調用Re...

caspar 2019-08-22 18:18 評論0 收藏0
JS基礎入門篇（三十三）—正則表達式

摘要：舉例一使用這個正則，打印結果為使用這個正則，打印結果為舉例二打印結果如下過濾標簽你好美麗的上海想轉化成你好，美麗的上海如果后面加，就會進入非貪婪模式。如果后面不加，就會進入貪婪模式，結果為上海。你好美麗的上海。 1.創建一個正則表達式方法一：使用一個正則表達式字面量，其由包含在斜杠之間的模式組成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二：調用Re...

hot_pot_Leo 2019-08-02 10:47 評論0 收藏0