theme: channing-cyan

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第18天，點擊查看活動詳情

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

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

發佈訂閲設計模式

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

我們來舉一個訂閲者設計模式的例子 1. 小明去買書 去書店問店員，店員説沒有就回家，過一會再去問問，以此往復，直到買到 2. 小紅去買書 去書店問店員，店員説沒有就會留下一個聯繫電話給店員，有了書店員就會聯繫小紅，過去買書

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

訂閲者類有個一個屬性: 1. 事件中心，用於存放訂閲者行為的任務對列 訂閲者類中有三個方法，分別為： 1. 往任務隊列中添加函數 2. 觸發任務隊列裏的函數 3. 刪除任務隊列裏的函數 創建類，類中有一個對象，該對象就是事件中心，用於存儲行為的任務隊列

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

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

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

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

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

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

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

創建一個訂閲者實例並添加行為和對行為的任務對列增刪方法 js // 創建訂閲者實例 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'); } 訂閲者設計模式如果添加了很多事件會增加內存的消耗並且程序難以維護以及難以判斷事件來源

堅持努力，無懼未來！