深刻理解JavaScript中设计模式之发布-订阅模式

上个月本身花了 1300 买了阿(a)里(li)的 服 务 器来学习 node 及对应的框架，在 11 号以前它们有作活动，1300 的配置如今一年只要 86 元，三年只要229元，真心以为很划算了，能够点击本条内容进行参与

发布订阅模式介绍

发布---订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，全部依赖于它的对象都将获得通知。

现实生活中的发布-订阅模式；

好比小红最近在淘宝网上看上一双鞋子，可是呢 联系到卖家后，才发现这双鞋卖光了，可是小红对这双鞋又很是喜欢，因此呢联系卖家，问卖家何时有货，卖家告诉她，要等一个星期后才有货，卖家告诉小红，要是你喜欢的话，你能够收藏咱们的店铺，等有货的时候再通知你，因此小红收藏了此店铺，但与此同时，小明，小花等也喜欢这双鞋，也收藏了该店铺；等来货的时候就依次会通知他们；

在上面的故事中，能够看出是一个典型的发布订阅模式，卖家是属于发布者，小红，小明等属于订阅者，订阅该店铺，卖家做为发布者，当鞋子到了的时候，会依次通知小明，小红等，依次使用旺旺等工具给他们发布消息； 发布订阅模式的优势：

1. 支持简单的广播通讯，当对象状态发生改变时，会自动通知已经订阅过的对象。 好比上面的列子，小明，小红不须要每天逛淘宝网看鞋子到了没有，在合适的时间点，发布者(卖家)来货了的时候，会通知该订阅者(小红，小明等人)。

2. 发布者与订阅者耦合性下降，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用，同时，订阅者只监听发布者的事件名，只要发布者的事件名不变，它无论发布者如何改变；同理卖家（发布者）它只须要将鞋子来货的这件事告诉订阅者(买家)，他无论买家到底买仍是不买，仍是买其余卖家的。只要鞋子到货了就通知订阅者便可。

对于第一点，咱们平常工做中也常用到，好比咱们的ajax请求，请求有成功(success)和失败(error)的回调函数，咱们能够订阅ajax的success和error事件。咱们并不关心对象在异步运行的状态，咱们只关心success的时候或者error的时候咱们要作点咱们本身的事情就能够了~

发布订阅模式的缺点：

建立订阅者须要消耗必定的时间和内存。

虽然能够弱化对象之间的联系，若是过分使用的话，反而使代码很差理解及代码很差维护等等。

2. 如何实现发布--订阅模式？

   1. 首先要想好谁是发布者(好比上面的卖家)。

   2. 而后给发布者添加一个缓存列表，用于存放回调函数来通知订阅者(好比上面的买家收藏了卖家的店铺，卖家经过收藏了该店铺的一个列表名单)。

   3. 最后就是发布消息，发布者遍历这个缓存列表，依次触发里面存放的订阅者回调函数。

咱们还能够在回调函数里面添加一点参数，好比鞋子的颜色，鞋子尺码等信息；

咱们先来实现下简单的发布-订阅模式；代码以下：

var shoeObj = {}; // 定义发布者
shoeObj.list = []; // 缓存列表 存放订阅者回调函数
        
// 增长订阅者
shoeObj.listen = function(fn) {
    shoeObj.list.push(fn);  // 订阅消息添加到缓存列表
}

// 发布消息
shoeObj.trigger = function(){
    for(var i = 0,fn; fn = this.list[i++];) {
        fn.apply(this,arguments); 
    }
}
// 小红订阅以下消息
shoeObj.listen(function(color,size){
    console.log("颜色是："+color);
    console.log("尺码是："+size);  
});

// 小花订阅以下消息
shoeObj.listen(function(color,size){
    console.log("再次打印颜色是："+color);
    console.log("再次打印尺码是："+size); 
});
shoeObj.trigger("红色",40);
shoeObj.trigger("黑色",42);
复制代码

上面的代码，咱们再来运行打印下 以下：

打印如上截图，咱们看到订阅者接收到发布者的每一个消息，可是呢，对于小红来讲，她只想接收颜色为红色的消息，不想接收颜色为黑色的消息，为此咱们须要对代码进行以下改造下，咱们能够先增长一个key，使订阅者只订阅本身感兴趣的消息。代码以下：

var shoeObj = {}; // 定义发布者
shoeObj.list = []; // 缓存列表 存放订阅者回调函数
        
// 增长订阅者
shoeObj.listen = function(key,fn) {
    if(!this.list[key]) {
        // 若是尚未订阅过此类消息，给该类消息建立一个缓存列表
        this.list[key] = []; 
    }
    this.list[key].push(fn);  // 订阅消息添加到缓存列表
}

// 发布消息
shoeObj.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 是发布消息时附送的参数
    }
};

// 小红订阅以下消息
shoeObj.listen('red',function(size){
    console.log("尺码是："+size);  
});

// 小花订阅以下消息
shoeObj.listen('block',function(size){
    console.log("再次打印尺码是："+size); 
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);
复制代码

上面的代码，咱们再来运行打印下 以下：

能够看到，订阅者只订阅本身感兴趣的消息了；

3. 发布---订阅模式的代码封装

咱们知道，对于上面的代码，小红去买鞋这么一个对象shoeObj 进行订阅，可是若是之后咱们须要对买房子或者其余的对象进行订阅呢，咱们须要复制上面的代码，再从新改下里面的对象代码；为此咱们须要进行代码封装；

以下代码封装：

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];
    }
};
// 咱们再来测试下，咱们仍是给shoeObj这个对象添加发布-订阅功能；
var shoeObj = {};
initEvent(shoeObj);

// 小红订阅以下消息
shoeObj.listen('red',function(size){
    console.log("尺码是："+size);  
});

// 小花订阅以下消息
shoeObj.listen('block',function(size){
    console.log("再次打印尺码是："+size); 
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);
复制代码

4. 如何取消订阅事件？

好比上面的列子，小红她忽然不想买鞋子了，那么对于卖家的店铺他不想再接受该店铺的消息，那么小红能够取消该店铺的订阅。

以下代码：

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 shoeObj = {};
initEvent(shoeObj);

// 小红订阅以下消息
shoeObj.listen('red',fn1 = function(size){
    console.log("尺码是："+size);  
});

// 小花订阅以下消息
shoeObj.listen('red',fn2 = function(size){
    console.log("再次打印尺码是："+size); 
});
shoeObj.remove("red",fn1);
shoeObj.trigger("red",42);
复制代码

运行结果以下：

5. 全局--发布订阅对象代码封装

咱们再来看看咱们传统的ajax请求吧，好比咱们传统的ajax请求，请求成功后须要作以下事情：

1. 渲染数据。

2. 使用数据来作一个动画。

那么咱们之前确定是以下写代码：

$.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(size) {
    console.log("尺码为:"+size); // 打印出尺码为42
});
Event.trigger("color",42);
复制代码

6. 理解模块间通讯

咱们使用上面封装的全局的发布-订阅对象来实现两个模块之间的通讯问题；好比如今有一个页面有一个按钮，每次点击此按钮后，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;
    });
})();
复制代码

下面是html代码以下，JS应用以下引用便可：

<!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个模块之间如何使用发布-订阅模式之间的通讯问题；

其中global.js 就是咱们上面封装的全局-发布订阅模式对象的封装代码；