发布/订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型来替代传统的发布/订阅模式
遍地的发布订阅现象
如今的信息化时代，发布/订阅模式的应用可以说非常广泛，比如微信公众号就是典型的发布/订阅模式，公众号发布一条信息，所有的订阅者都会收到。
有人可能也会想到经常收到的各种广告短信信息（有的可能是被动订阅），其实发送短信通知或广告也是一个典型的发布/订阅模式。
发布/订阅模式可以广泛用于异步编程中，代替传递回掉函数的方案，比如，我们可以订阅 ajax 请求的 error、succ 等事件。
另外发表订阅让两个对象松耦合在一起，不必了解彼此细节，当有新的订阅者出现时，发布者的代码不需要任何修改。同样发布者需要改变时，也不会影响到之前的订阅者。只要之前约定的事件名没有变化，就可以自由地改变它们。
定义
发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
使用发布订阅模式的好处：
- 支持简单的广播通信，自动通知所有已经订阅过的对象。
- 页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
- 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
使用实例
自定义发表订阅
我们来尝试一个自定义的发布订阅模式，那么如何实现发布订阅呢
- 指定一个发布者
- 给发布者添加一个缓冲列表，用于存放回调函数以用于通知订阅者
- 发布消息时，发布者遍历缓存列表，依次触发每个订阅者的回调函数
一个简单的天气状态订阅
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var Weather = {
list: [], // 缓存列表
listen: function(fn) { // 增加订阅者
this.list.push(fn)
},
publish: function() { // 发布消息
for(var i=0,fn; fn=this.list[i++];) {
fn.apply(this,arguments);
}
}
};
// 订阅消息
Weather.listen(function(weather, wind){
console.log('天气：' + weather, '风力：'+ wind);
})
// 发布消息
Weather.publish("晴天","微风"); // 天气：晴天 风力：微风
Weather.publish("雷阵雨","5级风"); // 天气：雷阵雨 风力：5级风
|
以上，已经实现了一个最简单的发布—订阅模式，还可以为订阅者增加自选功能，订阅自己想要的消息，也可以增加取消订阅的事件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
var PubSub = {
list: [],
listen: function(key, fn){
if(!this.list[key]) {
this.list[key]=[];
}
this.list[key].push(fn);
},
publish: function(){
var key = Array.prototype.shift.call(arguments),
fns = this.list[key];
if(!fns || fns.length === 0) {
return false;
}
for(var i = 0, fn; fn = fns[i++];){
fn.apply(this, arguments);
}
}
}
//
var installEvent = function(obj) {
for (var i in PubSub) {
obj[i] = PubSub[i];
}
};
var day = {}
installEvent(day);
day.listen('天气', function(wind) {
console.log('风力：'+ wind);
});
day.publish('天气', "8级风");
|
实战之网站登录
网站登录是最常见的形式，通常在登录以后我们会ajax异步请求获取用户信息，比如显示用户名字、头像等信息在header模块，而这两个字段都是来自用户登录后返回的信息。至于 ajax 请求什么时候能成功返回用户信息，这点我们没有办法确定，虽然现在看起来和发布订阅模式没关系，因为异步的问题通常也可以回调函数来解决。
我们不知道除了 header 头部、nav 导航、消息列表、购物车之外，将来还有哪些模块需要使用这些用户信息。如果它们和用户信息模块产生了强耦合，比如下面这样的形式:
1
2
3
4
5
6
|
login.succ(function(data){
header.setAvatar( data.avatar); // 设置 header 模块的头像
nav.setAvatar( data.avatar ); // 设置导航模块的头像
message.refresh(); // 刷新消息列表
cart.refresh(); // 刷新购物车列表
});
|
现在登录模块是我们负责编写的，但我们还必须了解 header 模块里设置头像的方法叫 setAvatar、购物车模块里刷新的方法叫 refresh，这种耦合性会使程序变得僵硬，header 模块不能随意再改变 setAvatar 的方法名，它自身的名字也不能被改为 header1、header2。 这是针对具 体实现编程的典型例子，针对具体实现编程是不被赞同的。
某一个，项目新增加收获地址管理模块：
1
2
3
4
5
6
|
login.succ(function(data){
header.setAvatar( data.avatar);
nav.setAvatar( data.avatar );
message.refresh();
address.refresh(); // 新增加收获地址
});
|
现在我们用发布订阅重写，对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。 当登录成功时，登录模块只需要发布登录成功的消息，而业务方接受到消息之后，就会开始进行各自的业务处理，登录模块并不关心业务方究竟要做什么，也不想去了解它们的内部细节。改善后的代码如下:
1
2
3
|
$.ajax( 'http://xxx.com?login', function(data){ // 登录成功
login.trigger( 'loginSucc', data); // 发布登录成功的消息
});
|
各模块监听登录成功的消息:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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 模块的头像');
}
}
})();
|
如果有一天在登录完成之 后，又增加一个刷新收货地址列表的行为，那么只要在收货地址模块里加上监听消息的方法即可，而这可以让开发该模块的同事自己完成，你作为登录模块的开发者，永远不用再关心这些行为了
1
2
3
4
5
6
7
8
9
10
|
var address = (function(){ // 收获地址模块
login.listen('loginSucc', function(obj){
address.refresh(obj);
});
return {
refresh: function( avatar ){
console.log( '刷新收货地址列表' );
}
}
})();
|
总结
发布订阅的使用场合就是：当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式。
总的来说，发布订阅模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化。
另外， 发布—订阅模式虽然可以弱化对象之间的联系，但如果过度使用的话，对象和对象之间的必要联系也将被深埋在背后，会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候，要跟踪一个 bug 不是件轻松的事情。
参考引用资料
《JavaScript设计模式与开发实践》
汤姆大叔的博客——深入理解JavaScript系列