发布订阅模式介绍
发布---订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。
现实生活中的发布-订阅模式：
比如小美最近在淘宝网上看上一款口红，私聊客服后，发现这款口红卖光了，但是小美对这款口红又非常喜欢，所以联系卖家，问卖家什么时候有货，卖家告诉她，要等一周后才有货，亲要是你喜欢的话，你可以收藏我们的店铺，等有货的时候再通知你，所以小美收藏了此店铺，但与此同时，小丽，小花等也喜欢这款口红，也收藏了该店铺；等来货的时候就依次会通知她们；
在上面的场景中，可以看出是一个典型的发布订阅模式，卖家是属于发布者，小美，小丽等属于订阅者，订阅该店铺，卖家作为发布者，当口红有货的时候，会依次通知小美，小丽等。
发布订阅模式的优点：
-
支持简单的广播通信，当对象状态发生改变时，会自动通知已经订阅过的对象。
-
发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用，同时，订阅者只监听发布者的事件名，只要发布者的事件名不变，它不管发布者如何改变
发布订阅模式的缺点：
- 创建订阅者需要消耗一定的时间和内存。
- 虽然可以弱化对象之间的联系，如果过度使用的话，反而使代码不好理解及代码不好维护等等。
如何实现发布--订阅模式？
- 首先要想好谁是发布者(比如上面的卖家)。
- 然后给发布者添加一个缓存列表，用于存放回调函数来通知订阅者(比如上面的买家收藏了卖家的店铺，卖家通过收藏了该店铺的一个列表名单)。
- 最后就是发布消息，发布者遍历这个缓存列表，依次触发里面存放的订阅者回调函数。
我们还可以在回调函数里面添加一点参数，比如口红的色号，品牌等信息；
我们先来实现下简单的发布-订阅模式：
代码如下：
var rougeObj = {}; // 定义发布者
rougeObj.list = []; // 缓存列表 存放订阅者回调函数
// 增加订阅者
rougeObj.listen = function(fn) {
rougeObj.list.push(fn); // 订阅消息添加到缓存列表
}
// 发布消息
rougeObj.trigger = function(){
for(var i = 0,fn; fn = this.list[i++];) {
fn.apply(this,arguments);
}
}
// 小美订阅如下消息
rougeObj.listen(function(color,brand){
console.log("色号是："+color);
console.log("品牌是："+brand);
});
// 小丽订阅如下消息
rougeObj.listen(function(color,brand){
console.log("再次打印色号是："+color);
console.log("再次打印品牌是："+brand);
});
rougeObj.trigger("死亡芭比粉", "圣罗兰");
rougeObj.trigger("正红", "萝卜丁");
运行结果如下：
如上截图，我们看到订阅者接收到发布者的每个消息，但是呢，对于小美来说，她只想接收颜色为粉色的消息，不想接收颜色为红色的消息，为此我们需要对代码进行如下改造下，我们可以先增加一个key，使订阅者只订阅自己感兴趣的消息。
var rougeObj= {}; // 定义发布者
rougeObj.list = []; // 缓存列表 存放订阅者回调函数
// 增加订阅者
rougeObj.listen = function(key,fn) {
if(!this.list[key]) {
// 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
this.list[key] = [];
}
this.list[key].push(fn); // 订阅消息添加到缓存列表
}
// 发布消息
rougeObj.trigger = function(){
var key = Array.prototype.shift.call(arguments); // 取出消息类型名称
var fns = this.list[key]; // 取出该消息对应的回调函数的集合
// 如果没有订阅过该消息的话，则返回
if(!fns || fns.length === 0) {
return;
}
for(var i = 0,fn; fn = fns[i++]; ) {
fn.apply(this,arguments); // arguments 是发布消息时附送的参数
}
};
// 小美订阅如下消息
rougeObj.listen('pink',function(brand){
console.log("品牌是："+brand);
});
// 小丽订阅如下消息
rougeObj.listen('red',function(brand){
console.log("再次打印品牌是："+brand);
});
rougeObj.trigger("pink", "圣罗兰");
rougeObj.trigger("red", "萝卜丁");
可以看到，订阅者只订阅自己感兴趣的消息了；
发布---订阅模式的代码封装
我们知道，对于上面的代码，小美去买口红这么一个对象rougeObj进行订阅，但是如果以后我们需要对买鞋子或者其他的对象进行订阅呢，我们需要复制上面的代码，再重新改下里面的对象代码；
为此我们需要进行以下几个步骤：
一、代码封装：
var event = {
list: [],
listen: function(key,fn) {
if(!this.list[key]) {
this.list[key] = [];
}
// 订阅的消息添加到缓存列表中
this.list[key].push(fn);
},
trigger: function(){
var key = Array.prototype.shift.call(arguments);
var fns = this.list[key];
// 如果没有订阅过该消息的话，则返回
if(!fns || fns.length === 0) {
return;
}
for(var i = 0,fn; fn = fns[i++];) {
fn.apply(this,arguments);
}
}
};
二、再定义一个initEvent函数，这个函数使所有的普通对象都具有发布订阅功能
var initEvent = function(obj) {
for(var i in event) {
obj[i] = event[i];
}
};
现在我们再来测一下功能
var rougeObj= {};
initEvent(rougeObj);
// 小美订阅如下消息
rougeObj.listen('pink',function(brand){
console.log("品牌是："+brand);
});
// 小丽订阅如下消息
rougeObj.listen('red',function(brand){
console.log("再次打印品牌是："+brand);
});
rougeObj.trigger("pink", "圣罗兰");
rougeObj.trigger("red", "萝卜丁");
如何取消订阅事件？
比如上面的列子，小美她突然不想买口红了，那么对于卖家的店铺他不想再接受该店铺的消息，那么小红可以取消该店铺的订阅。
如下代码：
event.remove = function(key,fn){
var fns = this.list[key];
// 如果key对应的消息没有订阅过的话，则返回
if(!fns) {
return false;
}
// 如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅
if(!fn) {
fn && (fns.length = 0);
}else {
for(var i = fns.length - 1; i >= 0; i--) {
var _fn = fns[i];
if(_fn === fn) {
fns.splice(i,1); // 删除订阅者的回调函数
}
}
}
};
测试代码如下：
var initEvent = function(obj) {
for(var i in event) {
obj[i] = event[i];
}
};
var rougeObj= {};
initEvent(rougeObj);
// 小美订阅如下消息
rougeObj.listen('red',fn1 = function(brand){
console.log("品牌是："+brand);
});
// 小丽订阅如下消息
rougeObj.listen('red',fn2 = function(brand){
console.log("再次打印品牌是："+brand);
});
rougeObj.remove("red", fn1);
rougeObj.trigger("red", "萝卜丁");
运行结果如下：
全局--发布订阅对象代码封装
我们再来看看我们传统的ajax请求吧，比如我们传统的ajax请求，请求成功后需要做如下事情：
- 渲染数据。
- 使用数据来做一个动画。
那么我们以前肯定是如下写代码：
$.ajax(“http://127.0.0.1/index.php”,function(data){
rendedData(data); // 渲染数据
doAnimate(data); // 实现动画
})
假如以后还需要做点事情的话，我们还需要在里面写调用的方法；这样代码就耦合性很高，那么我们现在使用发布-订阅模式来看如何重构上面的业务需求代码：
$.ajax(“http://127.0.0.1/index.php”,function(data){
Obj.trigger('success', data); // 发布请求成功后的消息
});
// 下面我们来订阅此消息，比如我现在订阅渲染数据这个消息；
Obj.listen('success', function(data){
renderData(data);
});
// 订阅动画这个消息
Obj.listen('success',function(data){
doAnimate(data);
});
为此我们可以封装一个全局发布-订阅模式对象
var Event = (function(){
var list = {},
listen,
trigger,
remove;
listen = function(key,fn){
if(!list[key]) {
list[key] = [];
}
list[key].push(fn);
};
trigger = function(){
var key = Array.prototype.shift.call(arguments),
fns = list[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 = list[key];
if(!fns) {
return false;
}
if(!fn) {
fns && (fns.length = 0);
}else {
for(var i = fns.length - 1; i >= 0; i--){
var _fn = fns[i];
if(_fn === fn) {
fns.splice(i,1);
}
}
}
};
return {
listen: listen,
trigger: trigger,
remove: remove
}
})();
测试代码如下：
Event.listen("color",function(brand) {
console.log("品牌为:"+brand);
});
Event.trigger("color","萝卜丁");
运行结果如下：
理解模块间通信
我们使用上面封装的全局的发布-订阅对象来实现两个模块之间的通信问题；
比如现在有一个页面有一个按钮，每次点击此按钮后，div中会显示此按钮被点击的总次数；
如下代码：
<button id="count">点将我</button>
<div id="showcount"></div>
我们中的a.js 负责处理点击操作 及 发布消息；如下JS代码
var a = (function(){
var count = 0;
var button = document.getElementById("count");
button.onclick = function(){
Event.trigger("add",count++);
}
})();
b.js 负责监听add这个消息，并把点击的总次数显示到页面上来；如下代码：
var b = (function(){
var div = document.getElementById("showcount");
Event.listen('add',function(count){
div.innerHTML = count;
});
})();
global.js 就是我们上面封装的全局-发布订阅模式对象的封装代码；
下面是html代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="global.js"></script>
</head>
<body>
<button id="count">点将我</button>
<div id="showcount"></div>
<script src = "a.js"></script>
<script src = "b.js"></script>
</body>
</html>
如上代码，当点击一次按钮后，showcount的div会自动加1，如上演示的是2个模块之间如何使用发布-订阅模式之间的通信问题；
