JS設計模式七：釋出-訂閱模式

明易發表於2018-12-05
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);
複製程式碼

相關文章