二者工作原理&区别
观察者模式
- 如同实验进行的过程一般,观察者和被观察者(目标)是紧耦合的,如果目标一旦触发了事件,观察者就会立刻作出响应的举措。
发布订阅模式
- 发布者和订阅者二者之间存在一个中介,有点类似于你去app订阅喜欢的漫画一样,当漫画大大赶工出了新的一话并发布在了app上,app就会通知你:快来看漫画啦!
漫画大大和宅小吴之间是没有互动的,即发布者和订阅者之间是松耦合的。
区别
- 发布订阅模式比观察者模式多了一个调度中心;这个调度中心实现了解耦,且可以实现更细粒度的一些控制。(进行权限控制和节流操作)
- 观察者模式大多数时候是同步的,而发布-订阅模式大多数时候是异步的(使用消息队列)。
发布订阅模式的代码实现
- 需要有基本的订阅、取消订阅、发布的功能;
class PubSub {
constructor() {
this.subscribers = {}//订阅者初始化为空
//为{订阅种类type:[订阅者队列],...,}
}
sub(type,subscriber){//订阅
if(!Object.prototype.hasOwnProperty.call(this.subscribers, type)){
//若subscribers中无关于type的订阅信息,则为其创建一个订阅者列表
this.subscribers[type] = [];
}
this.subscribers[type].push(subscriber);
}
unSub(type,subscriber){//取消订阅
let subscribers=this.subscribers[type];
//如果并没有订阅这样type的人,那么就返回,不做处理
if (!subscribers || !subscribers.length) return;
//反之,将type对应订阅队列里的订阅者筛掉
else this.subscribers[type] = subscribers.filter(v => v !== subscriber);
}
pub(type,...args){//发布type对应的消息,并通知;
//可以同时发布多个消息;
let listeners = this.subscribers[type];
if (!listeners || !listeners.length) return;
listeners.forEach(fn => console.log(fn,...args));
}
}
let ob = new PubSub();
ob.sub('add', 'wkx');
ob.sub('add', 'yww');
ob.pub('add', 1);
ob.unSub('add','wkx');
ob.pub('add', 2);
console.log(ob.subscribers);
-
输出的效果为
-
因为没有太多时间学习更深层面的东西了,这里留个网址,以后学:比较难的版本