首页 > 代码库 > javascript观察者模式
javascript观察者模式
观察者模式又叫发布-订阅模式，它定义对象间的一对多的依赖关系，当一个对象的状态发生该变时，所有依赖于它的对象都将得到通知。在JavaScript中，一般用事件模型来替代传统的观察者模式。
下面是售楼处(发布者)与各看房者(订阅者)的例子：
var event = {
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),
fns = this.clientList[key];
if(!fns || fns.length == 0){ //没有绑定对应的消息
return false;
}
for(var i=0,fn; fn=fns[i++]){
fn.apply(this, arguments);
}
},
remove:function(key,fn){ //删除订阅
var fns = this.clientList[key];
if(!fns){ //如果key对应的消息没有被人订阅，则直接返回
return false;
}
if(!fn){ //如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅
fns && (fns.length = 0);
}else{
for(var l=fns.length-1; l>=0; l--){ //反向遍历订阅的回调函数列表
var _fn = fns[l];
if(_fn ===fn){
fns.splice(l,1); //删除订阅者的回调函数
}
}
}
}
};
var installEvent = function(obj){ //给所有对象动态安装发布-订阅功能
for(var i in event){
obj[i] = event[i];
}
};
var salesOffices = {}; //定义售楼处
installEvent(salesOffices);
salesOffices.listen(‘squareMeter100‘,function(price){ // 张三订阅消息
console.log(‘价格=‘ + price);
});
salesOffices.listen(‘squareMeter150‘,function(price){ // 李四订阅消息
console.log(‘价格=‘ + price);
});
salesOffices.trigger(‘squareMeter100‘,2000000); // 输出 2000000
salesOffices.trigger(‘squareMeter150‘,3000000); // 输出 3000000
上面的代码还存在两个小问题：
1.每个发布者对象都添加了listen和trigger方法，以及一个缓存列表clientList，这是一种资源浪费
2.订阅者跟售楼处对象存在一定的耦合性，订阅者至少要知道售楼处对象的名字是salesOffices，才能订阅到事件
下面是对以上两个问题的改良：
var event = {
var clientList:[],
listen,
trigger,
remove;
listen = function(key,fn){
if(!clientList[key]){
clientList[key] = [];
}
clientList[key].push(fn); //订阅的消息添加进缓存列表
};
trigger = function(){ //发布消息
var key = Array.prototype.shift.call(arguments),
fns = clientList[key];
if(!fns || fns.length == 0){ //没有绑定对应的消息
return false;
}
for(var i=0,fn; fn=fns[i++]){
fn.apply(this, arguments);
}
};
remove = function(key,fn){ //删除订阅
var fns = clientList[key];
if(!fns){ //如果key对应的消息没有被人订阅，则直接返回
return false;
}
if(!fn){ //如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅
fns && (fns.length = 0);
}else{
for(var l=fns.length-1; l>=0; l--){ //反向遍历订阅的回调函数列表
var _fn = fns[l];
if(_fn ===fn){
fns.splice(l,1); //删除订阅者的回调函数
}
}
}
};
return {
listen:listen,
trigger:trigger,
remove:remove
};
};
Event.listen(‘squareMeter150‘,function(price){ // 李四订阅消息
console.log(‘价格=‘ + price);
});
Event.trigger(‘squareMeter150‘,2000000); // 输出 2000000
改良后，发布-订阅模式可以用一个全局的Event对象来实现，订阅者不需要了解消息来自哪个发布者，发布者也不需要了解消息会推送给哪些订阅者，Event作为类似“中介者”的角色，把订阅者和发布者联系起来。
观察者模式的优点非常明显，一为时间上的解耦，二为对象间的解耦。它的应用非常广泛，既可以用在异步编程中，也可以用来编写更松耦合的代码编写。但也不是没有缺点。创建订阅者本身要消耗一定的时间和内存，而且当你订阅一个消息后，也许此消息始终都没发生，但这个订阅者会始终存在于内存中。另外，观察者模式虽然可以弱化对象间的联系，但如果过度使用的话，对象间的必要联系也将被深藏在背后，会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候，要跟踪一个bug不是键轻松的事。
javascript观察者模式