javascript设计模式与开发实践读书笔记之发布—订阅模式

定义

发布订阅者模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。

在javascript中，我们一般用事件模型来替代传统的发布—订阅模式。

现实中的发布—订阅模式

​ 小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼MM告诉小明，不久后还有一些尾盘推出，开发商正在办理相关手续，手续办好后便可以购买。但到底是什么时候，目前还没有人能够知道。
​ 于是小明记下了售楼处的电话，以后每天都会打电话过去询问是不是已经到了购买时间。除了小明，还有小红、小强、小龙也会每天向售楼处咨询这个问题。一个星期过后，售楼MM决定辞职，因为厌倦了每天回答1000个相同内容的电话。
​ 当然现实中没有这么笨的销售公司，实际上故事是这样的:小明离开之前，把电话号码留在了售楼处。售楼MM答应他，新楼盘一推出就马上发信息通知小明。小红、小强和小龙也是一样，他们的电话号码都被记在售楼处的花名册上，新楼盘推出的时候，售楼MM会翻开花名册，遍历上面的电话号码，依次发送一条短信来通知他们。

发布—订阅模式的作用

在刚刚的例子中，发送短信通知就是一个典型的发布—订阅模式。小明、小红等购买者都是订阅者，他们订阅了房子开售的消息。售楼处作为发布者，会在合适的时候遍历花名册上的电话号码，依次给购房者发布消息。

从这个例子中可以看出使用发布—订阅模式有着显而易见的优点：

• 购房者不用天天给售楼处打电话咨询开售时间，在合适的时间点，售楼处作为发布者会通知这些消息订阅者。
• 购房者和售楼处之间不再强耦合在一起，当有新的购房者出现时，他只需把手机号码留在售楼处，售楼处不关心购房者的任何情况，不管购房者是男是女还是一只猴子。而售楼处的任何变动也不会影响购买者，比如售楼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();//模拟用户点击

自定义事件

如何实现订阅—发布模式：

• 首先要指定谁充当发布者（比如售楼处）
• 然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者（售楼处的花名单）
• 最后发布消息的时候，发布者会遍历这个缓存列表，依次出发里面存放的订阅者回调函数（遍历花名册，挨个发短信）

另外我们可以往回调函数里面填入一些参数，订阅者可以接收这些参数。这是很有必要的，比如售楼处可以在发给订阅者的短信里加上房子的单价、面积、容积率等信息，订阅者接收到这些信息之后可以进行各自的处理：

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) {
    console.log('price=' + price);
    console.log('squareMeter=' +squareMeter);
});
// 小红订阅售楼信息
salesOffices.listen(function (price) {
     console.log('price=' + price);
     console.log('squareMeter=' +squareMeter);
});

// 售楼处发布售楼信息
salesOffices.trigger(200000,88);
salesOffices.trigger(300000,110);

缺陷：订阅者接收到了发布者发布的每个消息，虽然小明指向买88平方米的房子，但是发布者把110平米的房子的信息也推送给了小明，这对小明来说是不必要的困扰。所以我们有必要增加一个标示key,让订阅者只订阅自己感兴趣的消息。

// 定义售楼处
var salesOffices = {};
// 定义客户花名册
salesOffices.clientList = [];
// 定义订阅方法
salesOffices.listen = function (key, fn) {
    // 花名册登记哪些客户订阅哪些信息（根据key来区分）
    if (!this.clientList[key]) {//如果没有订阅过此类信息，给该类消息创建一个缓存列表
        this.clientList[key] = [];
    }
    this.clientList[key].push(fn);//订阅的消息添加进消息缓存列表
}
salesOffices.trigger = function () {
    // 获取key,获取第一个参数
    var key = Array.prototype.shift.call(arguments);//去除消息类型
    var fns = this.clientList[key];//去除该消息对应的回调函数集合
    if (!fns || fns.length === 0) {  //如果没有订阅该消息，则返回
        return false;
    }
    for (var i = 0, fn; fn = fns[i++];) {
        fn.apply(this, arguments);
    }
}

// 小明定于88平米的楼盘
salesOffices.listen('squareMeter88', function (price) {
    console.log('price=' + price);
    
});
// 小红定于100平米的楼盘
salesOffices.listen('squareMeter100', function (price) {
    console.log('price=' + price);
    
});

// 售楼处发布楼盘信息
salesOffices.trigger('squareMeter88', 2000000);
salesOffices.trigger('squareMeter100', 3000000);

发布—订阅的通用实现

把发布—订阅的功能提取出来，放在一个单独的对象内

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);
        var fns = this.clientList[key];
        if (!fns || fns.length === 0) {   //如果没有绑定对应的消息
            return false;
        }
        for (var i=0,fn;fn=fns[i++];) {
            fn.apply(this, arguments);
        }
    }
}

再定义一个installEvent函数，这个函数可以给所有的对象都动态安装发布—订阅者功能：

function installEvent(obj) {
    for (var i in event) {
        obj[i] = event[i];
    }
}

测试，给售楼处对象salesOffices动态添加发布—订阅功能：

var salesOffices = {};
installEvent(salesOffices);

salesOffices.listen('squareMeter88', function(price) {
    console.log('price=' + price);  
});
salesOffices.listen('squareMeter100', function(price) {
   console.log('price=' + price); 
});
salesOffices.trigger('squareMeter88',200000);
salesOffices.trigger('squareMeter100',300000);

取消订阅的事件

有时候，我们也许需要取消订阅事件的功能。比如小明突然不想买房子了，为了避免继续接收到售楼处推送过来的短信，小明需要取消之前订阅的事件。现在我们给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=' + price);  
});
salesOffices.listen('squareMeter100', function(price) {//小红订阅消息
   console.log('price=' + price); 
});
salesOffices.remove('squareMeter88',fn1);  //删除小明的订阅
salesOffices.trigger('squareMeter100',200000);   //输出：20000

参考：《javascript设计模式与开发实践》