1、发布-订阅模式又叫观察者模式，它定义对象之间一种一对多的依赖关系。
2、如何实现发布-订阅模式
2-1、首先指定好发布者
2-2、给发布者添加一个缓冲列表，用户存放回调函数以便通知订阅者
2-3、最后发布消息时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数
例子:
var salesOffice = {};
salesOffice.clientList = [];
salesOffice.listen = function(key,fn){
if(!this.clientList[key]){
this.clientList[key] = [];
}
this.clientList[key].push(fn);
}
salesOffice.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);
}
}
salesOffice.listen('s88',function(p){
console.log("价格+" + p)
})
salesOffice.listen('s300',function(p){
console.log("价格+" + p)
})
salesOffice.trigger('s88',20000);
salesOffice.trigger('s300',3000);
发布订阅的通用实现:
var event = {
clientList : [],
listener :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);
}
}
};
var installEvent = function(obj){
for(var i in event){
obj[i] = event[i];
}
}
通用订阅发布模式
//通用发布订阅模式
//var evt = (evt) ? evt: window.event;
var Event = (function(){
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(){
//删除 }*/
return {
listen:listen,
trigger:trigger,
remove:remove
}
})(); /* Event.listen("sales100",function(p){
console.log("总价 :"+ (p * 70));
});
Event.trigger("sales100",8000);
*/ var a = (function(){
var count = 0;
document.getElementById("btn").onclick = function(){
Event.trigger("add",count++);
}
})(); var b = (function(){
var div = document.getElementById("show");
Event.listen('add',function(p){
div.innerHTML = p;
})
})();
