观察者模式又叫发布订阅模式

(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。

使用观察者模式的好处:

1、支持简单的广播通信,自动通知所有已经订阅过的对象。
2、页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
3、目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

思路:

1、发布者对象需要一个数组类型的属性,以存储所有的订阅者。

2、订阅(即注册)行为就是将新的订阅者加入到这个数组中去,

3、则注销即是从这个数组中删除某个订阅者。

4、发布消息,就是循环遍历订阅者列表并通知他们。

先定义一个event对象,其内部包含了3个方法:订阅、发布、删除。

var event = {
//设置3个变量;
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