訂閱發(fā)布模式：
這是一種廣泛應(yīng)用于異步編程的模式，是回調(diào)函數(shù)的事件化，常常用來(lái)解耦業(yè)務(wù)邏輯。事件的發(fā)布者無(wú)需關(guān)注訂閱的偵聽(tīng)器如何實(shí)現(xiàn)業(yè)務(wù)邏輯，甚至不用關(guān)注有多少個(gè)偵聽(tīng)器存在。數(shù)據(jù)通過(guò)消息的方式可以靈活的傳遞。 ——《深入淺出Nodejs》
由于瀏覽器js單線(xiàn)程的原因，編寫(xiě)js代碼經(jīng)常會(huì)用到異步，回調(diào)函數(shù) ， 業(yè)內(nèi)解決 異步比較流行的方式 訂閱發(fā)布模式、 promise? 、async/await 。
例如 promise? 我們都是在then 函數(shù)中傳入回調(diào)函數(shù)， 傳入之后發(fā)生了什么。。。為什么回調(diào)沒(méi)有立即執(zhí)行 而是等狀態(tài)發(fā)生后執(zhí)行的，同一個(gè)promise 實(shí)例 注冊(cè)多個(gè)then函數(shù)， 為什么可以依次執(zhí)行。。。很多主流的庫(kù)或框架 也用的訂閱發(fā)布模式，例如 mobx vue . 所以有必要 總結(jié)下原理，相信你看完本文， 收獲頗多。

下面我們可以構(gòu)造下事件類(lèi) 需要包含下面的 內(nèi)容：
subscribers：一個(gè)對(duì)象，其中每個(gè)屬性（訂閱的事件類(lèi)型),對(duì)應(yīng)一個(gè)數(shù)組，存儲(chǔ)訂閱者（同一個(gè)事件類(lèi)型可能有多個(gè)訂閱者，故放到數(shù)組中保存）
subscribe()：注冊(cè)/訂閱，將訂閱者添加到 subscribers 數(shù)組中；
unsubscribe()：取消訂閱。從 subscribers 數(shù)組中刪除訂閱者；
publish()：循環(huán)遍歷 subscribers 數(shù)組中的每一個(gè)元素，并且調(diào)用它們注冊(cè)時(shí)所提供的方法；
所有這三種方法都需要一個(gè) type 參數(shù)。這是因?yàn)榘l(fā)布者可能觸發(fā)多個(gè)事件（比如同時(shí)發(fā)布一本雜志和一份報(bào)紙）

class Publisher {constructor(){this.subscribers={} }subscribe(type,fn){// 將訂閱的事件回調(diào)保存到if (typeof fn !=='function'){throw new Error (`${fn} is not a function`) }if(!this.subscribers[type]){this.subscribers[type] = []}this.subscribers[type].push(fn); }unsubscribe(type,fn){this.subscribers[type]=this.subscribers[type].filter(item=>item!==fn)}publish(type,...params){if(!this.subscribers[type])return;this.subscribers[type].forEach(item=>item(...params)); }static makePublisher (obj){obj.publisher = new Publisher(); // 創(chuàng)建一個(gè)發(fā)布者 }}function fn1(name){ console.log(`hello，my name is ${name}`); }function meet(){ console.log('nice to meet you '); }function fn2 (age){console.log(`hello , I am ${age} years old!`); }var people= {};Publisher.makePublisher(people);people.publisher.subscribe('name',fn1);people.publisher.subscribe('name',meet);people.publisher.unsubscribe('name',meet);people.publisher.subscribe('age',fn2);people.publisher.publish('name','Tom'); people.publisher.publish('age',30);//hello，my name is Tom // hello , I am 30 years old!

?

總結(jié)

以上是生活随笔為你收集整理的理解并实现 你自己的 订阅-发布模式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。