轻松掌握：JavaScript观察者模式

观察者模式

观察者模式也叫“订阅者/发布者”模式，定义对象间的一种一对多的依赖关系，发布者可以向所有订阅者发布消息。

观察者模式被广泛地应用于JavaScript客户端编程中。所有的浏览器事件（mouseover，keypress等）都是使用观察者模式的例子。

使用这个模式的最主要目的就是促进对象之间的解耦（弱化对象之间的联系）。在观察者模式中，一组对象订阅另一个对象的指定活动并得到通知。

如：

document.body.addEventListener('click',function(){
alert(2);
},false);

以上代码订阅了document.body的click事件，当body被点击时，body便会向订阅者发布消息；

实现观察者模式的一般步骤：

先指定谁充当发布者；

给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者；

发布消息时，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数；还可在回调函数内加入一些参数；

（也可先发布消息，将消息保存起来，当有订阅者时就将该消息重新发布给他）

发布-订阅模式的通用实现：

var Publisher = (function(){
//listenerList用来保存一系列的key,每个key为保存了所有订阅者函数fn的数组{ keyA:[fn1,fn2...], keyB:[...]...}
//类似:可以为同一事件注册多个回调函数
var listenerList = {};
return {
addListener: function(key,fn){
if(!listenerList[key]){
listenerList[key] = [];
}
if(listenerList[key].indexOf(fn) === -1){ //检测fn是否已订阅,注意indexOf方法不支持IE9以下,可用for循环代替
listenerList[key].push(fn);
}
},
publish: function(){
var key = Array.prototype.shift.call(arguments),
fns = listenerList[key];
if(!fns||fns.length === 0){
return false;
}
for(var i = 0,fn;fn = fns[i++];){
fn.apply(this,arguments);
}
},
removeListener: function(key,fn){
var fns = listenerList[key];
if(!fns){
return false;
}
if(!fn){ //若没指定fn,则表示取消所有订阅
fns && (fns.length = 0);
}else{  //可直接用fns.splice(listenerList[key].indexOf(fn),1);但indexOf方法不支持IE9以下
for(var l = fns.length - 1; l >=  0; l--){
if(fns[l] === fn){
fns.splice(l,1);
}
}
}
}
};
})();

Publisher.addListener('month',function(num){  //订阅month
console.log('本月数量: '+num);
});
Publisher.addListener('month',function(price){
console.log('本月价格: '+price);
});
Publisher.addListener('week',function(num){
console.log('本周数量: '+num);
});
Publisher.publish('month',123);  //手动发布消息
//本月数量: 123
//本月价格: 123
Publisher.publish('week',5);
//本周数量: 5

实际应用：

$.ajax('http://xxx.com?login',function(data){
Publisher.publish('loginSuccess',data);  //若登录成功则向所有订阅者发布登录成功的消息
});
//以下在各个模块添加订阅消息
var header = (function () {
Publisher.addListener('loginSuccess', function (data) {
header.setAvatar(data.avatar);
});
return {
setAvatar: function (data) {
console.log('设置header模块的头像')
}
}
})();
var nav = (function () {
Publisher.addListener('loginSuccess', function (data) {
nav.setAvatar(data.avatar);
});
return {
setAvatar: function (avatar) {
console.log('设置header模块的头像')
}
}
})();
//...可随意添加其他模块

参考文献：

《JavaScript模式》

《JavaScript设计模式与开发实践》