(1)是什么?
- 观察者模式:观察者与被观察者直接通信,被观察者发生变化时,会直接通着观察者更新,即调用观察者的一些方法实现观察者的更新操作,是一种一对多的模式。
/*
观察者模式
实现:被观察者和观察者分别由两个类表示。
被观察者类拥有添加观察者实例的方法以及通知观察者更新的方法,
观察者类拥有更新方法。
**/
function Subject () {
this.observers = [];
this.addOb = function(ob) {
this.observers.push(ob);
}
this.notify = function() {
this.observers.forEach(ob => {
if (typeof ob.update === 'function') {
ob.update();
}
});
}
return this;
}
function Observer(name) {
this.name = name;
this.update = function() {
console.log(this.name + 'update function is triggered');
}
}
const sub = new Subject();
const ob1 = new Observer('ob1');
const ob2 = new Observer('ob2');
sub.addOb(ob1);
sub.addOb(ob2);
sub.notify();
- 发布-订阅者模式:发布者和订阅者不会进行直接通信,而是通过一个中间件——事件通道(event channel)来实现二者之间的消息传递,这也是这两种模式之间最大的区别。该模式将消息分为不同的话题(topic),只有订阅的话题发生更新时,订阅者才会接收到更新通知,也是一种一对多的模式。
/*
发布者-订阅者模式
定义发布者和订阅者两个类。
发布者类拥有存储分类主题的对象以及发布和订阅的方法,订阅者类拥有更新的方法。
**/
function Publisher() {
// 存储分类的主题
this.topic= {};
// 订阅某个主题
this.subscribe = function(type, fun) {
if (!this.topic[type]) {
this.topic[type] = [];
}
this.topic[type].push(fun);
}
// 发布某个主题的信息
this.publish = function(type) {
if (Object.prototype.toString.call(this.topic[type]) === '[object Array]') {
this.topic[type].forEach(f => f(type));
}
}
return this;
}
function Subscriber(type) {
this.type = type;
return this;
}
const publisher = new Publisher();
const subcriber1 = new Subscriber('news');
const subcriber2 = new Subscriber('reading');
publisher.subscribe(subcriber1.type, (type) => {
console.log(type + 'subscribe is update')
});
publisher.subscribe(subcriber2.type, (type) => {
console.log(type + ' publish is update');
});
publisher.publish('news');
publisher.publish('reading');
(2)为什么?
- 观察者模式,被观察者与观察直接通信,所有的通信逻辑均在被观察者对象上,会造成被观察者代码冗余,逻辑复杂。此外,只要被观察者发生更新,无论是不是观察者关注的信息,均会导致观察者触发更新操作。要避免这种情况,就必须的在被观察者内部添加逻辑,从而进一步导致观察者逻辑复杂。
- 发布者-订阅者模式,其采用中间件(event channel)将发布者与订阅者隔离且联系起来,即在观察者模式的基础上,其将被观察者与观察者进行逻辑上的解耦,更加符合了高内聚低耦合的开发原则。此外,订阅者仅仅会受到相关订阅信息的更新。
(3)怎么用、应用场景?
相关状态管理的方案,均采用了发布者-订阅者的设计模式。如:vuex、redux、dva等。