首頁 >web前端 >js教程 >js設計模式：什麼是觀察者模式（發布訂閱模式）？ js觀察者模式的介紹

js設計模式：什麼是觀察者模式（發布訂閱模式）？ js觀察者模式的介紹

不言原創: 2018-08-17 16:22:531817瀏覽

本篇文章帶給大家的內容是關於js設計模式：什麼是觀察者模式（發佈訂閱模式）？ js觀察者模式的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是觀察者模式（發布訂閱模式）？

定義：定義物件間的一種一對多的依賴關係，當一個物件的狀態改變時，所有依賴它的物件都被通知並被自動更新。

主要解決：一個物件狀態改變給其他物件通知的問題，而且要考慮到易用和低耦合，保證高度的協作。

何時使用：一個物件（目標物件）的狀態改變，所有的依賴物件（觀察者物件）都會被通知，進行廣播通知。

如何解決：使用物件導向技術，可以將這種依賴關係弱化。

關鍵程式碼：對於某一個topci用陣列存放訂閱者.

應用程式實例： 1、拍賣的時候，拍賣師觀察最高標價，然後通知給其他競價者競價。 2.西遊記裡面悟空請求菩薩降服紅孩兒，菩薩灑了一地水招來一個老烏龜，這個烏龜就是觀察者，他觀察菩薩灑水這個動作。

觀察者模式優點： 1、觀察者和被觀察者是抽象耦合的。 2、建立一套觸發機制。

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

觀察者模式使用場景：

一個抽像模型有兩個方面，其中一個方面依賴另一個方面。將這些方面封裝在獨立的物件中使它們可以各自獨立地改變和重複使用。
一個物件的改變將導致其他一個或多個物件也發生改變，而不知道具體有多少物件將改變，可以降低物件之間的耦合度。
一個物件必須通知其他對象，而不知道這些對像是誰。
需要在系統中建立一個觸發鏈，A對象的行為會影響B對象，B對象的行為會影響C對象…，可以使用觀察者模式建立一種鏈式觸發機制。

注意事項： 1、避免循環引用。 2.如果順序執行，某一觀察者錯誤會導致系統卡殼，一般採用非同步方式。

觀察者模式程式碼實作

/*
     *发布-订阅模式（观察者模式）
     */
function pubsub() {
    var _pubsub = {},//全局对象，即发布订阅对象
        _topics = {}, // 回调函数存放的数组
        _subUid = 0;

    // 发布方法
    _pubsub.publish = function (topic) {
        if (!_topics[topic]) {
            return false;
        }
        var args = [].slice.call(arguments, 1);
        setTimeout(function () {
            var subscribers = _topics[topic];
            for (var i = 0, j = subscribers.length; i < j; i++) {
                subscribers[i].callback.apply(null, args);
            }
        }, 0);
        return true;
    };
    //订阅方法
    _pubsub.subscribe = function (topic, callback) {
        if (!_topics[topic]) {
            _topics[topic] = [];
        }
        var token = (++_subUid).toString();
        _topics[topic].push({
            token: token,
            callback: callback
        });
        return token;
    };
    //退订方法
    _pubsub.unsubscribe = function (token) {
        for (var m in _topics) {
            if (_topics[m]) {
                for (var i = 0, j = _topics[m].length; i < j; i++) {
                    if (_topics[m][i].token === token) {
                        _topics[m].splice(i, 1);
                        return token;
                    }
                }
            }
        }
        return false;
    };

    return {
        subscribe: _pubsub.subscribe,
        publish: _pubsub.publish,
        unsubscribe: _pubsub.unsubscribe
    }
}

js設計模式：什麼是觀察者模式（發布訂閱模式）？ js觀察者模式的介紹

什麼是觀察者模式（發布訂閱模式）？

觀察者模式程式碼實作

相關文章