本文已参与「新人创作礼」活动，一起开启掘金创作之路。
关键词：Observable-Observer EventEmitter-EventListener
什么是观察者模式
定义：在对象之间定义一对多的依赖，当一个对象状态改变的时候，所有依赖的对象都会自动收到通知。
类比到生活中，就像是为了逃避城管的小摊贩，每天出摊的时候就在朋友圈或者微信群里发一句：今天在 xxx 出摊。
我们先来看一个观察者模式的简单实现:
// 摊主
const shop = {
// 微信群友
observers: [],
// 进微信群
subscribe: function (fn) {
this.observers.push(fn)
},
// 发布消息
notify: function () {
this.observers.forEach(fn => fn.apply(this, arguments))
}
};
// 小k 进群
shop.subscribe((address) => {
console.log(`小k: 今天在${address}出摊。`);
});
// 大D 进群
shop.subscribe((address) => {
console.log(`大D: 今天在${address}出摊。`);
});
shop.notify('人民广场');
shop.notify('提篮桥');
// 小k: 今天在人民广场出摊。
// 大D: 今天在人民广场出摊。
// 小k: 今天在提篮桥出摊。
// 大D: 今天在提篮桥出摊。
将上面这段代码梳理下业务逻辑，如图示：
在观察者模式中有两个主要角色：Observable（观察对象）和 Observer（观察者）。
- 观察者监听观察对象
- 观察对象的状态发生变化时就会通知所有的观察者
- 观察者更新自己
整个过程里，观察对象负责监视事件，观察者负责处理收到的数据。
- Observable 观察对象
- observers 观察者列表
- subscribe 注册
- unsubscribe 取消注册
- notify 通知观察者
- Observer 观察者
- update 更新自己
用 ts 表达会更直观一些。
interface IObservable {
subscribe(observer: Observer): void;
unsubscribe(observer: Observer): void;
notify: Function;
}
interface IObserver {
update: Function;
}
class Observable implements IObservable {
private observers: IObserver[] = [];
// 注册
public subscribe(observer: IObserver): void {
this.observers.push(observer);
}
// 取消注册
public unsubscribe(observer: IObserver): void {
const n: number = this.observers.indexOf(observer);
n != -1 && this.observers.splice(n, 1);
}
// 通知
public notify(...args): void {
this.observers.forEach((observer) => observer.update(...args));
}
}
class Observer implements IObserver {
constructor(private name: string) {}
// 更新
update(address) {
console.log(`${this.name}：今天在${address}出摊`);
}
}
测试一下：
const subject: Observable = new Observable();
const k = new Observer("小K");
const D = new Observer("大D");
subject.subscribe(k);
subject.subscribe(D);
subject.notify("人民广场");
// 小K：今天在人民广场出摊
// 大D：今天在人民广场出摊
subject.unsubscribe(k);
subject.notify("提篮桥");
// 小K：今天在提篮桥出摊
什么是发布订阅模式？
相比于简单的观察者模式，发布订阅多了一个映射（topics）。-> 关联一下 策略模式。
先来看张图：
从图中我们可以看到，相比于简单的观察者模式，发布订阅多了 topics 映射，所有发布者的消息都需要通过 topics 派发(dispatch) 到订阅者。
为什么这么设计呢？
如果 Observable 过于复杂，notify 通知所有 observer 就会导致性能问题。
换句话说：微信群里这么多人，阿猫阿狗都在水群，但是我只想知道今天的出摊信息，那怎么办？
我会把整个群聊屏蔽了，除了几个特别关注特别是：摊主、网红。
// 小摊群
const shop = {
// 粉丝团
observers: {},
// 进粉丝团
subscribe: function (key, fn) {
// 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
if (!this.observers[key]) {
this.observers[key] = [];
}
// 订阅的消息添加进消息缓存列表
this.observers[key].push(fn);
},
// 发布消息
notify: function () {
// 取出消息类型
const key = Array.prototype.shift.call(arguments)
// 取出该消息对应的回调函数集合
const fns = this.observers[key];
// 如果没有订阅该消息，则返回
if (!fns || fns.length === 0) {
return false;
}
fns.forEach(fn => fn.apply(this, arguments));
},
unsubscribe: function (key, fn) {
let fns = this.observers[key];
// 如果key对应的消息没有被人订阅，则直接返回
if (!fns) {
return false;
}
// 如果没有传入具体的回调函数，表示需要取消 key 对应消息的所有订阅
if (!fn) {
this.observers[key] = null
} else {
this.observers[key] = fns.filter(_fn => _fn !== fn);
}
}
};
测试代码：
// 添加 摊主 - k 订阅
shop.subscribe('master', k = function (address) {
console.log(`小k: 今天在${address}出摊。`);
});
// 添加 摊主 - D 订阅
shop.subscribe('master', D = function (address) {
console.log(`大D: 今天在${address}出摊。`);
});
shop.notify('master', '人民广场');
// 添加 网红 - k 订阅
shop.subscribe('网红', k = function (address) {
console.log(`小k: 今天在${address}出摊。`);
});
// 添加 网红 - D 订阅
shop.subscribe('网红', D = function (address) {
console.log(`大D: 今天在${address}出摊。`);
});
// 删除订阅
shop.unsubscribe('网红', D);
shop.notify('网红', '提篮桥');
// 小k: 今天在人民广场出摊。
// 大D: 今天在人民广场出摊。
// 小k: 今天在提篮桥出摊。
这样我们就不用把群里的每一条消息都看过去了。
应用场景
什么时候使用？当一个对象的改变需要同时改变其他对象的时候。
满足以下两个条件：
- 一对多。当一个对象的改变需要同时改变其他对象。
- 不知道多几个。不知道具体有多少对象需要改变。
典型案例：网站登录。
需求: 用户登录之后更新头像 avatar , 更新消息列表 message , 刷新购物车 cart 。
login.succ(function (data) {
// 更新头像
header.setAvatar(data.avatar);
// 刷新消息列表
message.refresh();
// 刷新购物车列表
cart.refresh();
});
需求蔓延：新增地址簿 address 模块，登陆之后也刷新下。
login.succ(function (data) {
// 新增代码
address.refresh();
});
需求蔓延：那个新增 收藏夹 favorites 也更新下？新增 订单列表 orders 也更新下？
就这样，后续面对的是越来越多这样突如其来的业务诉求，面对这种情况，就可以用上发布订阅了。
// 登录成功
login.succ(function (data) {
// 发布登录成功的消息
login.trigger('loginSucc', data);
});
// 各个业务模块注册登录成功事件
login.listen('loginSucc', function (data) {
header.setAvatar(data.avatar);
});
login.listen('loginSucc', function (data) {
message.refresh( data );
});
login.listen( 'loginSucc', function( obj ){
address.refresh( obj );
});
参考资料:
