持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情
前言
上一篇文章中我们聊到了观察者模式，这里我们先回忆一下观察者模式的概念，就是观察者和观察者之后的动态关联。很多小伙伴可能跟我当初的想法是一样的，发布订阅模式跟观察者模式是一样的，两者之间只是名称不同而已。
是吗？
答案当然是否定的。发布订阅模式只是跟观察者模式感觉上相似而已，实际上两者是不同的。
好的，下面我们就来一起看一下发布订阅模式到底有什么不同。
概念
发布-订阅模式中，发布者不再维护订阅者清单，而是维护订阅（即通知事件本身），通过消息发布时调用所有的订阅（通知事件），达到通知订阅者的目的。
通过这里我们其实可以发现，发布订阅模式与观察者之间最大的区别在于发布订阅模式多了个调度中心，观察者与被观察者之间不再直接进行交互，而是通过调度中心进行中转。
实战
光说不练假把式，我们就来看一下具体的发布订阅模式的代码。
我们先来了解一下背景故事。
小王同学最近想要买一个英雄联盟2022年的冠军皮肤，但是，这款冠军皮肤还没有出来。所以小王同学就订阅了英雄联盟的活动消息提醒，一旦冠军皮肤活动上线之后就立马入手一款。
小李同学是比较务实的，最近英雄联盟即将上线全球总决赛的助威活动，通过参与活动可以获得英雄皮肤折扣券。为了以更低的价格入手一款心仪的英雄皮肤，小李同学也订阅了英雄联盟的活动消息提醒，等着助威活动一开启就立马参与活动，早日入手自己喜欢的皮肤。
ok，下面我们就用代码来模拟一下。
// 调度中心
class NoticeCenter {
constructor() {
this.observerList = [];
}
subscribe(observer, value) {
this.observerList.push({
observer,
value,
});
}
notice(value) {
this.observerList
.filter(observer => observer.value === value)
.forEach(observer => {
observer.observer.update(value);
});
}
}
const noticeCenter = new NoticeCenter();
class Subscribe {
constructor(name) {
this.name = name;
}
update(value) {
console.log(value);
}
}
const xiaoWang = new Subscriber('小王');
const xiaoLi = new Subscribe('小李');
// 小王订阅冠军皮肤活动
noticeCenter.subscribe(xiaowang, 'champion');
// 小李订阅总决赛助威活动
noticeCenter.subscribe(xiaoLi, 'discount');
// 通知用户冠军皮肤上线了
noticeCenter.notice('champion');
// 通知用户总决赛助威活动开始了
noticeCenter.notice('discount');
相信大家看完这个例子之后，对于发布订阅模式有了更深入的了解。
大家所熟悉的Vue2底层的响应式更新应用的就是发布订阅模式，data数据和更新以Watch为纽带进行连接。
总结
总结一下，发布订阅模式的最大特点就是调度中心，观察者和被观察者互不相识，通过调度中心进行交互。发布订阅模式相对于观察者模式的优势就是实现了完全解耦。
好了，有关发布订阅模式的内容我们就聊到这里了，希望对大家有所帮助。
欢迎大家在下方进行留言交流。
