js 觀察者

missonce 發(fā)布于2019-08-26 13:57 / 2296人閱讀

摘要：觀察者模式機動建立一種對象與對象之間的依賴關(guān)系，一個對象發(fā)生改變時將自動通知其他對象，其他對象將相應(yīng)做出反應(yīng)。

觀察者模式模式簡介

觀察者模式（又被稱為發(fā)布-訂閱（Publish/Subscribe）模式，屬于行為型模式的一種，它定義了一種一對多的依賴關(guān)系，讓多個觀察者對象同時監(jiān)聽某一個主題對象。這個主題對象在狀態(tài)變化時，會通知所有的觀察者對象，使他們能夠自動更新自己。

觀察者模式機動

建立一種對象與對象之間的依賴關(guān)系，一個對象發(fā)生改變時將自動通知其他對象，其他對象將相應(yīng)做出反應(yīng)。在此，發(fā)生改變的對象稱為觀察目標，而被通知的對象稱為觀察者，一個觀察目標可以對應(yīng)多個觀察者，而且這些觀察者之間沒有相互聯(lián)系，可以根據(jù)需要增加和刪除觀察者，使得系統(tǒng)更易于擴展，這就是觀察者模式的模式動機。

生活中的觀察者模式

現(xiàn)在年輕人都喜歡玩手機，比如我自己我是比較愛看直播，每個直播間都有一個訂閱的按鈕，如果你喜歡這個直播你就會訂閱一下它，但是每個主播開播的時間是不固定的，我們不能一直盯著直播間看吧，這樣很浪費時間也錯過了其他的內(nèi)容，所以你訂閱它之后，每個主播開播都會向自己訂閱的號發(fā)布自己開播的消息

代碼分析

我們使用Es6先創(chuàng)建一個class

// 發(fā)布訂閱實現(xiàn)
    class Observer {
        constructor () {
        }
    }

訂閱（subscribe）的函數(shù)callback參數(shù)用作傳入的訂閱者回調(diào)函數(shù)，this.subscribers.length插入當前自己應(yīng)當?shù)奈恢?/p>

    subscribe (callback) {
        // 將傳入的函數(shù)賦予這個數(shù)組
        this.subscribers[this.subscribers.length] = callback
    }

退訂（retreatSubscribe）函數(shù)，傳入退訂者的回調(diào)函數(shù)，循環(huán)存儲訂閱者的數(shù)組this.subscribers，根據(jù)傳入的退訂者和訂閱者數(shù)組中對比，相同者刪除訂閱者

    retreatSubscribe (callback) {
        for(var i = 0;i < this.subscribers.length;i++) {
            if(this.subscribers[i] === callback){
                delete (this.subscribers[i])
            }
        }
    }

觀察（publish）函數(shù)，觀察訂閱者的動作，this指向的是這個class Observer，將Observer內(nèi)的函數(shù)方法賦予訂閱者對象，聲明數(shù)組用作存儲訂閱者回調(diào)函數(shù)

    make (o) {
        // this === Observer這個對象的函數(shù)
        for(var i in this){
            // this[i]Observer對象里面的每個方法
            o[i] = this[i]
            // 聲明數(shù)組用作存儲訂閱者回調(diào)函數(shù)
            o.subscribers = []
        }
    }

發(fā)布（publish）函數(shù)，循環(huán)存儲訂閱者回調(diào)函數(shù)的數(shù)組，檢測是否為函數(shù)，如果是函數(shù)進行發(fā)布消息

    //發(fā)布
    publish (what) {
        for(var i = 0;i< this.subscribers.length;i++){
            if(typeof this.subscribers[i] === "function"){
                // add函數(shù)
                this.subscribers[i](what)
            }
        }
    }

代碼組合起來

下面的class代碼是我將上面步驟的組合到一起的一系列代碼，由訂閱對象，觀察對象，發(fā)布消息，退訂組成的觀察者模式，也叫發(fā)布訂閱

    class Observer {
        constructor () {}
        // 訂閱
        subscribe (callback) {
            // 將傳入的函數(shù)賦予這個數(shù)組
            this.subscribers[this.subscribers.length] = callback
        }
        // 退訂
        retreatSubscribe (callback) {
            for(var i = 0;i < this.subscribers.length;i++) {
                if(this.subscribers[i] === callback){
                    delete (this.subscribers[i])
                }
            }
        }
        // 觀察對象
        make (o) {
            // this === Observer這個對象的函數(shù)
            for(var i in this){
                // this[i]Observer對象里面的每個方法
                o[i] = this[i]
                // 聲明數(shù)組用作存儲訂閱者回調(diào)函數(shù)
                o.subscribers = []
            }
        }
        // 發(fā)布
        publish (what) {
            for(var i = 0;i< this.subscribers.length;i++){
                if(typeof this.subscribers[i] === "function"){
                    // add函數(shù)
                    this.subscribers[i](what)
                }
            }
        }
    }

使用上面的觀察者

1.我們必須創(chuàng)建一個訂閱者對象

let people = {
}

2.我們觀察這個對象并且賦值給這個對象可以使用的功能，我們讓他可以行動，可以做出行為舉止

 Observer.make(people)

3.聲明想發(fā)布的信息代碼

 let wanglei = {
        add (what) {
            console.log("wanglei給" + what);
        }
    }

4.我們訂閱一下想要發(fā)送的函數(shù)，我們這里正好是聲明的函數(shù)，用來訂閱用的，可以回顧上面訂閱的函數(shù)代碼

 Observer.subscribe(wanglei.add)

5.發(fā)布消息我們將qaaa字符傳遞到add訂閱函數(shù)的what形參里面用來組合發(fā)送消息

 Observer.publish("qaaa")
 
 //打印
  wanglei給qaaa

6.退訂既然可以訂閱，我們就可以退訂，退訂主要走的retreatSubscribe函數(shù)，我們將訂閱者的信息傳遞到退訂函數(shù)就可以刪除這個訂閱者，之后再發(fā)布就無法再接收到相關(guān)信息

 Observer.retreatSubscribe(wang.add)

觀察者優(yōu)缺點

那么使用完觀察者之后你們有什么感觸，總的來說觀察者有優(yōu)點也有缺點，每個事物都一樣總會有優(yōu)缺點，但是觀察者的優(yōu)點在我們部分功能中起到很多作用，我們看看它的優(yōu)缺點
優(yōu)點：

  1. 支持簡單的廣播通信，自動通知所有已經(jīng)訂閱過的對象
  
2. 目標對象與觀察者存在的是動態(tài)關(guān)聯(lián)，增加了靈活性

3. 目標對象與觀察者之間的抽象耦合關(guān)系能夠多帶帶擴展以及重用

缺點：

1. 如果一個觀察目標對象有很多直接和間接的觀察者的話，將所有的觀察者都通知到會花費很多時間

2. 如果在觀察者和觀察目標之間有循環(huán)依賴的話，觀察目標會觸發(fā)它們之間進行循環(huán)調(diào)用，可能導(dǎo)致系統(tǒng)崩潰

3. 觀察者模式?jīng)]有相應(yīng)的機制讓觀察者知道所觀察的目標對象是怎么發(fā)生變化的，而僅僅只是知道觀察目標發(fā)生了變化