用JS寫一個釋出訂閱模式
目錄
- 1 場景引入
- 2 程式碼優化
- 2.1 解決增加粉絲問題
- 2.2 解決新增作品問題
- 3 觀察者模式
- 4 經紀人登場
- 5 釋出訂閱模式
- 6 觀察者模式和釋出訂閱模式的對比
什麼是釋出訂閱模式？能手寫實現一下嗎？它和觀察者模式有區別嗎？...
1 場景引入
我們先來看這麼一個場景：
假設現在有一個社交平臺，平臺上有一個大V叫Nami
Nami很牛，多才多藝，目前她有2個技能：會寫歌、會拍視訊
她會把這些作品釋出到平臺上。關注她的粉絲就會接收到這些內容
現在他已經有3個粉絲了，分別是：Luffy、Zoro、Sanji
每次只要Nami一發布作品，3個粉絲的賬號上收到的訊息就會更新
現在用程式碼來表示：
const luffy = {
update: function (songs,videos) {
console.log(songs,videos);
},};
const zoro = {
update: function (songs,};
const sanji = {
update: function (songs,};
const nami = {
// 只要Nami的作品一更新，這個方法就會被呼叫
workUpdate: function () {
// 獲取作品
const songs = this.getSongs();
const videos = this.getVideos();
// 賬號更新
luffy.update(songs,videos);
zoro.http://www.cppcns.com
現在問題來了
- 如果
Nami又收穫了一個粉絲Robin，我既要新增一個robin物件，又要修改workUpdate方法 - 如果
Nami又有了一項新技能：寫小說，我既要修改workUpdate函式，又要修改每個粉絲物件中的update方法，因為引數增加了一個
發現問題沒有？
粉絲物件和大V物件之間的耦合度太高，導致兩者很難各自擴充套件
2 程式碼優化
2.1 解決增加粉絲問題
先來解決上述第1個問題，使得增加粉絲的時候不用再修改workUpdate方法
首先，我們將“大V”抽象成一個類Star，用陣列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，我們在建立粉絲物件的時候傳入“大V”物件，呼叫該大V的addFans方法來新增到粉絲列表
class Fan {
constructor(name,star) {
this.name = name
this.star = star
this.star.addFans(this)
}
update(songs,videos);
}
}
現在我們新增粉絲就不必再更改程式碼了
const nami = new Star()
cvIYFXNonst 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陣列來儲存大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()}`)
}
}
現在大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);
nami.workUpdate();
3 觀察者模式
可以看到，在上述例子中，一個nami物件和多個粉絲物件之間存在著一種一對多的依賴關係，當nami物件有作品更新的時候，所有關注她的粉絲物件都會收到通知。
事實上，這就是觀察者模式
觀察者模式：定義物件間的一種一對多的依賴關係，當一個物件的狀態發生改變時，所有依賴於它的物件都得到通知並被自動更新
我們將2.2中的程式碼進行進一步的抽象：
將“粉絲”看作觀察者(Observer)，將“大V”看作被觀察的物件，稱為主題(Subject)
Subject維護一個觀察者列表observerList（原fans陣列）。當Subject的狀態發生變化（原作品更新）時，通過呼叫notify（原workUpdate）方法通知所有觀察者，執行它們的update方法
具體程式碼如下：
// 被觀察者：主題
class Subject {
constructor() {
this.observerList = [];
// 代表主題狀態
this.state = 0;
}
addObserver(observer) {
this.observerList.push(observer);
}
// 更改主題狀態
setState(state) {
this.state = state;
// 狀態改變後，通知所有觀察者
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業務繁忙，所以他們需要經紀人來維持藝人與粉絲的聯絡
經紀人的工作包括：
- 維護大V的粉絲，經紀人手中會有一個粉絲名單
- 大V的新作品會交給經紀人，經紀人則負責把新作品傳送給粉絲名單中的粉絲
抽象成一個類，如下：
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類中我們只寫了有關釋出（即釋出作品）和訂閱（即維護粉絲列表）的功能；而Star類本身可能不止這個工作，比如創作內容。
現在我們將Star類中的釋出和訂閱的工作抽離出來，交給Manager全權負責。而Star類只要在創作完成後把作品交給Manager就可以了
另一方面，粉絲Fan也不再直接和Star發生互動了，Fan只關心能不能收到作品，所以Fan直接和Manager發生互動，Fan去訂閱（這個行為相當於在Manager維護的粉絲列表中新增粉絲）Manager並從Manager那兒獲取想要的作品
於是Star和Fan的程式碼如下：
class Star {
constructor() {}
// 創作
create(manager) {
// 將創作的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 釋出訂閱模式
前面我們用了經紀人來負責釋出和訂閱的工作，而不讓Star和Fan發生直接互動，達到了兩者解耦的效果
這就是釋出訂閱模式
我們將4中的Manager進行進一步的抽象：
將“粉絲”看作訂閱者(Subscriber)；將“大V”看作內容的釋出者，在釋出訂閱模式中稱為釋出者(Publisher)；把“經紀人”看作釋出訂閱中心(或者說中間人Broker)
具體程式碼如下：
// 釋出訂閱排程中心
class Broker {
constructor() {
this.subscribers = [];
// 代表主題狀態
this.state = 0;
}
// 訂閱
subscribe(subscriber) {
this.subscribers.push(subscriber);
}
// 更改主題狀態
setState(state) {
this.state = state;
// 狀態改變後，釋出
this.publish();
}
getState() {
return this.state;
}
// 釋出
publish() {
this.subscribers.forEach((subscriber) => subscriber.update());
}
}
// 釋出者
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()}`);
}
}
來執行一下看看效果：
// 建立排程中心
const broker = new Broker()
// 建立釋出者
const publisher = new Publisher()
// 建立訂閱者
const subscribe1 = new Subscriber('s1',broker)
const subscribe2 = new Subscriber('s2',broker)
const subscribe3 = new Subscriber('s3',broker)
// 釋出者改變狀態並通知排程中心，排程中心就會通知各個訂閱者
publisher.changeState(broker,1)
6 觀察者模式和釋出訂閱模式的對比
從角色數量看
- 觀察者模式只有兩個角色：觀察者和被觀察者
- 釋出訂閱模式有三個角色：釋出者、訂閱者以及中間人（釋出訂閱中心）
從耦合程度看
- 觀察者模式處於一種鬆耦合的狀態，即兩者依然有互動，但是又很容易各自擴充套件且不相互影響
- 釋出訂閱模式中的釋出者和訂閱者則完全不存在耦合，達到了物件之間解耦的效果
從意圖來看
- 兩者都：實現了物件間的一種一對多的依賴關係，當一個物件的狀態發生改變時，所有依賴於它的物件都將得到通知並自動更新
到此這篇關於用寫一個釋出訂閱模式的文章就介紹到這了,更多相關JS寫一個釋出訂閱模式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！