简单捋捋。
1、观察者vs发布订阅
首先观察者跟发布订阅这两者虽然看起来很相似，但是两者是有差异的，至少从实现方式上就有差异，具体文末有总结。
其次，虽然两者有差异，但是说发布订阅模式是观察者模式的变异我觉得也是ok的，因为它们思想上是一致的。
-
最后，为了方便更好的捋清楚这两种模式，我们做个类比，将观察者模式类比于
房东—租客，发布订阅模式类比于房东—中介—租客，本文将围绕这两个模型来探讨理解。
观察者vs发布订阅 下面我们就用结合代码来谈谈。
2、观察者模式
既然我们把观察者模式类比为
房东——租客的这种关系模型，那我们就来想象一下，这个房东是某拆迁户，名下出租的房子有大（bigHouse）、中（mediumHouse）、小（smallHouse)这三种户型出租，他微信加了有很多不同租房需求的租客（观察者），房东时不时的会向租房推些租房信息，这些是前言。那首先我们来定义一下
租客：
class Observer {
constructor(subject) {
this.subject = subject;
}
notify() {
console.log(`对${this.subject}感兴趣的你收到一条房东的消息`);
}
}
// 有ABC...等不同的租客对不同的房型感兴趣
const observerA = new Observer("bigHouse"); // 我对超大house感兴趣
const observerB = new Observer("mediumHouse"); // 我求个中等
const observerC = new Observer("smallHouse"); // 我穷逼。。。
- 然后我们需要描述下
房东：
class Subject {
// 根据户型的不同收集相应的订阅者
constructor() {
this.subjectList = {};
}
// 订阅
add(subject, observer) {
if (!this.subjectList[subject]) {
this.subjectList[subject] = [];
}
this.subjectList[subject].push(observer);
}
// 通知
fire(subject) {
this.subjectList[subject].forEach((item) => item.notify());
}
// 解除订阅
remove(subject, observer) {
this.subjectList[subject].forEach((item, index) => {
if (item === observer) {
this.subjectList[subject].splice(index, 1);
}
});
}
}
// 先new个房东吧
const subjects = new Subject();
// 房东在加ABC微信的时候就对他们分好了组：
subjects.add("bigHouse", observerA);
subjects.add("mediumHouse", observerB);
subjects.add("smallHouse", observerC);
- 某一天，大型房
bigHouse空了，于是房东对bigHouse组的租客们群发了一条消息，于是A就收到了推送；又某一天，中型房mediumHouse空了。。。
// 某一天
subjects.fire("bigHouse"); // 对bigHouse感兴趣的你收到一条房东的消息
// 又某一天
subjects.fire("mediumHouse"); // 对mediumHouse感兴趣的你收到一条房东的消息
// 再某一天
subjects.fire("smallHouse"); // 对smallHouse感兴趣的你收到一条房东的消息
- 这就是观察者模式，完整代码如下：
class Observer {
constructor(subject) {
this.subject = subject;
}
notify() {
console.log(`对${this.subject}感兴趣的你收到一条房东的消息`);
}
}
class Subject {
// 根据户型的不同收集相应的订阅者
constructor() {
this.subjectList = {};
}
// 订阅
add(subject, observer) {
if (!this.subjectList[subject]) {
this.subjectList[subject] = [];
}
this.subjectList[subject].push(observer);
}
// 解除订阅
remove(subject, observer) {
this.subjectList[subject].forEach((item, index) => {
if (item === observer) {
this.subjectList[subject].splice(index, 1);
}
});
}
// 触发事件
fire(subject) {
this.subjectList[subject].forEach((item) => item.notify());
}
}
// 有ABC...等不同的租客对不同的房型感兴趣
const observerA = new Observer("bigHouse"); // 我对超大house感兴趣
const observerB = new Observer("mediumHouse"); // 我求个中等
const observerC = new Observer("smallHouse"); // 我穷逼。。。
// 先new个房东吧
const subjects = new Subject();
// 房东在加ABC微信的时候就对他们分好了组：
subjects.add("bigHouse", observerA);
subjects.add("mediumHouse", observerB);
subjects.add("smallHouse", observerC);
// 某一天
subjects.fire("bigHouse"); // 对bigHouse感兴趣的你收到一条房东的消息
// 又某一天
subjects.fire("mediumHouse"); // 对mediumHouse感兴趣的你收到一条房东的消息
// 再某一天
subjects.fire("smallHouse"); // 对smallHouse感兴趣的你收到一条房东的消息
3、发布订阅模式
（1）理解
- 当你了解了观察者模式
房东—租客这种模型以后，你会发现，如果观察者很多，那么房东压力还是挺大的，比如收钱的压力。 - 这个时候，房东每天签合同、收房租跑断腿，不堪其扰，于是就去拜托中介，交给中介打理省心，于是就有了类似于
房东—中介—租客的这种发布订阅模式。
（2）实践
- 首先我们需要定义一下
中介机构：
class EventBus {
constructor() {
// 定义事件池
// 数据结构应该长这样：{<某主题>:<该主题下要执行的事件队列>}
// {'subject': ['func1','func2','func3']}
this.events = {};
}
/**
* 订阅
* @param {主题} subject
* @param {主题相关函数} func
*/
on(subject, func) {
if (!this.events[subject]) {
this.events[subject] = [];
}
this.events[subject].push(func);
}
/**
* 发布
* @param {主题} subject
*/
emit(subject) {
if (!this.events[subject]) {
return;
}
this.events[subject].forEach((item) => {
item(); // 执行该主题下与之相关的函数队列
});
}
/**
* 删除
* @param {主题} subject
*/
remove(subject) {
if (this.events[subject]) {
delete this.events[subject];
}
}
}
- 然后
租客通过中介机构根据自己的需要订阅了不同的房型。
// 先new个中介出来：
const bus = new EventBus();
// 不同租客订阅了不同需求房型
bus.on("bigHouse", function () {
console.log("对bigHouse感兴趣的你收到一条房东的消息");
});
bus.on("mediumHouse", function () {
console.log("对mediumHouse感兴趣的你收到一条房东的消息");
});
bus.on("smallHouse", function () {
console.log("对smallHouse感兴趣的你收到一条房东的消息");
});
- 此后，
房东就直接通过中介发通知了：
// 某天房东通过中介发布了一条消息
bus.emit("bigHouse"); //对bigHouse感兴趣的你收到一条房东的消息
// 又某一天
bus.emit("mediumHouse"); // 对mediumHouse感兴趣的你收到一条房东的消息
// 再某一天。。。。
bus.emit("smallHouse"); // 对smallHouse感兴趣的你收到一条房东的消息
- 完整代码如下：
class EventBus {
constructor() {
// 定义事件池
// 数据结构应该长这样：{<某主题>:<该主题下要执行的事件队列>}
// {'subject': ['func1','func2','func3']}
this.events = {};
}
/**
* 订阅
* @param {主题} subject
* @param {主题相关函数} func
*/
on(subject, func) {
if (!this.events[subject]) {
this.events[subject] = [];
}
this.events[subject].push(func);
}
/**
* 发布
* @param {主题} subject
*/
emit(subject) {
if (!this.events[subject]) {
return;
}
this.events[subject].forEach((item) => {
item(); // 执行该主题下与之相关的函数队列
});
}
/**
* 删除
* @param {主题} subject
*/
remove(subject) {
if (this.events[subject]) {
delete this.events[subject];
}
}
}
const bus = new EventBus();
// 不同租客订阅了不同需求房型
bus.on("bigHouse", function () {
console.log("对bigHouse感兴趣的你收到一条房东的消息");
});
bus.on("mediumHouse", function () {
console.log("对mediumHouse感兴趣的你收到一条房东的消息");
});
bus.on("smallHouse", function () {
console.log("对smallHouse感兴趣的你收到一条房东的消息");
});
// 某天房东通过中介发布了一条消息
bus.emit("bigHouse"); //对bigHouse感兴趣的你收到一条房东的消息
// 又某一天
bus.emit("mediumHouse"); // 对mediumHouse感兴趣的你收到一条房东的消息
// 再某一天。。。。
bus.emit("smallHouse"); // 对smallHouse感兴趣的你收到一条房东的消息
从这个例子就可以看到：
-
EventBus：扮演了中介机构的角色。 -
Emit：房东通过中介来发布消息。 -
On：租客通过中介来订阅消息。
4、小结
- 通过上面这些示例，两者之间最大的区别就是
中介结构这一环，通过这个机构，房东和房客之间的沟通更加的顺畅了，也就是两者之间松耦合，这样的话，我们开发的时候可以将中介结构抽离成为了一个单独的文件，这样使得业务逻辑更加清晰，维护起来也更加的区别。这个我觉得是最主要的区别。 - 其它的区别我这里直接引用这篇文章的小结概况一下吧，我觉得总结还是比较到位的：
- 在观察者模式中，观察者是知道Subject的，Subject一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。
- 在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。
- 观察者模式大多数时候是同步的，比如当事件触发，Subject就会去调用观察者的方法；而发布-订阅模式大多数时候是异步的（使用消息队列）。
- 当然，以上这些都是我自己的理解，欢迎交流。
参考学习：
https://juejin.im/post/5a14e9edf265da4312808d86
https://molunerfinn.com/observer-vs-pubsub-pattern
https://juejin.im/post/5bb1bb616fb9a05d2b6dccfa
https://juejin.im/post/57de12355bbb50005e648bd8
