JavaScript設計模式發佈訂閱模式

Posted on by

前言

發佈訂閱設計模式是和觀察者設計模式基本上相同，但是他們兩個設計模式不同的是發佈訂閱者擁有一個事件處理中心而觀察者並沒有

比如，我們利用訂閱者設計模式去監聽一個對象的改變，可以給對象改變的方法添加多個行為以及一個行為添加多個方法進行處理

發佈訂閱設計模式

發佈訂閱設計模式隻需要一個類，類中擁有一個事件中心管理這行為的任務對列，我們利用這個構造函數創建一個實例，在進行模擬一個addEventListener()事件，進行觸發事件中心行為上任務對列的方法

我們來舉一個訂閱者設計模式的例子：

  • 小明去買書

去書店問店員，店員說沒有就回傢，過一會再去問問，以此往復，直到買到

  • 小紅去買書

去書店問店員，店員說沒有就會留下一個聯系電話給店員，有瞭書店員就會聯系小紅，過去買書

小紅這種就是發佈訂閱設計模式的操作，首先給店員留下電話號是往行為的任務隊列中添加方法，店員打電話是觸發瞭書到瞭的行為

訂閱者類有個一個屬性:

  • 事件中心，用於存放訂閱者行為的任務對列

訂閱者類中有三個方法，分別為：

  • 往任務隊列中添加函數
  • 觸發任務隊列裡的函數
  • 刪除任務隊列裡的函數

創建類，類中有一個對象，該對象就是事件中心，用於存儲行為的任務隊列

   class Subscribe {
            constructor() {
                // 事件中心
                this.task = {};
            }
      }

添加觸發任務隊列函數方法：

        // type 行為
            trigger(type) {
                // 判斷當前的行為是否真的訂閱過
                if (!(type in this.task)) return;
                // 行為訂閱過直接進行執行該行為上的方法
                this.task[type].map(callbak => callbak())
            }

添加任務隊列中刪除函數方法：

            // type 行為
            // callback 函數
            del(type, callback) {
                // 判斷當前的行為是否真的訂閱過
                if (!(type in this.task)) return;
                // 過濾出當前想要刪除的函數
                 this.task[type].filter(val => val != callback);
            }

添加任務隊列中添加函數方法：

          // type 是行為
            // callback 是行為發生時候觸發的函數
            add(type, callback) {
                // 判斷type這個行為是否已經被註冊過瞭，沒有則註冊
                if (!(type in this.task)) {
                    // 沒有註冊過給一個空數組
                    this.task[type] = [];
                };
                //往該行為的任務隊列添加方法
                this.task[type].push(callback)
            }

創建一個訂閱者實例並添加行為和對行為的任務對列增刪方法

        // 創建訂閱者實例
        const per = new Subscribe();
        // 給訂閱者實例添加行為和出現行為時觸發的方法
        per.add('click', handA)
        per.add('click', handB)
        per.add('click', handC)
        // 根據行為進行觸發方法
        per.trigger('click')
        // 根據行為和方法進行刪除
        per.del('click', handC)
        // 方法
        function handA() {
            console.log('clickA');
        }
        // 方法
        function handB() {
            console.log('clickB');
        }
        // 方法
        function handC() {
            console.log('clickC');
        }

訂閱者設計模式如果添加瞭很多事件會增加內存的消耗並且程序難以維護以及難以判斷事件來源

到此這篇關於JavaScript設計模式發佈訂閱模式的文章就介紹到這瞭,更多相關JavaScript 發佈訂閱模式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：