js 觀察者

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

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

觀察者模式模式簡(jiǎn)介

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

觀察者模式機(jī)動(dòng)

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

生活中的觀察者模式

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

代碼分析

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

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

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

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

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

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

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

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

發(fā)布（publish）函數(shù)，循環(huán)存儲(chǔ)訂閱者回調(diào)函數(shù)的數(shù)組，檢測(cè)是否為函數(shù)，如果是函數(shù)進(jìn)行發(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)
            }
        }
    }

代碼組合起來(lái)

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

    class Observer {
        constructor () {}
        // 訂閱
        subscribe (callback) {
            // 將傳入的函數(shù)賦予這個(gè)數(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])
                }
            }
        }
        // 觀察對(duì)象
        make (o) {
            // this === Observer這個(gè)對(duì)象的函數(shù)
            for(var i in this){
                // this[i]Observer對(duì)象里面的每個(gè)方法
                o[i] = this[i]
                // 聲明數(shù)組用作存儲(chǔ)訂閱者回調(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)建一個(gè)訂閱者對(duì)象

let people = {
}

2.我們觀察這個(gè)對(duì)象并且賦值給這個(gè)對(duì)象可以使用的功能，我們讓他可以行動(dòng)，可以做出行為舉止

 Observer.make(people)

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

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

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

 Observer.subscribe(wanglei.add)

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

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

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

 Observer.retreatSubscribe(wang.add)

觀察者優(yōu)缺點(diǎn)

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

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

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

缺點(diǎn)：

1. 如果一個(gè)觀察目標(biāo)對(duì)象有很多直接和間接的觀察者的話，將所有的觀察者都通知到會(huì)花費(fèi)很多時(shí)間

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

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