设计模式~观察者模式和发布订阅模式的区别
1,简单区分:,
- 观察者模式:观察者+被观察者 (观察者与被观察者~紧耦合) 被观察者更新内容后,直接通知观察者
- 发布订阅模式:订阅者+ 经纪人(中间人) + 被订阅者(观察者与被观察者~完全不耦合),被订阅者更新内容后,是先通知经纪人,经纪人再发布给订阅者。
2,设计模式解析+举例子:
观察者模式:微博大V(被观察者)内部创建有一个粉丝集合(存放观察者),这里对于粉丝需要先注册该大V(才能成为该大V的粉丝,即与该大V建立联系),
然后两者之间有联系后,大V再发布微博,就会将更新状态直接通知粉丝。
✿ 观察者模式的设计:在被观察者内部创建有一个存放观察者的集合(外部的观察者通过注册,被存放进该观察者集合),一旦有消息更新,被观察者,
只需要调用一个方法,就可以直接通知到所有的观察者。
观察者模式代码示例:
// 观察者
class Observer {
constructor() {
}
update(val) {
}
}
// 观察者列表
class ObserverList {
constructor() {
this.observerList = []
}
add(observer) {
return this.observerList.push(observer);
}
remove(observer) {
this.observerList = this.observerList.filter(ob => ob !== observer);
}
count() {
return this.observerList.length;
}
get(index) {
return this.observerList[index];
}
}
// 目标
class Subject {
constructor() {
this.observers = new ObserverList();
}
addObserver(observer) {
this.observers.add(observer);
}
removeObserver(observer) {
this.observers.remove(observer);
}
notify(...args) {
let obCount = this.observers.count();
for (let index = 0; index < obCount; index++) {
this.observers.get(i).update(...args);
}
}
}
发布订阅模式:之前是大V将消息直接发送给所有粉丝,但是消息有好消息跟坏消息,粉丝有黑粉真粉,为了消息更好的被接收,获取到更多的利益,
大V选择了一个经纪人(broker),经纪人通过分类,将大V 的内容划分成不同的主题,提供给不同粉丝选择。(订阅者实现一种多样化选择)
✿ 发布订阅模式的设计:被订阅者内部有一个经纪人,在经纪人内部有存放根据类型划分的粉丝集合对象 {对象的元素可以是类型粉丝数组}
发布订阅模式代码示例:
/*发布者(经纪人)*/
class PubSub {
constructor() {
//存放类型粉丝的对象
this.subscribers = {}
}
subscribe(type, fn) {
//判断 subscribers[type]是否存在
if (!Object.prototype.hasOwnProperty.call(this.subscribers, type)) {
this.subscribers[type] = [];
}
this.subscribers[type].push(fn);
}
unsubscribe(type, fn) {
let listeners = this.subscribers[type];
if (!listeners || !listeners.length) return;
this.subscribers[type] = listeners.filter(v => v !== fn);
}
publish(type, ...args) {
let listeners = this.subscribers[type];
if (!listeners || !listeners.length) return;
listeners.forEach(fn => fn(...args));
}
}
let ob = new PubSub();
ob.subscribe('add', (val) => console.log(val));
ob.publish('add', 1);
作者:一乐乐