通过两个例子来理解二者的区别:
1. 微博订阅
A用户订阅了张三,B用户订阅李四,C用户订阅了王五等等,此时张三、李四、王五他们发布动态的话,对应订阅他们的人都能分别能收到消息,他们是多对多的关系。
2. 天气预报订阅
A用户、B用户、C用户等等都订阅了天气预报,天气预报就会把最新的动态发布到这些订阅的人那里,他们是一对多的关系。
发布订阅代码示例:
class EventBus {
constructor() {
this.eventObj = {};
}
on(key, callback) {
this.eventObj[key] = this.eventObj[key] || [];
this.eventObj[key].push(callback)
}
emit(key, ...arg) {
const cbs = this.eventObj[key];
cbs.forEach(cb => cb(...arg))
}
}
const eb = new EventBus();
eb.on('key1', params => {
console.log(params)
});
eb.emit('key1', '张三')
eb.on('key2', params => {
console.log(params)
});
eb.emit('key2', '李四')
观察者模式代码示例:
// 订阅
class Subscribe {
constructor() {
this.obervers = [];
}
addObervers(oberver) {
this.obervers.push(oberver);
}
notityObervers(params) {
this.forEach(oberver => {
overver.update(params)
})
}
}
const subscribe = new Subscribe();
// 观察者
class Obersver {
consstructor(weather) {
this.wea = weather;
}
update(params) {
conssole.log(this.wea + params)
}
}
const obersver1 = new Obersver('观察者1');
const obersver2 = new Obersver('观察者2');
subscribe.addObervers(obersver.update);
subscribe.notityObervers('今天是个好天气!!');