定义：发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都将得到通知。在JavaScript开发中，我们一般用时间模型来替代传统的发布-订阅模式。
现实中的发布-订阅模式
发布-订阅模式的作用
在上面的例子中，发短信通知就是一个典型的发布-订阅模式，小明、小红等购买者都是订阅者，他们订阅了房子开售的消息。售楼处作为发布者，会在合适的时候遍历花名册上的电话号码，依次给购房者发布消息。
优点：
- 购房者不用再天天给售楼处打电话咨询开售时间，在合适的时间点，售楼处作为发布者会通知这些消息订阅者。
- 购房者和售楼处之间不再强耦合在一起，当有新的购房者出现时，他只需把手机号码留在售楼处，售楼处不关心购房者的任何情况，不管购房者是男是女还是一只猴子。而售楼处的任何变动也不会影响购房者，比如售楼
MM离职，售楼处从一楼搬到二楼，这些改变都跟购房者无关，只要售楼处记得发短信这件事情。
第一点说明发布-订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。比如，我们可以订阅ajax请求中的error、succ等事件。或者如果想在动画的每一帧完成之后做一些事情，那我们可以订阅一个事件，然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布-订阅模式，我们就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。
第二点说明发布-订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另一个对象的某个接口。发布-订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。当有新的订阅者出现时，发布者的代码不需要任何修改；同样发布者需要改变时，也不会影响到之前的订阅者。只要之前约定的事件名没有变化，就可以自由地改变他们。
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(3);
}, false);
document.body.addEventListener('click', function() {
alert(4);
}, false);
document.body.click(); // 模拟用户点击
注意，手动触发事件更好的做法是IE下用fireEvent，标准浏览器下用dispatchEvent实现。
自定义事件
除了DOM事件，我们还会经常实现一些自定义的事件，这种依靠自定义事件完成的发布-订阅模式可以用于任何JavaScript代码中：
- 首先要指定好谁充当发布者（比如售楼处）；
- 然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者（售楼处的花名册）；
- 最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数（遍历花名册，挨个发短信）。
另外，我们还可以往回调函数里填入一些参数，订阅者可以接收这些参数。这是很有必要的，比如售楼处可以在发给订阅者的短信里加上房子的单价、面积、容积率等信息，订阅者接收到这些信息之后可以进行各自的处理：
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, squareMeter) { // 小明订阅消息
console.log('价格=' + price);
console.log('squareMeter=' + squareMeter);
})
salesOffices.listen(function(price, squareMeter) { // 小红订阅消息
console.log('价格=' + price);
console.log('squareMeter=' + squareMeter);
})
salesOffices.trigger(2000000, 88); // 价格=2000000 squareMeter=88
salesOffices.trigger(3000000, 110); // 价格=3000000 squareMeter=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('squareMeter88', function(price) { // 小明订阅 88 平方米房子的消息
console.log('价格=' + price); // 价格=2000000
})
salesOffices.listen('squareMeter110', function(price) { // 小红订阅 110 平方米房子的消息
console.log('价格=' + price); // 价格=3000000
})
salesOffices.trigger('squareMeter88', 2000000); // 发布 88 平方米房子的价格
salesOffices.trigger('squareMeter110', 3000000); // 发布 110 平方米房子的价格
发布-订阅模式的通用实现
假设小明又去另一个售楼处买房子，那么这段代码是否必须在另一个售楼处对象上重写一次呢，有没有办法可以让所有对象都拥有发布-订阅功能呢？
答案显然是有的，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);
}
}
};
再定义一个installEvent函数，这个函数可以给所有的对象都动态安装发布-订阅功能：
var installEvent = function(obj) {
for (var i in event) {
obj[i] = event[i];
}
};
我们给售楼处对象salesOffices动态增加发布-订阅功能：
var salesOffices = {};
installEvent(salesOffices);
salesOffices.listen('squareMeter88', function(price) { // 小明订阅 88 平方米房子的消息
console.log('价格=' + price); // 价格=2000000
})
salesOffices.listen('squareMeter110', function(price) { // 小红订阅 110 平方米房子的消息
console.log('价格=' + price); // 价格=3000000
})
salesOffices.trigger('squareMeter88', 2000000); // 发布 88 平方米房子的价格
salesOffices.trigger('squareMeter110', 3000000); // 发布 110 平方米房子的价格
取消订阅的事件
有时候，我们也许需要取消订阅事件的功能。比如小明突然不想买房子了，为了避免继续收到售楼处推送过来的短信，小明需要取消之前订阅的事件。现在我们给event对象增加remove方法：
event.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 salesOffices = {};
var installEvent = function(obj) {
for (var i in event) {
obj[i] = event[i];
}
};
installEvent(salesOffices);
salesOffices.listen('squareMeter88', fn1 = function(price) { // 小明订阅消息
console.log('价格=' + price);
})
salesOffices.listen('squareMeter110', fn2 = function(price) { // 小红订阅消息
console.log('价格=' + price);
})
salesOffices.remove('squareMeter88', fn1); // 删除小明的订阅
salesOffices.trigger('squareMeter110', 3000000); // 价格=3000000
全局的发布-订阅对象
现在的发布-订阅模式，还有两个小问题：
- 我们给每个发布者对象都添加
listen和trigger方法，以及一个缓存列表clientList，这其实是一种资源浪费。 - 小明跟售楼处对象还是存在一定的耦合性，小明至少要知道售楼处对象的名字是
salesOffices，才能顺利的订阅到事件。例如：
salesOffices.listen('squareMeter88', function(price) {
console.log('价格=' + price);
})
如果小明还关心300平方米的房子，而这套房子的卖家是salesOffices2，这意味着小明要开始订阅salesOffices2对象：
salesOffices2.listen('squareMeter300', 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) {
var fns = clientList[key];
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('squareMeter88', function(price) {
console.log('价格=' + price); // 价格=2000000
})
Event.trigger('squareMeter88', 2000000); // 售楼处发布消息
模块间通信
我们利用一个全局的Event对象可以在两个封装良好的模块中进行通信，这两个模块可以完全不知道对方的存在。
比如现在有两个模块，a模块里面有一个按钮，每次点击按钮之后，b模块里的div中会显示按钮的总点击次数，我们用全局发布-订阅模式完成下面的代码，使得a模块和b模块可以在保持封装性的前提下进行通信：
<!DOCTYPE html>
<html>
<body>
<button id="count">点我</button>
<div id="show"></div>
</body>
<script type="text/JavaScript">
var a = (function() {
var count = 0;
var button = document.getElementById('count');
button.click = function() {
Event.trigger('add', count++);
}
})();
var b = (function() {
var div = document.getElementById('show');
Event.listen('add', function(count) {
div.innerHTML = count;
});
})();
</script>
</html>
但在这里我们要留意另一个问题，模块之间如果用了太多的全局发布-订阅模式来通信，那么模块与模块之间的联系就被隐藏到了背后。我们最终会搞不清楚消息来自哪个模块，或者消息会流向哪个模块，这又会给我们的维护带来一些麻烦，也许某个模块的作用就是暴露一些接口给其他模块调用。
必须先订阅再发布吗
我们所了解到的发布-订阅模式，都是订阅者必须先订阅一个消息，随后才能接收到发布者发布的消息。如果把顺序反过来，发布者先发布一条消息，而在此之前并没有对象来订阅它，这条消息无疑将消失在宇宙中。
在某些情况下，我们需要先将这条消息保存下来，等到有对象来订阅它的时候，再重新把消息发布给订阅者。就如同QQ中的离线消息一样，离线消息被保存在服务器中，接收人下次登录上线之后，可以重新收到这条消息。
为了满足发布-订阅对象拥有先发布后订阅的能力，我们要建立一个存放离线事件的堆栈，当事件发布的时候，如果此时还没有订阅者来订阅这个事件，我们暂时把发布事件的动作包裹在一个函数里，这些包装函数将被存入堆栈中，等到终于有对象来订阅此事件的时候，我们将遍历堆栈并且依次执行这些包装函数，也就是重新发布里面的事件。当然离线事件的生命周期只有一次，就像QQ的未读消息只会被重新阅读一次，所以刚才的操作我们只能进行一次。
全局事件的命名冲突
全局的发布-订阅对象里只有一个clientList来存放消息名和回调函数，大家都通过它来订阅和发布各种消息，久而久之，难免会出现事件名冲突的情况，所以我们还可以给Event对象提供创建命名空间的功能。
在最终的代码之前，我们先来感受一下怎么使用这两个新增的功能：
// 先发布后订阅
Event.trigger('click', 1);
Event.listen('click', function(a) {
console.log(a); // 1
});
// 使用命名空间
Event.create('namespace1').listen('click', function(a) {
console.log(a); // 1
});
Event.create('namespace1').trigger('click', 1);
Event.create('namespace2').listen('click', function(a) {
console.log(a); // 2
});
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 = {},
offineStack = [], // 离线事件
ret = {
listen: function(key, fn, last) {
_listen(key, fn, cache);
if (offineStack === null) {
return;
}
if (last === 'last') {
offineStack.length && offineStack.pop()();
} else {
each(offineStack, function() {
this();
});
}
offineStack = 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 (offineStack) {
return offineStack.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);
}
};
}();
return Event;
})();
