一.生活场景
小明、小红、小强最近看上了一个楼盘,到了售楼处之后才被告知,该楼盘的房子早已售罄。售楼MM 告诉他们,不久后有尾盘推出。小明、小红、小强离开之前,把电话号码留在了售楼处。售楼 MM 答应他们,新楼盘一推出就马上发信息通知。他们的电话号码都被记在售楼处的花名册上,新楼盘推出的时候,售楼 MM 会翻开花名册,遍历上面的电话号码,依次发送一条短信来通知他们。
二.定义
发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状
态发生改变时,所有依赖于它的对象都将得到通知。在 JavaScript 开发中,我们一般用事件模型来替代传统的发布—订阅模式。
- 发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案。
- 发布—订阅模式可以取代对象之间硬编码的通知机制,一个对象不用再显式地调用另外一个对象的某个接口。
三.开发实践
1.网站登录
假设网站有 header 头部、nav 导航、消息列表、购物车等模块。这几个模块的渲染加载必须先用 ajax 异步请求获取用户的登录信息。
1)一般实现伪代码:
$.ajax({
url: 'http:// xxx.com/login',
type: 'post',
contentType: 'application/json',
dataType:'json',
success: function(data) {
if(data.status === "200") { // 登录成功
header.setAvatar(data.avatar); //加载header模块
nav.setAvatar(data.avatar);//加载nav模块
}
}
});
2)观察者模式伪代码:
$.ajax({
...,
success: function(data) {
if(data.status === "200") { // 登录成功
login.trigger('loginSucc', data); // 发布登录成功的消息
}
}
});
var header = (function () { // header 模块
login.listen('loginSucc', function (data) {
header.setAvatar(data.avatar);
});
return {
setAvatar: function (data) {
console.log('设置 header 模块的头像');
}
}
})();
var nav = (function () { // nav 模块
login.listen('loginSucc', function (data) {
nav.setAvatar(data.avatar);
});
return {
setAvatar: function (avatar) {
console.log('设置 nav 模块的头像');
}
}
})();
var login = {
clientList: [],
listen: function (key, fn) {
if (!this.clientList[key]) {
this.clientList[key] = [];
}
this.clientList[key].push(fn); // 订阅的消息添加进缓存列表
},
trigger: function () {
var key = Array.prototype.shift.call(arguments), // (1);
fns = this.clientList[key];
if (!fns || fns.length === 0) { // 如果没有绑定对应的消息
return false;
}
for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments); // (2) // arguments 是 trigger 时带上的参数
}
}
};
四.总结
在 JavaScript 中,我们用注册回调函数的形式来代替传统的发布—订阅模式,显得更加优雅和简单。虽然在开发中先订阅在发布的模式使用更多,但是先发布再订阅的模式也是可以实现的,我们可以将发布内容缓存起来,在订阅时传给订阅对象。
发布—订阅模式的优点:
1)时间上的解耦。我们就无需过多关注对象在异步运行期间的内部状态,而只需要订阅感兴趣的事件发生点。
2)对象之间的解耦。让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响它们之间相互通信。只要之前约定的事件名没有变化,两个对象内部改变互不影响。
但是过度使用观察者模式,对象和对象之间的必要联系也将被深埋在背后,会导致程序难以跟踪维护和理解。