用JS寫(xiě)一個(gè)發(fā)布訂閱模式

更新時(shí)間：2021年11月05日 11:05:38 作者：蜜瓜

這篇文章主要介紹如何用JS寫(xiě)一個(gè)發(fā)布訂閱模式，什么是發(fā)布訂閱模式？能手寫(xiě)實(shí)現(xiàn)一下嗎？它和觀察者模式有區(qū)別嗎？帶著疑惑一起解開(kāi)下面文章的內(nèi)容吧

1 場(chǎng)景引入

我們先來(lái)看這么一個(gè)場(chǎng)景：

假設(shè)現(xiàn)在有一個(gè)社交平臺(tái)，平臺(tái)上有一個(gè)大V叫Nami

Nami很牛，多才多藝，目前她有2個(gè)技能：會(huì)寫(xiě)歌、會(huì)拍視頻

她會(huì)把這些作品發(fā)布到平臺(tái)上。關(guān)注她的粉絲就會(huì)接收到這些內(nèi)容

現(xiàn)在他已經(jīng)有3個(gè)粉絲了，分別是：Luffy、Zoro、Sanji

每次只要Nami一發(fā)布作品，3個(gè)粉絲的賬號(hào)上收到的消息就會(huì)更新

現(xiàn)在用代碼來(lái)表示：

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的作品一更新，這個(gè)方法就會(huì)被調(diào)用
  workUpdate: function () {
    // 獲取作品
    const songs = this.getSongs();
    const videos = this.getVideos();

    // 賬號(hào)更新
    luffy.update(songs, videos);
    zoro.update(songs, videos);
    sanji.update(songs, videos);
  },
  getSongs: function () {
    return "mp3";
  },
  getVideos: function () {
    return "mp4";
  },
};

現(xiàn)在問(wèn)題來(lái)了

如果Nami又收獲了一個(gè)粉絲Robin，我既要添加一個(gè)robin對(duì)象，又要修改workUpdate方法
如果Nami又有了一項(xiàng)新技能：寫(xiě)小說(shuō)，我既要修改workUpdate函數(shù)，又要修改每個(gè)粉絲對(duì)象中的update方法，因?yàn)閰?shù)增加了一個(gè)

發(fā)現(xiàn)問(wèn)題沒(méi)有？

粉絲對(duì)象和大V對(duì)象之間的耦合度太高，導(dǎo)致兩者很難各自擴(kuò)展

2 代碼優(yōu)化

2.1 解決增加粉絲問(wèn)題

先來(lái)解決上述第1個(gè)問(wèn)題，使得增加粉絲的時(shí)候不用再修改workUpdate方法

首先，我們將“大V”抽象成一個(gè)類Star，用數(shù)組fans來(lái)保存粉絲列表，并新增一個(gè)添加粉絲的方法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";
  }
}

接著，將“粉絲”也抽象成一個(gè)類Fan，我們?cè)趧?chuàng)建粉絲對(duì)象的時(shí)候傳入“大V”對(duì)象，調(diào)用該大V的addFans方法來(lái)添加到粉絲列表

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 解決添加作品問(wèn)題

我們新增一個(gè)works數(shù)組來(lái)保存大V的作品，并且為其添加get和set方法

class Star {
  constructor() {
    this.fans = [];
    this.works = [];
  }
  addFans(fan) {
    this.fans.push(fan);
  }
  setWorks(work) {
    this.works.push(work);
    // 添加作品后，調(diào)用更新方法
    this.workUpdate();
  }
  getWorks() {
    return this.works;
  }
  workUpdate() {
    this.fans.forEach((item) => item.update());
  }
}

對(duì)類Fan進(jìn)行相應(yīng)修改:

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 觀察者模式

可以看到，在上述例子中，一個(gè)nami對(duì)象和多個(gè)粉絲對(duì)象之間存在著一種一對(duì)多的依賴關(guān)系，當(dāng)nami對(duì)象有作品更新的時(shí)候，所有關(guān)注她的粉絲對(duì)象都會(huì)收到通知。

事實(shí)上，這就是觀察者模式

觀察者模式：定義對(duì)象間的一種一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對(duì)象都得到通知并被自動(dòng)更新

我們將2.2中的代碼進(jìn)行進(jìn)一步的抽象：

將“粉絲”看作觀察者(Observer)，將“大V”看作被觀察的對(duì)象，稱為主題(Subject)

Subject維護(hù)一個(gè)觀察者列表observerList（原fans數(shù)組）。當(dāng)Subject的狀態(tài)發(fā)生變化（原作品更新）時(shí)，通過(guò)調(diào)用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 經(jīng)紀(jì)人登場(chǎng)

由于大V業(yè)務(wù)繁忙，所以他們需要經(jīng)紀(jì)人來(lái)維持藝人與粉絲的聯(lián)系

經(jīng)紀(jì)人的工作包括：

維護(hù)大V的粉絲，經(jīng)紀(jì)人手中會(huì)有一個(gè)粉絲名單
大V的新作品會(huì)交給經(jīng)紀(jì)人，經(jīng)紀(jì)人則負(fù)責(zé)把新作品發(fā)送給粉絲名單中的粉絲

抽象成一個(gè)類，如下：

class Manager {
  constructor() {
    this.fans = [];
    this.works = [];
  }
  addFans(fan) {
    this.fans.push(fan);
  }
  setWorks(work) {
    this.works.push(work);
    // 添加作品后，調(diào)用更新方法
    this.workUpdate();
  }
  getWorks() {
    return this.works;
  }
  workUpdate() {
    this.fans.forEach((item) => item.update());
  }
}

嗯？這段代碼貌似在哪兒見(jiàn)過(guò)？

沒(méi)錯(cuò)，和2.2的Star類一模一樣，只不過(guò)把類名改了改。

那這么做有意義嗎？

事實(shí)上，代碼一模一樣是因?yàn)樵?.2的Star類中我們只寫(xiě)了有關(guān)發(fā)布（即發(fā)布作品）和訂閱（即維護(hù)粉絲列表）的功能；而Star類本身可能不止這個(gè)工作，比如創(chuàng)作內(nèi)容。

現(xiàn)在我們將Star類中的發(fā)布和訂閱的工作抽離出來(lái)，交給Manager全權(quán)負(fù)責(zé)。而Star類只要在創(chuàng)作完成后把作品交給Manager就可以了

另一方面，粉絲Fan也不再直接和Star發(fā)生交互了，F(xiàn)an只關(guān)心能不能收到作品，所以Fan直接和Manager發(fā)生交互，F(xiàn)an去訂閱（這個(gè)行為相當(dāng)于在Manager維護(hù)的粉絲列表中添加粉絲）Manager并從Manager那兒獲取想要的作品

于是Star和Fan的代碼如下：

class Star {
  constructor() {}
  // 創(chuàng)作
  create(manager) {
    // 將創(chuàng)作的new work交給經(jīng)紀(jì)人
    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ā)布訂閱模式

前面我們用了經(jīng)紀(jì)人來(lái)負(fù)責(zé)發(fā)布和訂閱的工作，而不讓Star和Fan發(fā)生直接交互，達(dá)到了兩者解耦的效果

這就是發(fā)布訂閱模式

我們將4中的Manager進(jìn)行進(jìn)一步的抽象：

將“粉絲”看作訂閱者(Subscriber)；將“大V”看作內(nèi)容的發(fā)布者，在發(fā)布訂閱模式中稱為發(fā)布者(Publisher)；把“經(jīng)紀(jì)人”看作發(fā)布訂閱中心(或者說(shuō)中間人Broker)

具體代碼如下：

// 發(fā)布訂閱調(diào)度中心
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()}`);
  }
}

來(lái)運(yùn)行一下看看效果：

// 創(chuàng)建調(diào)度中心
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)并通知調(diào)度中心，調(diào)度中心就會(huì)通知各個(gè)訂閱者
publisher.changeState(broker, 1)