发布-订阅者模式详解（大神出门又拐， 慢走不送， 本篇摘自javaScript设计模式与开发实践 - 曾探 纯手抄很累的 ^_）

什么是发布订阅模式呢， 简单说啊， 比如小明最近看上一套房子， 到了售楼处才被告知该楼盘已售罄， 然后性感的售楼MM告诉小明之后还会有一个新的楼盘开盘， 至于什么时候开售并不确定， 于是乎小明万分期待的记下了售楼MM的电话， 并且每天会打电话去询问， 同样的还有小a, 小b, 小c, 小d, 售楼MM要崩溃了， 她一天接到n个询问的电话
当然现实中没有这么傻的售楼MM， 正常应该是这样操作的： 小明离开后， 留下了自己的电话号，同样小a, 小b, 小c, 小d也是如此， 售楼妹子答应他们， 只要楼盘一开售， 就会立马给他们打电话依次通知

上边这个例子就是一个典型的发布-订阅模式 小名，小a等购买者都是订阅者， 他们订购了房子开售的消息。 而售楼处是发布者，在合适的事件他们会遍历花名册上的电话好嘛， 依次给购买者发布购房消息。

首先我们先写一个最简单的例子 - 自定义实现

   var salesBuilding = {};     // 定义售楼处

    salesBuilding.clientList = []; // 订阅者列表

    salesBuilding.listen = function(fn) { // 增加订阅者
        this.clientList.push(fn);
    };

    salesBuilding.target = function() { // 发布消息
        for(var i = 0, fn; fn = this.clientList[i++];) {
            fn.apply(this, arguments);
        }
    }
    // 简单测试一下
    salesBuilding.listen(function(price, squareMeter) { // 小明订阅
        console.log('价格=' + price);
        console.log('平方米=' + squareMeter);
    });

    salesBuilding.listen(function(price, squareMeter) { // 小红订阅
        console.log('价格=' + price);
        console.log('平方米=' + squareMeter);
    });
    // salesBuilding.target(1000000, 80); // 输出： 100W， 80平米
    // salesBuilding.target(1300000, 100); // 输出： 130W， 100平米

ok， 一个简单的订阅-发布者已经完成，但是这里有一个小小的问题， 比如说小明只想订阅80平米的房子， 但是发布者却把100平米的房子的消息也推送给了小明， 这对小明来说是不必要的困扰， 所以我们有必要增加一个表示key， 先不要猴急的往下看， 自己该如何实现呢～～
小伙伴们不要掉队， 跟着我的思路 走～ 走 走 走你～

代码如下

    var salesBuilding = {};     // 定义售楼处

    salesBuilding.clientList = {}; // 订阅者列表

    salesBuilding.listen = function(key, fn) { // 增加订阅者
        if (!this.clientList[key]) { //如果没有订阅过此类消息， 就给此类消息创建一个缓存列表
            this.clientList[key] = [];
        }
        this.clientList[key].push(fn);
    };

    salesBuilding.target = function() {
        var key = Array.prototype.shift.call(arguments); // 取出key
        var fns = this.clientList[key]; // 取出该key对应的回调函数集合
        
        if (!fns || fns.length === 0) { // 如果没有订阅 返回false
            return false;
        }

        for (var i = 0, fn; fn = fns[i++];) { // 有订阅就遍历执行回调函数
            fn.apply(this, arguments); 
        }
    }

    salesBuilding.listen('squareMeter80', function(price) { // 小红订阅
        console.log('价格=' + price);
    })

    salesBuilding.listen('squareMeter100', function(price) { // 小明订阅
        console.log('价格=' + price);
    })

    salesBuilding.target('squareMeter80', '100W'); // 输出 100W
    salesBuilding.target('squareMeter100', '130W'); // 输出 130W

大功告成 现在订阅者可以只订阅自己感兴趣的事件了

取消订阅事件

你以为这就完了吗？ 怎么可能， 哼哼哼
有时候我们我们也需要取消订阅事件的功能， 比如小明突然不想买房子了， 为了避免继续接受售楼妹子的骚扰， 小明需要取消之前的订阅的事件
ok， 思考， 思考一下～

代码贴上

    salesBuilding.remove = function(key, fn) { // 删除功能
        var fns = this.clientList[key];
        if (!fns) { // 如果key对应的消息没有被订阅， 则直接false
            return false;
        }
        if (!fn) {
            fns && (fns.length = 0); // 如果没有传入具体要删除的回调函数， 则直接清空key对应的所有订阅
        }
        for(var i = fns.length - 1; i >= 0; i--) { // 这里需要反向遍历， 不懂自己百度
            var _fn = fns[i]
            if (_fn === fn) {
                fns.splice(i, 1); // 删除订阅者的回调函数
            }
        }
    }
    // 测试一下下

    salesBuilding.remove('squareMeter80'); // 删除88平米的订阅
    salesBuilding.target('squareMeter80', '100W'); // 不会输出
    salesBuilding.target('squareMeter100', '130W'); // 输出 130W

全局的发布订阅对象

回想一下刚才实现的发布-订阅模式， 我们给售楼处添加了发布-订阅模式的功能， 可这里还存在两个小问题

1 我们给每个对象都添加listen和target方法， 以及一个缓存列表， 其实是浪费资源的。
2 小明跟售楼处对象还是存在一定耦合性的， 小明至少要知道售楼处对象的名字是salesBuilding， 才能顺利订阅

代码如下

    salesBuilding.listen('squareMeter80', f = function(price) { // 小明订阅
         console.log('价格=' + price);
    })

如果小明还关心300平米的房子， 而这套房子的卖家是salesBuilding2222的房子， 这意味着小明还需要订购salesBuilding2222

代码如下

    salesBuilding2222.listen('squareMeter80', f = function(price) { // 小明订阅
        console.log('价格=' + price);
    })

其实在现实中， 买房子未必要亲自去售楼处， 只要把我们订阅的请求交给中介公司， 而各大房产中心也只需要通过中介公司来发布房子信息， 这样以来， 我们就不需要关注消息是来自哪个房产公司的。
同样在程序中， 发布-订阅模式可以用一个全局event对象来实现， 订阅者不需要了解消息来自哪个发布者， 发布者也不知道消息会推送到哪个订阅者， event作为一个类似中介的角色，把订阅者和发布者联系了起来。 (其实就是把之前的代码稍微组装一下)

    var event = (function() {
        var clientList = {};
        var listen = [];
        var target = [];
        var remove = [];


        listen = function(key, fn) { // 增加订阅者
            if (!clientList[key]) { //如果没有订阅过此类消息， 就给此类消息创建一个缓存列表
                clientList[key] = [];
            }
            clientList[key].push(fn);
        };


        remove = function(key, fn) { // 删除功能
            var fns = clientList[key];
            if (!fns) { // 如果key对应的消息没有被订阅， 则直接false
                return false;
            }
            if (!fn) {
                fns && (fns.length = 0); // 如果没有传入具体要删除的回调函数， 则直接清空key对应的所有订阅
            }
            for(var i = fns.length - 1; i >= 0; i--) { // 这里需要反向遍历， 不懂自己百度
                var _fn = fns[i]
                if (_fn === fn) {
                    fns.splice(i, 1); // 删除订阅者的回调函数
                }
            }
        };


        target = function() {
            var key = Array.prototype.shift.call(arguments); // 取出key
            var fns = clientList[key]; // 取出该key对应的回调函数集合
            
            if (!fns || fns.length === 0) { // 如果没有订阅 返回false
                return false;
            }

            for (var i = 0, fn; fn = fns[i++];) { // 有订阅就遍历执行回调函数
                fn.apply(this, arguments); 
            }
        }

        return {
            target,
            remove,
            listen
        };
    })();

    event.remove('squareMeter80'); // 删除88平米的订阅
    event.target('squareMeter80', '100W'); // 不会输出
    event.target('squareMeter100', '130W'); // 输出 130W