設計模式之觀察者模式

kamushin233 發布于2019-08-26 12:12 / 1675人閱讀

摘要：一什么是觀察者模式觀察者模式，引用維基百科的說法，一個目標對象管理所有相依與它的觀察者對象，并在它本身狀態改變時發生通知。四觀察者模式的用途觀察者模式主要用于解耦合，一個對象變了，可以通知多個對象，而不是在回調里來處理各種情況。

一、什么是觀察者模式

觀察者模式，引用維基百科的說法，一個目標對象管理所有相依與它的觀察者對象，并在它本身狀態改變時發生通知。這通常通過調用各觀察者所提供的方法來實現。在前端應用的范圍還挺多，最常見的事件監聽，addEventListener，我們在一個元素上注冊了各類事件，而當對象發生相應改變時，通過調用綁定的事件告訴觀察者。就相當于在一個對象上綁定了各類觀察者。

舉個與前端不相關的例子，小偷警察的故事。小偷數量就是我們這里的目標對象，有三個警察負責看管（觀察者），當小偷數量大于3了，一個警察要去報告上級，一個警察要去警告市民引起重視，一個去和小偷談話。在程序里通過調用這三個警察的方法來相當于告訴這三個警察小偷數量大于3了。

二、用代碼看觀察者模式思路

/*
    被觀察類
    addObserver()方法把觀察者對象添加到觀察者對象列表中
    setChange()方法用來設置一個內部標志位注明數據發生了變化
    notifyObservers()方法會去調用觀察者對象列表中所有的Observer的update()方法，通知它們數據發生了變化。
 */
function Observable(){
    this.observerArray = new Set();
    this.updateFlage = false;
}

Observable.prototype.addObserver = function(data){
    this.observerArray.add(data);
}

Observable.prototype.setChange = function(){
    this.updateFlage = true;
}

Observable.prototype.notifyObservers = function(data){
    if(this.updateFlage){
        for(let item of this.observerArray){
            item.update(data)
        }
    }
    this.updateFlage = false
}

/*
    觀察者類
    實現Observer接口的唯一方法update
 */
function Observer(){
    this.update = function(){ }
}

皮一下，這其實是看了Java里的觀察者模式思想，我用Js實現了一下。因為我看這個實現思路是更能體會到觀察者模式的。這里有兩個類，一個是被觀察類，實現了上述三個方法，一個是觀察者類。每個觀察者都有update方法，當被觀察者改變了，執行相應的觀察者的update方法來通知觀察者被觀察者改變了。下面看示例：

function thief(){
    var data = 0;
    Observable.call(this); 
    this.setData = function(param){
        data = param;
        if(data > 3){
            this.setChange();
        }
        this.notifyObservers();
    }
    this.getData = function(){
        return data
    }
}
thief.prototype = new Observable();
thief.prototype.constructor = thief;

let thief1 = new thief();
let police1 = new Observer;
let police2 = new Observer;

thief1.addObserver(police1)
thief1.addObserver(police2)

police1.update = function(){
    console.log("警察1接收到現在有"+thief1.getData()+"個小偷")
}

police2.update = function(){
    console.log("警察2接收到現在有"+thief1.getData()+"個小偷")
}

thief1.setData(1)    //無輸出
thief1.setData(4)    //警察1接收到現在有4個小偷 警察2接收到現在有4個小偷

這個例子小偷繼承了被觀察者，當小偷內部數據大于3的時候，就通知觀察各個警察引起重視。因為是參照Java的思想來的，所以看到實現是通過將小偷繼承被觀察者類，警察繼承觀察者類。這個結構其實用java來寫很清晰，觀察者的模式也體現的很清晰，能幫助我們很好的理解觀察者模式，值得借鑒。比起前端有些寫法在被觀察中存入對應的觀察者，和觀察者的回調，這種寫法其實更分離。

三、前端代碼寫觀察者模式

前端的寫法跟Java里的實現類是有差別的，看代碼：

/**
 * 實現一個類
 * on():存入被觀察者
 * fire():手動觸發某個觀察者，可帶參數
 * delete():刪除指定觀察者
 * update():被觀察者更新了，執行觀察者回調通知觀察者
 * one():某個觀察者只執行一次
 * 可鏈式調用
 */
function Emiter(){
    this.storage = new Map();
}
Emiter.prototype.on = function(key,callback){
    this.storage.set(key,callback);
    return this
}
Emiter.prototype.fire = function(key,data){
    this.storage.has(key) ? this.storage.get(key)(data) :  console.log("請先注冊對應的事件");
    return this
}
Emiter.prototype.delete = function(key){
    this.storage.has(key) ? this.storage.delete(key) :  console.log("請先注冊對應的事件");
    return this
}
Emiter.prototype.update = function(data){
    for (let [key, value] of this.storage) {
        value(data);
      }
    return this
}
Emiter.prototype.one = function(key,data){
    if(this.storage.has(key)){
        this.storage.get(key)(data);
        this.storage.delete(key);
    }else{
        console.log("請先注冊對應的事件")
    }
    return this
   
}

//示例
let emiter = new Emiter();
emiter.on("view1",function(data){
    console.log("view1收到的數據"+data)
})

emiter.on("event",function(){
    console.log("emiter")
}).on("click",function(){
    console.log("click啦")
})

emiter.update([1,2,3]) //view1收到的數據1,2,3 emiter click啦

前端拋開一些復雜規范性，可以直接把觀察者和觀察者的回調保存在被觀察者里，當被觀察者更新了，執行所有觀察者的回調。這里之所以有one fire 等方法提供，主要是考慮前端addEventListner也是采用觀察者模式，所以一起提供了。只不過更相當于一對一模式，沒有對應的update，更新所有觀察者的操作。我們這里探討的設計模式應該是on update delete為主線。

四、觀察者模式的用途

觀察者模式主要用于解耦合，一個對象變了，可以通知多個對象，而不是在回調里來處理各種情況。一個場景有個模塊獲取了數據，其他多個view層都需要用到這個數據。我們的做法可能是會在獲取數據后的模塊回調里進行各個view層的處理，那如果后續某個模塊的相應業務變了，我們可能還得回來改這個回調函數。那如果通過觀察者模式，我們可以優化為，每個模塊完全分離，當數據回來時告知每個模塊即可。以后模塊要改變獲取數據后的處理，各個模塊自己去更新。

我現在在想，event對象，是不是內部實現，是在dom改變時傳的參數，而在調用相關事件時能拿到這個回調的參數。

之前看文檔，Vue里數據變了，如何更新view，用的也是觀察者模式，只不過不是這種實現代碼，后續更新。

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

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

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

JS設計模式之Obeserver（觀察者）模式、Publish/Subscribe（發布/訂閱）模式

摘要：觀察者模式定義設計模式中對的定義一個對象稱為維持一系列依賴于它觀察者的對象，將有關狀態的任何變更自動通知給它們。如圖模式比較觀察者模式則多了一個類似于話題調度中心的流程，發布者和訂閱者解耦。 Obeserver（觀察者）模式定義《js設計模式》中對Observer的定義：一個對象（稱為subject）維持一系列依賴于它（觀察者）的對象，將有關狀態的任何變更自動通知給它們。《設計模...

荊兆峰 2019-08-26 13:37 評論0 收藏0
設計模式之觀察者設計模式

摘要：關鍵概念理解觀察者設計模式中主要區分兩個概念觀察者指觀察者對象，也就是消息的訂閱者被觀察者指要觀察的目標對象，也就是消息的發布者。原文首發于微信公眾號：jzman-blog，歡迎關注交流！最近補一下設計模式相關的知識，關于觀察者設計模式主要從以下幾個方面來學習,具體如下：什么是觀察者設計模式關鍵概念理解通知觀察者的方式觀察者模式的實現觀察者模式的優缺點使用場景下面...

NotFound 2019-08-16 17:11 評論0 收藏0
Java設計模式之觀察者模式

摘要：觀察者模式的使用場景比如你微博關注了一個人，那么這個人發布的微博就會推送到你這。 Java設計模式之觀察者模式一直想寫一篇學習觀察者模式的總結沒有契機，今天學習阻塞隊列的原理時候看到在實現生產者消費者的時候用到了通知模式，就是所謂的觀察者模式，正好順便整理一下。 1. 簡介觀察者模式定義對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并被自動更...

haitiancoder 2019-08-15 18:06 評論0 收藏0
PHP設計模式之觀察者模式

摘要：概念觀察者模式屬于行為模式，是定義對象間的一種一對多的依賴關系，以便當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并自動刷新。觀察者模式符合接口隔離原則，實現了對象之間的松散耦合。概念觀察者模式屬于行為模式，是定義對象間的一種一對多的依賴關系，以便當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并自動刷新。當一個對象狀態發生改變后，會影響到其他幾個對象的改變，這...

phpmatt 2019-06-27 14:50 評論0 收藏0
php面向對象設計模式 之 觀察者模式

摘要：最近在學的設計模式，看到了觀察者模式，在此寫下一點理解問題假如一個小販，他把產品的價格提升了，不同的消費者會對此產生不同的反應。最近在學php 的設計模式，看到了觀察者模式，在此寫下一點理解：問題：假如一個小販，他把產品的價格提升了，不同的消費者會對此產生不同的反應。一般的編程模式無非是獲取提升的價格，然后獲取所有的消費者，再循環每個消費者，不同的消費者根據價格漲幅...

genedna 2019-06-27 10:55 評論0 收藏0
Python版設計模式之監聽者模式

摘要：監聽模式又名觀察者模式發布訂閱模式源監聽器模式，模式的核心是設計時要區分誰是被觀察者，誰是觀察者。監聽模式又名觀察者模式、發布/訂閱模式、源-監聽器（Source/Listener）模式，模式的核心是：設計時要區分誰是被觀察者，誰是觀察者。被觀察者至少有三個方法，添加觀察者、刪除觀察者、監聽目標變化并通知觀察者；觀察者這至少包含一個方法，當接收到被觀察者的通知時，做出相應的處理（即...

hlcfan 2019-07-31 10:03 評論0 收藏0