js設計模式-觀察者模式（訂閱-釋出模式）

縮略版

就例如如我們關注了某一個公衆号,然後他對應的有新的消息就會給你推送,

//釋出者與訂閱模式
    var shoeObj = {}; // 定義釋出者
    shoeObj.list = []; // 緩存清單 存放訂閱者回調函數

    // 增加訂閱者
    shoeObj.listen = function(fn) {
        shoeObj.list.push(fn); // 訂閱消息添加到緩存清單
    }

    // 釋出消息
    shoeObj.trigger = function() {
    
            for (var i = 0, fn; fn = this.list[i++];) {
                fn.apply(this, arguments);//第一個參數隻是改變fn的this,
            }
        }
     // 小紅訂閱如下消息
    shoeObj.listen(function(color, size) {
        console.log("顔色是：" + color);
        console.log("尺碼是：" + size);
    });

    // 小花訂閱如下消息
    shoeObj.listen(function(color, size) {
        console.log("再次列印顔色是：" + color);
        console.log("再次列印尺碼是：" + size);
    });
    shoeObj.trigger("紅色", 40);
    shoeObj.trigger("黑色", 42);

詳細版

1. 釋出訂閱模式介紹

釋出—訂閱模式又叫觀察者模式，它定義了對象間的一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，當一個對象發生改變時，所有依賴于它的對象都将得到通知。

現實生活中的釋出-訂閱模式：

比如小紅最近在淘寶網上看上一雙鞋子，但是呢聯系到賣家後，才發現這雙鞋賣光了，但是小紅對這雙鞋又非常喜歡，是以呢聯系賣家，問賣家什麼時候有貨，賣家告訴她，要等一個星期後才有貨，賣家告訴小紅，要是你喜歡的話，你可以收藏我們的店鋪，等有貨的時候再通知你，是以小紅收藏了此店鋪，但與此同時，小明，小花等也喜歡這雙鞋，也收藏了該店鋪；等來貨的時候就依次會通知他們；

在上面的故事中，可以看出是一個典型的釋出訂閱模式，賣家是屬于釋出者，小紅，小明等屬于訂閱者，訂閱該店鋪，賣家作為釋出者，當鞋子到了的時候，會依次通知小明，小紅等，依次使用旺旺等工具給他們釋出消息；

釋出訂閱模式的優點：

支援簡單的廣播通信，當對象狀态發生改變時，會自動通知已經訂閱過的對象。

比如上面的列子，小明，小紅不需要天天逛淘寶網看鞋子到了沒有，在合适的時間點，釋出者(賣家)來貨了的時候，會通知該訂閱者(小紅，小明等人)。

釋出者與訂閱者耦合性降低，釋出者隻管釋出一條消息出去，它不關心這條消息如何被訂閱者使用，同時，訂閱者隻監聽釋出者的事件名，隻要釋出者的事件名不變，它不管釋出者如何改變；同理賣家（釋出者）它隻需要将鞋子來貨的這件事告訴訂閱者(買家)，他不管買家到底買還是不買，還是買其他賣家的。隻要鞋子到貨了就通知訂閱者即可。

對于第一點，我們日常工作中也經常使用到，比如我們的ajax請求，請求有成功(success)和失敗(error)的回調函數，我們可以訂閱ajax的success和error事件。我們并不關心對象在異步運作的狀态，我們隻關心success的時候或者error的時候我們要做點我們自己的事情就可以了~

釋出訂閱模式的缺點：

建立訂閱者需要消耗一定的時間和記憶體。

雖然可以弱化對象之間的聯系，如果過度使用的話，反而使代碼不好了解及代碼不好維護等等。

2. 如何實作釋出–訂閱模式？

首先要想好誰是釋出者(比如上面的賣家)。
然後給釋出者添加一個緩存清單，用于存放回調函數來通知訂閱者(比如上面的買家收藏了賣家的店鋪，賣家通過收藏了該店鋪的一個清單名單)。
最後就是釋出消息，釋出者周遊這個緩存清單，依次觸發裡面存放的訂閱者回調函數。

我們還可以在回調函數裡面添加一點參數，比如鞋子的顔色，鞋子尺碼等資訊；

我們先來實作下簡單的釋出-訂閱模式；代碼如下：

var shoeObj = {}; // 定義釋出者
shoeObj.list = []; // 緩存清單 存放訂閱者回調函數
        
// 增加訂閱者
shoeObj.listen = function(fn) {
    shoeObj.list.push(fn);  // 訂閱消息添加到緩存清單
}

// 釋出消息
shoeObj.trigger = function(){
    for(var i = 0,fn; fn = this.list[i++];) {
        fn.apply(this,arguments); 
    }
}
// 小紅訂閱如下消息
shoeObj.listen(function(color,size){
    console.log("顔色是："+color);
    console.log("尺碼是："+size);  
});

// 小花訂閱如下消息
shoeObj.listen(function(color,size){
    console.log("再次列印顔色是："+color);
    console.log("再次列印尺碼是："+size); 
});
shoeObj.trigger("紅色",40);
shoeObj.trigger("黑色",42);

運作結果如下：

js設計模式-觀察者模式（訂閱-釋出模式）

列印如上截圖，我們看到訂閱者接收到釋出者的每個消息，但是呢，對于小紅來說，她隻想接收顔色為紅色的消息，不想接收顔色為黑色的消息，為此我們需要對代碼進行如下改造下，我們可以先增加一個key，使訂閱者隻訂閱自己感興趣的消息。代碼如下：

var shoeObj = {}; // 定義釋出者
shoeObj.list = []; // 緩存清單 存放訂閱者回調函數
        
// 增加訂閱者
shoeObj.listen = function(key,fn) {
    if(!this.list[key]) {
        // 如果還沒有訂閱過此類消息，給該類消息建立一個緩存清單
        this.list[key] = []; 
    }
    this.list[key].push(fn);  // 訂閱消息添加到緩存清單
}

// 釋出消息
shoeObj.trigger = function(){
    var key = Array.prototype.shift.call(arguments); // 取出消息類型名稱
    var fns = this.list[key];  // 取出該消息對應的回調函數的集合

    // 如果沒有訂閱過該消息的話，則傳回
    if(!fns || fns.length === 0) {
        return;
    }
    for(var i = 0,fn; fn = fns[i++]; ) {
        fn.apply(this,arguments); // arguments 是釋出消息時附送的參數
    }
};

// 小紅訂閱如下消息
shoeObj.listen('red',function(size){
    console.log("尺碼是："+size);  
});

// 小花訂閱如下消息
shoeObj.listen('block',function(size){
    console.log("再次列印尺碼是："+size); 
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);

上面的代碼，我們再來運作列印下如下：

js設計模式-觀察者模式（訂閱-釋出模式）

可以看到，訂閱者隻訂閱自己感興趣的消息了；

3. 釋出—訂閱模式的代碼封裝

我們知道，對于上面的代碼，小紅去買鞋這麼一個對象shoeObj 進行訂閱，但是如果以後我們需要對買房子或者其他的對象進行訂閱呢，我們需要複制上面的代碼，再重新改下裡面的對象代碼；為此我們需要進行代碼封裝；

如下代碼封裝：

var event = {
    list: [],
    listen: function(key,fn) {
        if(!this.list[key]) {
            this.list[key] = [];
        }
        // 訂閱的消息添加到緩存清單中
        this.list[key].push(fn);
    },
    trigger: function(){
        var key = Array.prototype.shift.call(arguments);
        var fns = this.list[key];
        // 如果沒有訂閱過該消息的話，則傳回
        if(!fns || fns.length === 0) {
            return;
        }
        for(var i = 0,fn; fn = fns[i++];) {
            fn.apply(this,arguments);
        }
    }
};

我們再定義一個initEvent函數，這個函數使所有的普通對象都具有釋出訂閱功能，如下代碼：

var initEvent = function(obj) {
    for(var i in event) {
        obj[i] = event[i];
    }
};
// 我們再來測試下，我們還是給shoeObj這個對象添加釋出-訂閱功能；
var shoeObj = {};
initEvent(shoeObj);

// 小紅訂閱如下消息
shoeObj.listen('red',function(size){
    console.log("尺碼是："+size);  
});

// 小花訂閱如下消息
shoeObj.listen('block',function(size){
    console.log("再次列印尺碼是："+size); 
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);

4. 如何取消訂閱事件？

比如上面的列子，小紅她突然不想買鞋子了，那麼對于賣家的店鋪他不想再接受該店鋪的消息，那麼小紅可以取消該店鋪的訂閱。

如下代碼

event.remove = function(key,fn){
    var fns = this.list[key];
    // 如果key對應的消息沒有訂閱過的話，則傳回
    if(!fns) {
        return false;
    }
    // 如果沒有傳入具體的回調函數，表示需要取消key對應消息的所有訂閱
    if(!fn) {
        fn && (fns.length = 0);
    }else {
        for(var i = fns.length - 1; i >= 0; i--) {
            var _fn = fns[i];
            if(_fn === fn) {
                fns.splice(i,1); // 删除訂閱者的回調函數
            }
        }
    }
};
// 測試代碼如下：
var initEvent = function(obj) {
    for(var i in event) {
        obj[i] = event[i];
    }
};
var shoeObj = {};
initEvent(shoeObj);

// 小紅訂閱如下消息
shoeObj.listen('red',fn1 = function(size){
    console.log("尺碼是："+size);  
});

// 小花訂閱如下消息
shoeObj.listen('red',fn2 = function(size){
    console.log("再次列印尺碼是："+size); 
});
shoeObj.remove("red",fn1);
shoeObj.trigger("red",42);

運作結果如下：

js設計模式-觀察者模式（訂閱-釋出模式）

5. 全局–釋出訂閱對象代碼封裝

我們再來看看我們傳統的ajax請求吧，比如我們傳統的ajax請求，請求成功後需要做如下事情：

渲染資料。
使用資料來做一個動畫。

那麼我們以前肯定是如下寫代碼：

$.ajax(“http://127.0.0.1/index.php”,function(data){
    rendedData(data);  // 渲染資料
    doAnimate(data);  // 實作動畫 
});

假如以後還需要做點事情的話，我們還需要在裡面寫調用的方法；這樣代碼就耦合性很高，那麼我們現在使用釋出-訂閱模式來看如何重構上面的業務需求代碼；

$.ajax(“http://127.0.0.1/index.php”,function(data){
    Obj.trigger(‘success’,data);  // 釋出請求成功後的消息
});
// 下面我們來訂閱此消息，比如我現在訂閱渲染資料這個消息；
Obj.listen(“success”,function(data){
   renderData(data);
});
// 訂閱動畫這個消息
Obj.listen(“success”,function(data){
   doAnimate(data); 
});

為此我們可以封裝一個全局釋出-訂閱模式對象；如下代碼：

var Event = (function(){
    var list = {},
          listen,
          trigger,
          remove;
          listen = function(key,fn){
            if(!list[key]) {
                list[key] = [];
            }
            list[key].push(fn);
        };
        trigger = function(){
            var key = Array.prototype.shift.call(arguments),
                 fns = list[key];
            if(!fns || fns.length === 0) {
                return false;
            }
            for(var i = 0, fn; fn = fns[i++];) {
                fn.apply(this,arguments);
            }
        };
        remove = function(key,fn){
            var fns = list[key];
            if(!fns) {
                return false;
            }
            if(!fn) {
                fns && (fns.length = 0);
            }else {
                for(var i = fns.length - 1; i >= 0; i--){
                    var _fn = fns[i];
                    if(_fn === fn) {
                        fns.splice(i,1);
                    }
                }
            }
        };
        return {
            listen: listen,
            trigger: trigger,
            remove: remove
        }
})();
// 測試代碼如下：
Event.listen("color",function(size) {
    console.log("尺碼為:"+size); // 列印出尺碼為42
});
Event.trigger("color",42);

6. 了解子產品間通信

我們使用上面封裝的全局的釋出-訂閱對象來實作兩個子產品之間的通信問題；比如現在有一個頁面有一個按鈕，每次點選此按鈕後，div中會顯示此按鈕被點選的總次數；如下代碼：

點将我

我們中的a.js 負責處理點選操作及釋出消息；如下JS代碼：

var a = (function(){
    var count = 0;
    var button = document.getElementById("count");
    button.onclick = function(){
        Event.trigger("add",count++);
    }
})();

b.js 負責監聽add這個消息，并把點選的總次數顯示到頁面上來；如下代碼：

var b = (function(){
    var div = document.getElementById("showcount");
    Event.listen('add',function(count){
        div.innerHTML = count;
    });
})();

下面是html代碼如下，JS應用如下引用即可：

<!doctype html>
<html >
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="global.js"></script>
 </head>
 <body>
    <button id="count">點将我</button>
    <div id="showcount"></div>
    <script src = "a.js"></script>
    <script src = "b.js"></script>
 </body>
</html>

如上代碼，當點選一次按鈕後，showcount的div會自動加1，如上示範的是2個子產品之間如何使用釋出-訂閱模式之間的通信問題；

其中global.js 就是我們上面封裝的全局-釋出訂閱模式對象的封裝代碼；

參考轉發位址：https://www.cnblogs.com/tugenhua0707/p/5198407.html#_labe8

js設計模式-觀察者模式（訂閱-釋出模式）

縮略版

詳細版

繼續閱讀

設計模式之觀察者模式（Java實作）

設計模式觀察者模式的了解

觀察者模式和釋出訂閱模式有什麼不同？

一些常見的微服務開源注冊中心1.Eureka：Netflix開源的注冊中心，支援服務的自動注冊和發現，并提供負載均衡和故

沒學Spring能直接學微服務嗎？為什麼學Java要系統學習？重要事情說三遍。Spring是很重要的，Spring比如你

Day318.疊代器模式&觀察者模式 -Java設計模式疊代器模式觀察者模式

如何避免項目越寫越爛？分享我這幾年心得。作為一名後端開發，我想分享一些我在代碼編寫方面的經驗。首先，我認為應該養成良好的

觀察者模式觀察者模式介紹應用場景JDK中的應用

（42）C#設計模式——觀察者模式（Observer Pattern）

（1）觀察者模式

設計模式(二十二)觀察者模式 C++

Java中的Observable和Observer源碼分析

【設計模式】692- TypeScript 設計模式之釋出-訂閱模式

【設計模式】689- TypeScript 設計模式之觀察者模式

設計模式-觀察者模式（Observer Pattern）

js進階-函數進階