这两个东西捋清楚需要点耐心。
房东—租客
,发布订阅模式类似于房东—中介—租客
,本文将围绕这两个模型来探讨实现。
观察者vs发布订阅
房东——用户
的这种关系模型,那我们就来想象一下,这个房东是某拆迁户,名下出租的房子有别墅(bigHouse)
、洋房(mediumHouse)
、平房(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());
}
}
别墅(bigHouse)
、洋房(medium)
和平房(small)
。// 不同的用户想关注别墅(big)、`洋房(medium)`...等不同的户型
const observerA = new Observer("bigHouse");
const observerB = new Observer("mediumHouse");
const observerC = new Observer("smallHouse");
// 把这3个观察者添加到相应的分组
const subjects = new Subject();
subjects.add("bigHouse", observerA);
subjects.add("mediumHouse", observerB);
subjects.add("smallHouse", observerC);
别墅组
的小伙伴们群发了一条消息,于是你就收到了推送;又某一天,洋房空了。。。// 某一天
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());
}
}
// 不同的用户想关注别墅(big)、`洋房(medium)`...等不同的户型
const observerA = new Observer("bigHouse");
const observerB = new Observer("mediumHouse");
const observerC = new Observer("smallHouse");
// 把这3个观察者添加到相应的分组
const subjects = new Subject();
subjects.add("bigHouse", observerA);
subjects.add("mediumHouse", observerB);
subjects.add("smallHouse", observerC);
// 某一天
subjects.fire("bigHouse"); // 收到一条房东的消息,bigHouse空了!!!
// 又某一天
subjects.fire("mediumHouse"); // 收到一条房东的消息,mediumHouse空了!!!
// 再某一天
subjects.fire("smallHouse"); // 收到一条房东的消息,smallHouse空了!!!
(1)理解
房东—租客
这种模型以后,你会发现,如果观察者很多,那么房东压力还是挺大的,比如收钱的压力。房东—中介—租客
的这种发布订阅模式。(2)实践
中介机构
:class EventBus {
constructor() {
// 定义事件池
// 数据结构应该长这样:{<事件队列名>:<要执行的事件队列>}
// {'buy': ['func1','func2','func3']}
this.events = {};
}
/**
* 订阅
* @param {事件队列名} name
* @param {事件函数} func
*/
on(name, func) {
if (!this.events[name]) {
this.events[name] = [];
}
this.events[name].push(func);
}
/**
* 发布
* @param {事件队列名} args
* @param {传入参数} args
*/
emit(name, ...args) {
if (!this.events[name]) {
return;
}
this.events[name].forEach(item => {
item.apply(this, args);
});
}
/**
* 删除
* @param {事件队列名} args
*/
remove(name) {
if (this.events[name]) {
delete this.events[name];
}
}
}
租客
通过中介机构根据自己的需要订阅了不同的房型。// 实例化
const bus = new EventBus();
// 不同租客订阅了不同需求房型
bus.on("bigHouse", function (value) {
console.log(`A收到了一条消息:${value}`);
});
bus.on("mediumHouse", function (value) {
console.log(`B收到了一条消息:${value}`);
});
bus.on("smallHouse", function (value) {
console.log(`C收到了一条消息:${value}`);
});
房东
就直接通过中介发消息了,说:// 某天房东通过中介发布了一条消息
bus.emit("bigHouse", "别墅有房了"); // A收到了一条消息:别墅有房了
// 又某一天
bus.emit("mediumHouse", "洋房有房了"); // B收到了一条消息:洋房有房了
// 再某一天。。。。
bus.emit("smallHouse", "小平层有房了"); // C收到了一条消息:小平层有房了
class EventBus {
constructor() {
// 定义事件池
// 数据结构应该长这样:{<事件队列名>:<要执行的事件队列>}
// {'say': ['func1','func2','func3']}
this.events = {};
}
/**
* 订阅
* @param {事件队列名} name
* @param {事件函数} func
*/
on(name, func) {
if (!this.events[name]) {
this.events[name] = [];
}
this.events[name].push(func);
}
/**
* 发布
* @param {事件队列名} args
* @param {传入参数} args
*/
emit(name, ...args) {
if (!this.events[name]) {
return;
}
this.events[name].forEach((item) => {
item.apply(this, args);
});
}
/**
* 删除
* @param {事件队列名} args
*/
remove(name) {
if (this.events[name]) {
delete this.events[name];
}
}
}
const bus = new EventBus();
// 不同租客订阅了不同需求房型
bus.on("bigHouse", function (value) {
console.log(`A收到了一条消息:${value}`);
});
bus.on("mediumHouse", function (value) {
console.log(`B收到了一条消息:${value}`);
});
bus.on("smallHouse", function (value) {
console.log(`C收到了一条消息:${value}`);
});
// 某天房东通过中介发布了一条消息
bus.emit("bigHouse", "别墅有房了"); // A收到了一条消息:别墅有房了
// 又某一天
bus.emit("mediumHouse", "洋房有房了"); // B收到了一条消息:洋房有房了
// 再某一天。。。。
bus.emit("smallHouse", "小平层有房了"); // C收到了一条消息:小平层有房了
回顾一下,从这个例子就可可以看到:
EventBus
这个就是相当于扮演了中介机构
的角色。emit发布
就相当于是房东
。房东不定时随机的发布消息,说某某套房子空了。on订阅
就相当于是房客
,订阅某个户型的事件了以后就可以实时收到该户型的通知。中介结构
这一环,通过这个机构,房东和房客之间的沟通更加的顺畅了,也就是两者之间松耦合
,这样的话,我们开发的时候可以将中介结构
抽离成为了一个单独的文件,这样使得业务逻辑更加清晰,维护起来也更加的区别。不管这两者模式是相同还是不同的,这个我觉得是最主要的区别。参考学习: https://juejin.im/post/5a14e9edf265da4312808d86 https://molunerfinn.com/observer-vs-pubsub-pattern https://juejin.im/post/5bb1bb616fb9a05d2b6dccfa https://juejin.im/post/57de12355bbb50005e648bd8