JS設計模式七：發佈-訂閱模式

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~

發佈-訂閱模式簡述

發佈---訂閱模式又叫觀察者模式，它定義了對象間的一種一對多的關係，讓多個觀察者對象同時監聽某一個主題對象，當一個對象發生改變時，全部依賴於它的對象都將獲得通知。

以網購爲例：

假設小紅看上了一雙鞋子，但該鞋子已經斷貨了，賣家承諾她到貨通知。與此同時，小明、小花燈也關注了這雙鞋子。

在這個場景中，賣家就是發佈者，小紅等人都屬於訂閱者。當鞋子到貨時，會依次通知到每一個人。

發佈訂閱模式的優勢：

1. 支持簡單的廣播通訊，當對象狀態發生改變時，會自動通知已經訂閱過的對象。
2. 發佈者與訂閱者耦合性下降，發佈者只管發佈一條消息出去，它不關心這條消息如何被訂閱者使用，同時，訂閱者只監聽發佈者的事件名，只要發佈者的事件名不變，它無論發佈者如何改變；同理賣家（發佈者）它只須要將鞋子來貨的這件事告訴訂閱者(買家)，他無論買家到底買仍是不買，仍是買其餘賣家的。只要鞋子到貨了就通知訂閱者便可。

發佈訂閱模式的缺點：

建立訂閱者須要消耗必定的時間和內存。若是過分使用的話，反而使代碼很差理解及代碼很差維護等等。

如何實現發佈訂閱模式？

1. 首先要想好誰是發佈者(好比上面的賣家)。
2. 而後給發佈者添加一個緩存列表，用於存放回調函數來通知訂閱者(好比上面的買家收藏了賣家的店鋪，賣家經過收藏了該店鋪的一個列表名單)。
3. 最後就是發佈消息，發佈者遍歷這個緩存列表，依次觸發裏面存放的訂閱者回調函數。

實戰

發佈訂閱模式是最經典的設計模式之一，介紹的文章也很是多。這裏不打算過多介紹。直接上代碼~~~

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); // arguments 是發佈消息時附送的參數
            }
        };
        remove = function(key,fn){
			// 若是key對應的消息沒有訂閱過的話，則返回
            var fns = list[key];
			// 若是沒有傳入具體的回調函數，表示須要取消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);
複製代碼