用JS寫一個發(fā)布訂閱模式
什么是發(fā)布訂閱模式?能手寫實現(xiàn)一下嗎?它和觀察者模式有區(qū)別嗎?...
1 場景引入
我們先來看這么一個場景:
假設現(xiàn)在有一個社交平臺,平臺上有一個大V叫Nami
Nami很牛,多才多藝,目前她有2個技能:會寫歌、會拍視頻
她會把這些作品發(fā)布到平臺上。關注她的粉絲就會接收到這些內容
現(xiàn)在他已經有3個粉絲了,分別是:Luffy、Zoro、Sanji
每次只要Nami一發(fā)布作品,3個粉絲的賬號上收到的消息就會更新
現(xiàn)在用代碼來表示:
const luffy = {
update: function (songs, videos) {
console.log(songs, videos);
},
};
const zoro = {
update: function (songs, videos) {
console.log(songs, videos);
},
};
const sanji = {
update: function (songs, videos) {
console.log(songs, videos);
},
};
const nami = {
// 只要Nami的作品一更新,這個方法就會被調用
workUpdate: function () {
// 獲取作品
const songs = this.getSongs();
const videos = this.getVideos();
// 賬號更新
luffy.update(songs, videos);
zoro.update(songs, videos);
sanji.update(songs, videos);
},
getSongs: function () {
return "mp3";
},
getVideos: function () {
return "mp4";
},
};
現(xiàn)在問題來了
- 如果
Nami又收獲了一個粉絲Robin,我既要添加一個robin對象,又要修改workUpdate方法 - 如果
Nami又有了一項新技能:寫小說,我既要修改workUpdate函數(shù),又要修改每個粉絲對象中的update方法,因為參數(shù)增加了一個
發(fā)現(xiàn)問題沒有?
粉絲對象和大V對象之間的耦合度太高,導致兩者很難各自擴展
2 代碼優(yōu)化
2.1 解決增加粉絲問題
先來解決上述第1個問題,使得增加粉絲的時候不用再修改workUpdate方法
首先,我們將“大V”抽象成一個類Star,用數(shù)組fans來保存粉絲列表,并新增一個添加粉絲的方法addFans
class Star {
constructor() {
this.fans = [];
}
addFans(fan) {
this.fans.push(fan)
}
workUpdate() {
const songs = this.getSongs();
const videos = this.getVideos();
this.fans.forEach((item) => item.update(songs, videos));
}
getSongs() {
return "MP3";
}
getVideos() {
return "MP4";
}
}
接著,將“粉絲”也抽象成一個類Fan,我們在創(chuàng)建粉絲對象的時候傳入“大V”對象,調用該大V的addFans方法來添加到粉絲列表
class Fan {
constructor(name, star) {
this.name = name
this.star = star
this.star.addFans(this)
}
update(songs, videos) {
console.log(songs, videos);
}
}
現(xiàn)在我們添加粉絲就不必再更改代碼了
const nami = new Star()
const luffy = new Fan("luffy", nami);
const zoro = new Fan("zoro", nami);
const sanji = new Fan("sanji", nami);
const robin = new Fan("robin", nami);
nami.workUpdate()
2.2 解決添加作品問題
我們新增一個works數(shù)組來保存大V的作品,并且為其添加get和set方法
class Star {
constructor() {
this.fans = [];
this.works = [];
}
addFans(fan) {
this.fans.push(fan);
}
setWorks(work) {
this.works.push(work);
// 添加作品后,調用更新方法
this.workUpdate();
}
getWorks() {
return this.works;
}
workUpdate() {
this.fans.forEach((item) => item.update());
}
}
對類Fan進行相應修改:
class Fan {
constructor(name, star) {
this.name = name
this.star = star
this.star.addFans(this)
}
update() {
console.log(`${this.name}:${this.star.getWorks()}`)
}
}
現(xiàn)在大V添加作品就不必再更改代碼了:
const nami = new Star();
nami.setWorks('song')
nami.setWorks('video')
nami.setWorks('novel')
const luffy = new Fan("luffy", nami);
const zoro = new Fan("zoro", nami);
const sanji = new Fan("sanji", nami);
nami.workUpdate();
3 觀察者模式
可以看到,在上述例子中,一個nami對象和多個粉絲對象之間存在著一種一對多的依賴關系,當nami對象有作品更新的時候,所有關注她的粉絲對象都會收到通知。
事實上,這就是觀察者模式
觀察者模式:定義對象間的一種一對多的依賴關系,當一個對象的狀態(tài)發(fā)生改變時,所有依賴于它的對象都得到通知并被自動更新
我們將2.2中的代碼進行進一步的抽象:
將“粉絲”看作觀察者(Observer),將“大V”看作被觀察的對象,稱為主題(Subject)
Subject維護一個觀察者列表observerList(原fans數(shù)組)。當Subject的狀態(tài)發(fā)生變化(原作品更新)時,通過調用notify(原workUpdate)方法通知所有觀察者,執(zhí)行它們的update方法
具體代碼如下:
// 被觀察者:主題
class Subject {
constructor() {
this.observerList = [];
// 代表主題狀態(tài)
this.state = 0;
}
addObserver(observer) {
this.observerList.push(observer);
}
// 更改主題狀態(tài)
setState(state) {
this.state = state;
// 狀態(tài)改變后,通知所有觀察者
this.notify();
}
getState() {
return this.state;
}
notify() {
this.observerList.forEach((observer) => observer.update());
}
}
// 觀察者
class Observer {
constructor(name, subject) {
this.name = name;
this.subject = subject;
this.subject.addObserver(this);
}
update() {
console.log(`${this.name}:${this.subject.state}`);
}
}
4 經紀人登場
由于大V業(yè)務繁忙,所以他們需要經紀人來維持藝人與粉絲的聯(lián)系
經紀人的工作包括:
- 維護大V的粉絲,經紀人手中會有一個粉絲名單
- 大V的新作品會交給經紀人,經紀人則負責把新作品發(fā)送給粉絲名單中的粉絲
抽象成一個類,如下:
class Manager {
constructor() {
this.fans = [];
this.works = [];
}
addFans(fan) {
this.fans.push(fan);
}
setWorks(work) {
this.works.push(work);
// 添加作品后,調用更新方法
this.workUpdate();
}
getWorks() {
return this.works;
}
workUpdate() {
this.fans.forEach((item) => item.update());
}
}
嗯?這段代碼貌似在哪兒見過?
沒錯,和2.2的Star類一模一樣,只不過把類名改了改。
那這么做有意義嗎?
事實上,代碼一模一樣是因為在2.2的Star類中我們只寫了有關發(fā)布(即發(fā)布作品)和訂閱(即維護粉絲列表)的功能;而Star類本身可能不止這個工作,比如創(chuàng)作內容。
現(xiàn)在我們將Star類中的發(fā)布和訂閱的工作抽離出來,交給Manager全權負責。而Star類只要在創(chuàng)作完成后把作品交給Manager就可以了
另一方面,粉絲Fan也不再直接和Star發(fā)生交互了,F(xiàn)an只關心能不能收到作品,所以Fan直接和Manager發(fā)生交互,F(xiàn)an去訂閱(這個行為相當于在Manager維護的粉絲列表中添加粉絲)Manager并從Manager那兒獲取想要的作品
于是Star和Fan的代碼如下:
class Star {
constructor() {}
// 創(chuàng)作
create(manager) {
// 將創(chuàng)作的new work交給經紀人
manager.setWorks("new work");
}
}
class Fan {
constructor(name, manager) {
this.name = name;
this.manager = manager;
this.manager.addFans(this);
}
update() {
console.log(`${this.name}:${this.manager.getWorks()}`);
}
}
5 發(fā)布訂閱模式
前面我們用了經紀人來負責發(fā)布和訂閱的工作,而不讓Star和Fan發(fā)生直接交互,達到了兩者解耦的效果
這就是發(fā)布訂閱模式
我們將4中的Manager進行進一步的抽象:
將“粉絲”看作訂閱者(Subscriber);將“大V”看作內容的發(fā)布者,在發(fā)布訂閱模式中稱為發(fā)布者(Publisher);把“經紀人”看作發(fā)布訂閱中心(或者說中間人Broker)
具體代碼如下:
// 發(fā)布訂閱調度中心
class Broker {
constructor() {
this.subscribers = [];
// 代表主題狀態(tài)
this.state = 0;
}
// 訂閱
subscribe(subscriber) {
this.subscribers.push(subscriber);
}
// 更改主題狀態(tài)
setState(state) {
this.state = state;
// 狀態(tài)改變后,發(fā)布
this.publish();
}
getState() {
return this.state;
}
// 發(fā)布
publish() {
this.subscribers.forEach((subscriber) => subscriber.update());
}
}
// 發(fā)布者
class Publisher {
constructor() {}
changeState(broker, state) {
broker.setState(state);
}
}
class Subscriber {
constructor(name, broker) {
this.name = name;
this.broker = broker;
this.broker.subscribe(this);
}
update() {
console.log(`${this.name}:${this.broker.getState()}`);
}
}
來運行一下看看效果:
// 創(chuàng)建調度中心
const broker = new Broker()
// 創(chuàng)建發(fā)布者
const publisher = new Publisher()
// 創(chuàng)建訂閱者
const subscribe1 = new Subscriber('s1', broker)
const subscribe2 = new Subscriber('s2', broker)
const subscribe3 = new Subscriber('s3', broker)
// 發(fā)布者改變狀態(tài)并通知調度中心,調度中心就會通知各個訂閱者
publisher.changeState(broker, 1)
6 觀察者模式和發(fā)布訂閱模式的對比
從角色數(shù)量看
- 觀察者模式只有兩個角色:觀察者和被觀察者
- 發(fā)布訂閱模式有三個角色:發(fā)布者、訂閱者以及中間人(發(fā)布訂閱中心)
從耦合程度看
- 觀察者模式處于一種松耦合的狀態(tài),即兩者依然有交互,但是又很容易各自擴展且不相互影響
- 發(fā)布訂閱模式中的發(fā)布者和訂閱者則完全不存在耦合,達到了對象之間解耦的效果
從意圖來看
- 兩者都:實現(xiàn)了對象間的一種一對多的依賴關系,當一個對象的狀態(tài)發(fā)生改變時,所有依賴于它的對象都將得到通知并自動更新
到此這篇關于用JS寫一個發(fā)布訂閱模式的文章就介紹到這了,更多相關JS寫一個發(fā)布訂閱模式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
jQuery單頁面文字搜索插件jquery.fullsearch.js的使用方法
jquery.fullsearch.js是一款基于Bootstrap文字搜索插件,可以幫助您快速搜索到當前頁面所包含的指定文字,并定位到所在位置2020-02-02
bigScreen大屏配置選項無法和畫布中心的展示聯(lián)動解決
這篇文章主要為大家介紹了bigScreen大屏配置選項無法和畫布中心的展示聯(lián)動解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01
詳解requestAnimationFrame和setInterval該如何選擇
這篇文章主要為大家介紹了requestAnimationFrame和setInterval該如何選擇示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-03-03

