【设计模式】发布订阅模式，构建可以接收历史消息的观察者类

什么是发布订阅模式？

发布订阅模式也被称为观察者模式，这个模式中有两种角色：发布者（被观察者） 和 订阅者（观察者）。

通常的操作是：订阅者订阅发布者的某一个事件，发布者接收到这个事件变化的时候，通知所有的订阅者。

举个栗子：你在微信中关注了一个公众号，这个公众号在更新文章的时候，微信会将新的文章推送到你的微信消息中，公众号是发布者，你的微信号是订阅者。

你可以关注多个公众号，公众号也可以有多个粉丝。

一个简单的观察者类

class Observer {/*** 事件队列*/static events = {};/*** 订阅* @param {*} topic* @param {*} callback*/static subscribe(topic, callback) {if (!Observer.events[topic]) {Observer.events[topic] = [];}Observer.events[topic].push(callback);return () => {const index = Observer.events[topic].findIndex((item) => item === callback);Observer.events[topic].splice(index, 1);};}/*** 发布* @param {*} topic* @param  {*} data*/static publish(topic, data) {if (Observer.events[topic]) {Observer.events[topic].forEach((fn) => {fn(data);});} else {console.error(`topic [${topic}] is empty!`);}}
}

订阅消息：

// 订阅消息
const unsubscribe = Observer.subscribe("update", (data) => {console.log(data);
});// 取消订阅
unsubscribe();

发布消息：

Observer.publish("update", 1);

可以接收历史消息的观察者类

上面的观察者无法接收历史消息，如果一个消息在未订阅时就已经发布，那么这条消息就会被漏掉。

一个可能的场景是：在一个页面中，需要在导航栏中展示用户信息，用户信息需要通过网络请求来获取，获取到后通过 Observer.publish() 方法发布，导航栏通过 Observer.subscribe() 方法来获取用户信息及回调。

这个场景中如果用户信息已经获取，但是导航栏组件还未加载，这种情况下导航栏就再也拿不到用户信息了。

解决方案就是维护一个历史消息列表，在调用 Observer.subscribe() 订阅消息时如果有历史消息则立即触发回调。

class Observer {/*** 历史消息*/static history = {};/*** 事件队列*/static events = {};/*** 订阅* @param {*} topic* @param {*} callback*/static subscribe(topic, callback) {if (!Observer.events[topic]) {Observer.events[topic] = [];}Observer.events[topic].push(callback);// 如果有历史消息if (Observer.history[topic]) {callback(Observer.history[topic]);}return () => {const index = Observer.events[topic].findIndex((item) => item === callback);Observer.events[topic].splice(index, 1);};}/*** 发布* @param {*} topic* @param  {...any} args*/static publish(topic, data) {if (Observer.events[topic]) {Observer.events[topic].forEach((fn) => {fn(data);});}if (!Observer.history[topic]) {Observer.history[topic] = [];}// 保存历史消息Observer.history[topic].push(data);}
}

可以先发布后订阅：

Observer.publish("update", 222);
Observer.publish("update", 333);const unsubscribe = Observer.subscribe("update", (data) => {if (Array.isArray(data)) {// 历史消息列表} else {// 最新消息}console.log(data);
});Observer.publish("update", 444);