发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
现实中我们就能找到发布-订阅模式，比如，小明最近看上了一套房子，到了售楼处才知道房子售罄了，但是售楼MM告诉小明，不久后还有一些尾盘推出，开发商正在办理相关手续，手续办好后就可以购买了，但是无法确定到底是什么时候。
于是小明记下了售楼处的电话，以后每天都会打电话询问有没有到购买时间，除了小明，可能还会有别人，每天向售楼处咨询同样的问题。显然这是不合理的，实际情况是小明把自己的电话号码都记在售楼处的花名册上，新楼盘一推出，售楼MM就会翻开花名册，遍历上面的电话号码，依次发送短信通知他们。
在上面的例子中，发送短信通知就是一个典型的发布-订阅模式，小明等购买者都是订阅者，他们订阅了房子开售的消息。售楼处作为发布者，会在合适的时候遍历花名册上的电话号码，依次给他们发送短信。
通过上面的例子，我们可以看到显而易见的优点。
- 购房者不会再天天给售楼处打电话咨询开售时间，在合适的时间点，售楼处作为发布者会通知这些消息订阅者。
（这一点说明发布-订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。比如，我们可以订阅ajax请求的error、succ等事件。或者如果向在动画的每一帧完成之后做一些事情，那我们可以订阅一个事件，然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布-订阅模式，我们就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。）
2.购房者和售楼处之间不再强耦合在一起，当有新的购房者出现时，他只需把手机号码留在售楼处，售楼处不关心购房者的任何情况，不管购房者是男还是女还是一只猴子。同样售楼处的任何变动也不影响购买者，比如售楼MM离职，这些改变都和购房者无关，只要售楼处记得发短信这件事情。
（第二点说明发布-订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。发布-订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。当有新的订阅者出现时，发布者的代码不需要任何修改；同样发布者需要改变时，也不会影响到之前的订阅者。只要之前约定的事件名没有变化，就可以自由地改变它们。）
DOM事件
其实我们最常用的在DOM节点上面绑定事件函数，也用到了发布-订阅模式，比如下面代码：
document.body.addEventListener('click',function(){
alert(2)
},false);
document.body.click()
这里我们监控了 document.body的动作，但是我们不知道用户什么时候点击，所以我们订阅 document.body上的click事件，当body节点被点击时，body就会向订阅者发布这个消息。
当然我们还可以随意增加或者删除订阅者：
document.body.addEventListener('click',function(){
alert(2)
},false);
document.body.addEventListener('click',function(){
alert(1)
},false);
document.body.addEventListener('click',function(){
alert(3)
},false);
document.body.click()
自定义事件
先来看看如何一步步实现发布-订阅模式。
- 首先要指定好谁充当发布者；
- 然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者；
- 最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数。
另外，我们还可以往回调函数里填入一些参数，订阅者可以接收这些参数。这是很有必要的，比如售楼处可以在发给订阅者的短信里加上房子的单价、面积、容积率等信息，订阅者接收到这些信息之后可以进行各自的处理：
var salesOffices = {};//定义售楼处
salesOffices.clientList = [];//缓存列表，存放订阅者的回调函数
salesOffices.listen = function(fn){//增加订阅者
this.clientList.push(fn);//订阅的消息添加进缓存列表
}
salesOffices.trigger = function(){//发布消息
for(var i = 0,fn;fn = this.clientList[i++];){
fn.apply(this,arguments)//arguments 是发布消息时带上的参数
}
}
salesOffices.listen(function(price,squareMater){//小明订阅消息
console.log('价格=' + price);
console.log('squareMater=' + squareMater);
});
salesOffices.listen(function(price,squareMater){//小红订阅消息
console.log('价格=' + price);
console.log('squareMater=' + squareMater);
});
salesOffices.trigger(20000000,88);//输出：200万，88平方米
salesOffices.trigger(30000000,110);//输出：300万，110平方米
可以看到上面的代码有些问题，我们看到订阅者接收到了发布者发布的每一个消息，小明只想买一个88平方米的房子，但是发布者把110平方米的也推送给了小明。所以我们有必要增加一个标示key，让订阅者只订阅自己感兴趣的消息：
var salesOffices = {};//定义售楼处
salesOffices.clientList = [];//缓存列表，存放订阅者的回调函数
salesOffices.listen = function(key,fn){//如果还没有订阅过此类消息，给该类消息创建一个缓存列表
if(!this.clientList[key]){
this.clientList[key] = [];
}
this.clientList[key].push(fn);//订阅的消息添加进缓存列表
}
salesOffices.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)//arguments 是发布消息时带上的参数
}
}
salesOffices.listen('squareMater88',function(price){//小明订阅消息
console.log('价格=' + price);
});
salesOffices.listen('squareMater110',function(price){//小红订阅消息
console.log('价格=' + price);
});
salesOffices.trigger('squareMater88',20000000);//价格=20000000
salesOffices.trigger('squareMater110',30000000);//价格=30000000
很明显，现在订阅者可以只订阅自己感兴趣的事件了。
发布-订阅模式的通用实现
假设现在小明又去另一个售楼处买房子，这段代码是否必须在另一个售楼处对象上重写一次呢，下面我们需要把发布-订阅的功能提取出来，放在一个单独的对象内：
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);
}
}
}
再定义一个installEvent函数，这个函数可以给所有的对象都动态安装发布-订阅功能：
var installEvent = function(obj){
for(var i in event){
obj[i] = event[i];
}
}
接下来测试一下：
var salesOffices = {};
installEvent(salesOffices);
salesOffices.listen('squareMater88',function(price){//小明订阅消息
console.log('价格=' + price);
});
salesOffices.listen('squareMater100',function(price){//小明订阅消息
console.log('价格=' + price);
});
salesOffices.trigger('squareMater88',2000000);//价格=2000000
salesOffices.trigger('squareMater100',3000000);//价格=3000000
取消订阅的事件
如果小明突然不想买房子了，或者已经买到了心仪的房子，那么售楼处就没有必要给他推消息了，这个时候，我们需要取消订阅事件的功能：
event.remove = function(key,fn){
debugger
var fns = this.clientList[key];
if(!fns){
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 salesOffices = {};
installEvent(salesOffices);
salesOffices.listen('squareMater88',fn1 = function(price){//小明订阅消息
console.log('价格=' + price);
});
salesOffices.listen('squareMater88',fn2 = function(price){//小明订阅消息
console.log('价格=' + price);
});
salesOffices.remove('squareMater88',fn1);//删除小明的订阅
salesOffices.trigger('squareMater88',2000000);
真实例子 — 网站登录
假如我们正在开发一个商城网站，网站里有header、nav、消息列表、购物车等模块。这几个模块渲染的前提就是必须先用ajax异步请求获取用户的登录信息。
当然，我们可以通过回调函数解决，比如下面这样：
login.succ(function(data){
header.setAvatar(data.avatar);//设置header模拟的头像
nav.setAvatar(data.avatar);//设置导航模块的头像
message.refresh();//刷新消息列表
cart.refresh();//刷新购物车列表
})
要实现上面代码，我们必须了解header模块里设置头像的方法叫setAvatar，购物车模块里刷新的方法叫refresh，这种耦合性会使程序变得僵硬，header模块不能随意再改变setAvatar的方法名，它自身的名字也不能被改为header1、header2。这是针对具体实现编程的典型例子，但是这种方式是不被赞同的。
假如有一天，项目中又新增了一个收货地址管理的模块，我们就需要找到之前写的登录模块，把更新收货地址的功能添进去：
login.succ(function(data){
header.setAvatar(data.avatar);//设置header模拟的头像
nav.setAvatar(data.avatar);//设置导航模块的头像
message.refresh();//刷新消息列表
cart.refresh();//刷新购物车列表
address.refresh();//刷新收获地址
})
接下来我们用发布-订阅模式重写这段代码，和用户信息关联的业务模块将自行订阅登录成功的消息事件，登录成功时，登录模块只需要发布登录成功的消息，而业务方接收到消息之后，就会开始进行各自的业务处理：
var login = {};
installEvent(login);
var header = (function(){
login.listen('loginSucc',function(data){
header.setAvatar(data.avatar);
})
return {
setAvatar:function(data){
console.log('设置header模块的头像');
}
}
})()
var nav = (function(){
login.listen('loginSucc',function(data){
nav.setAvatar(data.avatar);
})
return {
setAvatar:function(data){
console.log('设置nav模块的头像');
}
}
})();
var address = (function(){
login.listen('loginSucc',function(obj){
address.refresh(obj);
})
return {
refresh:function(avatar){
console.log('设置收货地址列表');
}
}
})();
var data = ""
login.trigger('loginSucc',data);
如上所述，我们随时可以把setAvatar的方法改成setTouxiang，如果增加了其他模块，只需要在这个模块里加一个监听消息的方法即可。
全局的发布-订阅对象
回顾上面的内容，我们给售楼处对象和登录对象都添加了订阅和发布的功能，这里还存在两个小问题。
- 我们给每个发布者对象都添加了listen和trigger方法，以及一个缓存列表clientList，这其实是一种资源浪费。
- 小明跟售楼处对象还是存在一定的耦合性，小明至少要知道售楼处对象的名字是salesOffices，才能顺利的订阅到事件：
salesOffices.listen('squareMater88',function(price){//小明订阅消息
console.log('价格=' + price);
});
如果小明还关心300平米的房子，而这套房子的卖家是salesOffices2，这意味着小明要开始订阅salesOffices2对象：
salesOffices2.listen('squareMater300',function(price){//小明订阅消息
console.log('价格=' + price);
});
其实在现实中，买房子我们可能会直接去中介公司，而各大房产公司也只需要通过中介公司来发布房子信息。这样一来，我们就不用再关心消息是来自哪个房产公司。当然，为了保证订阅者和发布者能顺利通信，订阅者和发布者都必须知道这个中介公司。
接下来我们可以用一个全局的Event对象来实现，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(key,fn){
if(!fns){
return false;
}
if(!fn){
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('squareMater88',function(price){//小红订阅消息
console.log('价格=' + price);//输出：''
})
Event.trigger('squareMater88',2000000);//售楼处发布消息
模块间通信
比如现在又两个模块，a模块里面有一个按钮，每次点击按钮之后，b模块里的div中会显示按钮的总点击次数，我们用全局发布-订阅模式完成下面的代码，使得a模块和b模块可以再保持封装性的前提下进行通信:
var a = (function(){
var count = 0;
var button = document.getElementById('count');
button.onclick = function(){
Event.trigger('add',count++);
}
})();
var b = (function(){
var div = document.getElementById('show');
Event.listen('add',function(count){
div.innerHTML = count;
})
})();
必须先订阅再发布吗
上述内容我们所实现的都是先订阅再发布，但是现实开发中，我们会遇到先发布消息的这种情况，为了满足这个需求，我们要建立一个存放离线事件的堆栈，当事件发布时，如果还没有订阅者来订阅，我们可以暂时把发布事件的动作包裹在一个函数里，这些包装函数将被存入堆栈中，等到有人来订阅这个事件的时候，我们将遍历堆栈并且依次执行这些包装函数，即重新发布里面的事件。当然离线事件的生命周期只有一次，就好像QQ的未读消息只会被重新阅读一次，所以刚才的操作我们只能进行一次。
全局事件的命名冲突
全局的发布-订阅对象里只有一个clientList来存放消息名和回调函数，这样容易发生事件名冲突的情况，所以我们要给Event对象提供创建命名空间的功能。
先来感受一下两个新增功能怎么使用：
// 先发布后订阅================================
Event.trigger('click',1);
Event.listen('click',function(a){
console.log(a);
})
// 使用命名空间=================================
Event.create('namespace1').listen('click',function(a){
console.log(a)
})
Event.create('namespace1').trigger('click',1);
Event.create('namespace2').listen('click',function(a){
console.log(a)
})
Event.create('namespace2').trigger('click',2);
具体代码实现：
var Event = (function(){
var global = this,
Event,
_default = 'default';
Event = function(){
var _listen,
_trigger,
_remove,
_slice = Array.prototype.slice,
_shift = Array.prototype.shift,
_unshift = Array.prototype.unshift,
namespaceCache = {},
_create,
find,
each = function(ary,fn){
var ret;
for(var i = 0,l = ary.length;i<l;i++){
var n = ary[i];
ret = fn.call(n,i,n);
}
return ret;
};
_listen = function(key,fn,cache){
if(!cache[key]){
cache[key] = [];
}
cache[key].push(fn);
}
_remove = function(key,cache,fn){
if(cache[key]){
if(fn){
for(var i = cache[key].length;i>=0;i--){
if(cache[key][i] === fn){
cache[key].splice(i,1)
}
}
}else{
cache[key] = [];
}
}
}
_trigger = function(){
var cache = _shift.call(arguments),
key = _shift.call(arguments),
args = arguments,
_self = this,
ret,
stack = cache[key];
if(!stack || !stack.length){
return;
}
return each(stack,function(){
return this.apply(_self,args);
})
};
_create = function(namespace){
var namespace = namespace || _default;
var cache = {},
offlineStack = [],
ret = {
listen:function(key,fn,last){
_listen(key,fn,cache);
if(offlineStack === null){
return;
}
if(last === 'last'){
offlineStack.length&&offlineStack.pop()()
}else{
each(offlineStack,function(){
this();
})
}
offlineStack = null;
},
one:function(key,fn,last){
_remove(key,cache);
this.listen(key,fn,last)
},
remove:function(key,fn){
_remove(key,cache,fn);
},
trigger:function(){
var fn,
args,
_self = this;
_unshift.call(arguments,cache);
args = arguments;
fn = function(){
return _trigger.apply(_self,args);
}
if(offlineStack){
return offlineStack.push(fn)
}
return fn();
}
};
return namespace?(namespaceCache[namespace]?namespaceCache[namespace]:namespaceCache[namespace] = ret):ret;
};
return {
create:_create,
one:function(key,fn,last){
var event = this.create();
event.one(key,fn,last)
},
remove:function(key,fn){
var event = this.create();
event.remove(key,fn)
},
listen:function(key,fn,last){
var event = this.create();
event.listen(key,fn,last)
},
trigger:function(){
var event = this.create();
event.trigger.apply(this,arguments);
}
};
}();
console.log(Event)
return Event;
})()
扫一扫
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
