js 觀察者

missonce 發布于2019-08-26 13:57 / 2285人閱讀

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

觀察者模式模式簡介

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

觀察者模式機動

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

生活中的觀察者模式

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

代碼分析

我們使用Es6先創建一個class

// 發布訂閱實現
    class Observer {
        constructor () {
        }
    }

訂閱（subscribe）的函數callback參數用作傳入的訂閱者回調函數，this.subscribers.length插入當前自己應當的位置

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

退訂（retreatSubscribe）函數，傳入退訂者的回調函數，循環存儲訂閱者的數組this.subscribers，根據傳入的退訂者和訂閱者數組中對比，相同者刪除訂閱者

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

觀察（publish）函數，觀察訂閱者的動作，this指向的是這個class Observer，將Observer內的函數方法賦予訂閱者對象，聲明數組用作存儲訂閱者回調函數

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

發布（publish）函數，循環存儲訂閱者回調函數的數組，檢測是否為函數，如果是函數進行發布消息

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

代碼組合起來

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

    class Observer {
        constructor () {}
        // 訂閱
        subscribe (callback) {
            // 將傳入的函數賦予這個數組
            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這個對象的函數
            for(var i in this){
                // this[i]Observer對象里面的每個方法
                o[i] = this[i]
                // 聲明數組用作存儲訂閱者回調函數
                o.subscribers = []
            }
        }
        // 發布
        publish (what) {
            for(var i = 0;i< this.subscribers.length;i++){
                if(typeof this.subscribers[i] === "function"){
                    // add函數
                    this.subscribers[i](what)
                }
            }
        }
    }

使用上面的觀察者

1.我們必須創建一個訂閱者對象

let people = {
}

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

 Observer.make(people)

3.聲明想發布的信息代碼

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

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

 Observer.subscribe(wanglei.add)

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

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

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

 Observer.retreatSubscribe(wang.add)

觀察者優缺點

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

  1. 支持簡單的廣播通信，自動通知所有已經訂閱過的對象
  
2. 目標對象與觀察者存在的是動態關聯，增加了靈活性

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

缺點：

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

2. 如果在觀察者和觀察目標之間有循環依賴的話，觀察目標會觸發它們之間進行循環調用，可能導致系統崩潰

3. 觀察者模式沒有相應的機制讓觀察者知道所觀察的目標對象是怎么發生變化的，而僅僅只是知道觀察目標發生了變化

最后我們的觀察者就到這里了

GPU云服務器云服務器 js觀察者模式視頻觀察者內容觀察者觀察者模式

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

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

JS 觀察者模式

摘要：使用觀察者模式的好處支持簡單的廣播通信，自動通知所有已經訂閱過的對象?？偟膩碚f，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。 1. 介紹觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己。使用...

mist14 2019-08-21 18:19 評論0 收藏0
JS設計模式之Obeserver（觀察者）模式、Publish/Subscribe（發布/訂閱）模式

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

荊兆峰 2019-08-26 13:37 評論0 收藏0
JS 設計模式十三（觀察者模式）

摘要：觀察者模式對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并被自動更新。具體主題角色在具體主題內部狀態改變時，給所有登記過的觀察者發出通知。觀察者模式對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都得到通知并被自動更新。觀察者要素 1.抽象主題(Subject)角色：把所有對觀察者對象的引用保存在一個集合中，每個...

shleyZ 2019-08-19 18:24 評論0 收藏0
JS每日一題:設計模式-如何理解觀察者(發布訂閱)模式?

摘要：期設計模式如何理解觀察者發布訂閱模式定義觀察者模式又叫發布訂閱模式，它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己生活實例理解你今天去看一個 20190411期設計模式-如何理解觀察者(發布訂閱)模式? 定義: 觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一...

baishancloud 2019-08-23 16:53 評論0 收藏0
JS觀察者模式

摘要：觀察者模式觀察者模式在的學習過程中很重要，尤其是最近幾年框架的發展。觀察者模式很好的體現了松耦合原則和單一職責原則。觀察者模式由主體和觀察者組成，主體負責發布事件，觀察者通過訂閱事件來觀察主體。觀察者模式觀察者模式在JS的學習過程中很重要，尤其是最近幾年MV*框架的發展。觀察者模式很好的體現了松耦合(Loose coupling)原則和單一職責原則。觀察者模式它定義了對象間一種一對...

zacklee 2019-08-26 11:36 評論0 收藏0
js的觀察者模式

摘要：聲明主題對象注冊觀察者觀察者訂閱了本主題觀察者取關取關了本主題在某些特定的時候由主題向所有的訂閱者發布事件供主題調用的事件觀察者更新了信息信息為觀察者進行了初始化觀察者開始玩起了實例化一個主題實例化三個觀察者對象張三李四趙六天命圈觀察者張三 //聲明主題對象 var Subject = function(name) { ...

sihai 2019-08-23 15:11 評論0 收藏0