摘自《JavaScript设计模式与开发实践》
发布 - 订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript开发中，我们一般用事件模型来替代传统的发布 - 订阅模式。
这是一种创建松散耦合代码的技术。它定义对象间 一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。
Dom 事件
实际上，只要我们曾经在 DOM 节点上面绑定过事件函数，那我们就曾经使用过发布 - 订阅模式，来看看下面这两句简单的代码发生了什么事情？
document.body.addEventListener('click', function() {
alert('2')
}, false)
document.body.click() // 模拟用户点击
在这里我们需要监控用户点击的动作，但是我们不知道用户在什么时候点击。所以我们订阅了 doument.body 上的 click 事件。body 节点被点击的时候， body 节点便会向订阅者发布这个消息。
自定义事件
除了 Dom 事件，我们经常还会实现一些自定义事件，这种依靠自定义事件完成的发布-订阅模式可以用于任何 javaScript 代码中。
- 首先要确定好谁充当发布者
- 然后给发布者添加一个缓存列表，以便通知订阅者
- 最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者的回调函数（我们可以在回调函数中填入一些参数，订阅者可以接收这些参数）
现实情景
小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼MM告诉小明，不久后还有一些尾盘推出，开发商正在办理相关手续，手续办好后便可以购买。
小明离开之前，把电话号码留在了售楼处。售楼MM 答应他，新楼盘一推出就马上发信息通知小明。小红、小强和小龙也是一样，他们的电话号码都被记在售楼处的花名册上，新楼盘推出的时候，售楼 MM会翻开花名册，遍历上面的电话号码，依次发送一条短信来通知他们。
在刚刚的例子中，发送短信通知就是一个典型的发布 -订阅模式，小明、小红等购买者都是订阅者，他们订阅了房子开售的消息。售楼处作为发布者，会在合适的时候遍历花名册上的电话号码，依次给购房者发布消息。
- 购房者不用再天天给售楼处打电话咨询开售时间，在合适的时间点，售楼处作为发布者会通知这些消息订阅者。
- 购房者和售楼处之间不再强耦合在一起，当有新的房者出现时，他只需把手机号码留在售楼处，售楼处不关心购房者的任何情况，不管购房者是男是女。 而售楼处的任何变动也不会影响购买者，比如售楼 MM 离职，售楼处从一楼搬到二楼，这些改变都跟购房者无关，只要售楼处记得发短信这件事情。
let salesOffices = {}; // 定义售楼处
salesOffices.clientList = []; // 缓存列表，存放订阅者的回调函数
salesOffices.listen = function (fn) { // 增加订阅者
this.clientList.push(fn); // 订阅的消息添加进缓存列表
};
salesOffices.trigger = function () { // 发布消息
for (let i = 0, fn; fn = this.clientList[i++];) {
fn.apply(this, arguments); // (2) // 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); // 输出：200 万，88 平方米
salesOffices.trigger(3000000, 110); // 输出：300 万，110 平方米
至此，我们已经实现了一个最简单的发布 - 订阅模式，但这里还存在一些问题。我们看到订阅者接收到了发布者发布的每个消息，虽然小明只想买 88 平方米的房子，但是发布者把 110 平方米的信息也推送给了小明，这对小明来说是不必要的困扰。所以我们有必要增加一个标示 key ，让订阅者只订阅自己感兴趣的消息。改写后的代码如下：
let salesOffices = {}; // 定义售楼处
salesOffices.clientList = {}; // 缓存列表，存放订阅者的回调函数
salesOffices.listen = function (key, fn) {
if (!this.clientList[key]) { // 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
this.clientList[key] = [];
}
this.clientList[key].push(fn); // 订阅的消息添加进消息缓存列表
};
salesOffices.trigger = function () { // 发布消息
let key = Array.prototype.shift.call(arguments), // 取出消息类型
fns = this.clientList[key]; // 取出该消息对应的回调函数集合
if (!fns || fns.length === 0) { // 如果没有订阅该消息，则返回
return false;
}
for (let i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments); // (2) // 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 作为一门解释执行的语言，给对象动态添加职责是理所当然的事情。所以我们把发布 - 订阅的功能提取出来，放在一个单独的对象内：
const event = {
clientList: [],
listen: function( key, fn ){
if ( !this.clientList[ key ] ){
this.clientList[ key ] = [];
}
this.clientList[ key ].push( fn ); // 订阅的消息添加进缓存列表
},
trigger: function(){
let key = Array.prototype.shift.call( arguments ), // (1);
fns = this.clientList[ key ];
if ( !fns || fns.length === 0 ){ // 如果没有绑定对应的消息
return false;
}
for( let i = 0, fn; fn = fns[ i++ ]; ){
fn.apply( this, arguments ); // (2) // arguments 是 trigger 时带上的参数
}
}
};
取消订阅的事件
有时候，我们也许需要取消订阅事件的功能。比如小明突然不想买房子了，为了避免继续接收到售楼处推送过来的短信，小明需要取消之前订阅的事件。现在我们给 event 对象增加 remove方法。
event.remove = function (key, fn) {
const fns = this.clientList[key];
if (!fns) { // 如果 key 对应的消息没有被人订阅，则直接返回
return false;
}
if (!fn) { // 如果没有传入具体的回调函数，表示需要取消 key 对应消息的所有订阅
fns && ( fns.length = 0 );
} else {
for (let l = fns.length - 1; l >= 0; l--) { // 反向遍历订阅的回调函数列表
let _fn = fns[l];
if (_fn === fn) {
fns.splice(l, 1); // 删除订阅者的回调函数
}
}
}
};
const salesOffices = {};
let installEvent = function (obj) {
for (let i in event) {
obj[i] = event[i];
}
}
installEvent(salesOffices);
salesOffices.listen('squareMeter88', fn1 = function (price) { // 小明订阅消息
console.log('价格= ' + price);
});
salesOffices.listen('squareMeter88', fn2 = function (price) { // 小红订阅消息
console.log('价格= ' + price);
});
salesOffices.remove('squareMeter88', fn1); // 删除小明的订阅
salesOffices.trigger('squareMeter88', 2000000); // 输出：2000000
全局的发布－订阅对象
在现实中，买房子未必要亲自去售楼处，我们只要把订阅的请求交给中介公司，而各大房产公司也只需要通过中介公司来发布房子信息。这样一来，我们不用关心消息是来自哪个房产公司，我们在意的是能否顺利收到消息。当然，为了保证订阅者和发布者能顺利通信，订阅者和发布者都必须知道这个中介公司。
同样在程序中，发布 — 订阅模式可以用一个全局的 Event 对象来实现，订阅者不需要了解消息来自哪个发布者，发布者也不知道消息会推送给哪些订阅者， Event 作为一个类似“中介者”的角色，把订阅者和发布者联系起来。见如下代码：
<script>
const Event = (function () {
let clientList = {}
let listen, trigger, remove
listen = function (key, fn) { // 根据不同的 key 创建数组，并将要订阅的函数放入数组中
if (!clientList[key]) {
clientList[key] = []
}
clientList[key].push(fn)
}
trigger = function () {
let key = Array.prototype.shift.call(arguments) // 在发布的时候，取得 key 值作为标识
let fns = clientList[key]
if (!fns || fns.length === 0) { // 函数不存在的时候
return false
}
for (let i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments)
}
}
remove = function(key, fn) {
let fns = clientList[key];
if (!fns) {
return false;
}
if (!fn) {
fns && ( fns.length = 0 );
} else {
for (let l = fns.length - 1; l >= 0; l--) {
let _fn = fns[l];
if (_fn === fn) {
fns.splice(l, 1);
}
}
}
}
return {
listen: listen,
trigger: trigger,
remove: remove
}
})()
</script>
