设计模式之--发布-订阅模式

xiao_guo
578 阅读12分钟

1.定义

发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所以依赖于它的对象都将得到通知。在JavaScript开发中，一般用事件模型来代替传统的发布-订阅模式。

2.现实中的发布-订阅模式

小明、小红、小强去买房，但是该楼盘的房子已售罄，售楼人员告诉他们，不久后还有一些尾盘推出，但是时间还不确定。小明、小红、小强就把电话给了售楼人员，新楼盘一推出就马上发消息通知他们。他们的电话号码都被记在售楼处的花名册上，新楼盘推出的时候，售楼人员会翻开花名册，遍历上面的电话号码，依次发送短信来通知他们。

3.发布-订阅模式的作用

上面的例子中使用发布-订阅模式有着显而易见的优点

  • 购房者不用再天天给售楼处打电话咨询开售时间，在合适的时间点，售楼处作为发布者会通知这些订阅消息

  • 购房者和售楼处之间不再强耦合在一起，当有新的购房者出现时，他只需把手机号码留在售楼处，售楼处不关心购房者的任何情况。而售楼处的任何变动也不会影响购买者，比如售楼人员离职，售楼处从一楼搬到二楼，这些改变都跟购房者无关，只要售楼处记得发短信这件事情。

第一点说明发布-订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。比如,可以订阅ajax请求的error、succ等事件。在异步编程中使用发布-订阅模式，无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。

第二点说明发布-订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。发布-订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。当有新的订阅者出现时，发布者的代码不需要任何修改；同样发布者需要改变时，也不会影响到之前的订阅者。只要之前约定的事件名没有变化，就可以自由地改变它们。

4. 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();

5. 自定义事件

如何实现发布-订阅模式

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

还可以往回调函数里填入一些参数，订阅者可以接受这些参数

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);
    }
}

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(20000, 88)
salesOffices.trigger(30000, 99)

已经实现了一个简单的发布-订阅模式，但存在一些问题。订阅者接收到了发布者发布的每个消息，虽然小明只想买88平方米的房子，但是发布者把99平方米的信息也推给了小明。有必要增加一个标示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);
    }
}

salesOffices.listen('squareMeter88',function(price) { //小明订阅消息
    console.log('价格='+price)
})

salesOffices.listen('squareMeter99',function(price) { //小红订阅消息
    console.log('价格='+price)
})

salesOffices.trigger('squareMeter88, 88)
salesOffices.trigger('squareMeter99, 99)

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

6. 发布-订阅模式的通用实现

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

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);
        }
   }
}

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

给售楼处对象 salesOffices 动态增加发布-订阅功能

var salesOffices = {}
installEvent(salesOffices)

salesOffices.listen('squareMeter88',function(price) { //小明订阅消息
    console.log('价格='+price)
})

salesOffices.listen('squareMeter99',function(price) { //小红订阅消息
    console.log('价格='+price)
})

salesOffices.trigger('squareMeter88', 88)
salesOffices.trigger('squareMeter99', 99)

7. 取消订阅的事件

给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, i); // 删除订阅者的回调函数
           }
       }
   }
}

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

installEvent(salesOffices)

salesOffices.listen('squareMeter88',function(price) { //小明订阅消息
    console.log('价格='+price)
})

salesOffices.listen('squareMeter99',function(price) { //小红订阅消息
    console.log('价格='+price)
})

salesOffices.remove('squareMeter88', 88)
salesOffices.trigger('squareMeter99', 99)

8. 例子----网站登录

网站里有很多模块需要用到用户信息，用户信息是接口请求返回的

不使用发布-订阅模式，写法如下

login.succ(function(data){
    header.setAvatar(data.avatar); // 设置header模块的头像
    nav.setAvatar(data.avatar); // 设置导航模块的头像
    message.refresh(); // 刷新消息列表
    cart.refresh() // 刷新购物车列表
})

这些模块和用户信息模块产生了强耦合，这种耦合性会使程序变得僵硬

用发布-订阅模式重写之后，对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。当登录成功时，登录模块只需要发布登录成功的信息，而业务方接收到消息之后，就会开始进行各自的业务处理，登录模块并不关心业务方究竟要做什么，也不用去了解它们的内部细节

使用发布-订阅模式，写法如下

$.ajax('http://xxx?.login', function(data){ // 登录成功
    login.trigger('loginSucc', data) //发布登录成功后的消息
})

各模块监听登录成功的消息

var header = (function(){ // header模块
    login.listen('loginSucc', function(data){
        header.setAvatar(data.avatar);
    })
    return {
        setAvatar: function(data) {
            ...
        }
    }
})()

var nav = (function(){ // nav模块
    login.listen('loginSucc', function(data){
        header.setAvatar(data.avatar);
    })
    return {
        setAvatar: function(data) {
            ...
        }
    }
})()

9. 全局的发布-订阅对象

上面实现的发布-订阅模式，给售楼处对象和登录对象都添加了订阅和发布的功能，存在两个问题：

  • 给每个发布者对象都添加了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 = {},
       listern,
       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) {  // 如果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, i); // 删除订阅者的回调函数
               }
           }
       }
    }
    
    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
   
})()

Event.listen('squareMeter88', function(price){ // 小红订阅消息
   console.log('价格='+price)
})

Event.trigger('squareMeter88', 2000000) //售楼处发布消息

10.模块间通信

上面实现的发布-订阅模式的实现，是基于一个全局的Event对象， 利用它可以在两个封装好的模块中进行通信，这两个模块可以完全不知道对方的存在。

var a = (function(){
    var count = 0
    var button = document.getElementById('count');
    button.onclick = function(){
        Event.trigger('add', count++)
    }
})()

var b =(function(){
    var div = document.getElementById('show');
    Event.listen('add', function(count){
        div.innerHTML = count
    })
})()

在这里需要留意另一个问题，模块之间如果用了太多的全局发布-订阅模式来通信，那么模块与模块之间的联系就被隐藏到了背后。最终会搞不清楚消息来自哪个模块，或者消息会流向哪些模块，这又会给维护带来一些麻烦，也许某个模块的作用就是暴露一些接口给其他模块调用

如果发布-订阅对象要拥有先发布后订阅的能力，需要建立一个存放离线事件的堆栈，当事件发布的时候，如果此时还没有订阅者来订阅这个事件，要暂时把发布事件的动作包裹在一个函数里，这些包裹函数将被存入堆栈中，等到终于有对象来订阅此事件的时候，再遍历堆栈并且依次执行这些包裹函数，也就是重新发布里面的事件。当然离线事件的生命周期只有一次。

11. 全局事件的命名冲突

全局的发布-订阅对象里只有一个clientList来存放消息名和回调函数，大家都通过它来订阅和发布各种消息，久而久之，可能会出现事件名冲突的情况，所以可以给Event对象提供创建命名空间的功能

先体验下这个功能

Event.create('namespace1').listen('click', function(a){
    console.log(a)
})

Event.create('namespace1').trigger('click', 1);

Event.create('namespace2').listen('click', function(a){
    console.log(a)
})

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 = {},
                    offlineStack = [],
                    ret = {
                        listen: function(key, fn, last){
                            _listen(key, fn, cache);
                            if (offlineStack === null) {
                                return;
                            }
                            if (last === 'last') {
                                offlineStack.length && offlineStack.pop()
                            } else {
                                each(offlineStack, function(){
                                    this();
                                })
                            }
                            
                            offlineStack = 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 (offlineStack) {
                            return offlineStack.push(fn);
                        }
                        return fn();
                    }
                }
            
                return namespace ? 
                    (namespaceCache[namespace] ? namespaceCache[namespace] : namespace[namespace] = ret) : ret; 
    }
    
    return {
        create: _create,
        one: function(key, fn, last) {
            var event = this.create();
            event.once(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;

})();

12. JavaScript实现发布-订阅模式的便利性

在JS中，用注册回调函数的形式来代替传统的发布-订阅模式，显得更加优雅和简单

在JS中，无需选择使用推模型还是拉模型。推模型是指在事件发生时，发布者一次性把所有更改的状态和数据都推送给订阅者。拉模型不同的地方是，发布者仅仅通知订阅者事件已经发生了，此外发布者要提供一些公开的接口供订阅者来主动拉取数据。拉模型的好处是可以让订阅者“按需获取”，但同时有可能让发布者变成一个“门户大开”的对象，同时增加了代码量和复杂度。

在JS中，arguments可以很方便地表示参数列表，所以一般都会选择推模型，使用Function.prototype.apply方法把所有参数都推给订阅者

13.小结

发布-订阅模式，也就是常说的观察者模式。发布-订阅模式在实际开发中非常有用

发布-订阅模式的优点非常明显，一为时间上的解耦，二为对象之间的解耦。应用非常广泛，既可以用在异步编程中，也可以帮助完成更松藕的代码编写。发布-订阅模式还可以用来帮助实现一些别的设计模式，比如中介模式。从架构上看，无论是MVC还是MVVM,都少不了发布-订阅模式的参与，而且JS本身也是一门基于事件驱动的语言。

当然，发布-订阅模式也不是完全没有缺点。创建订阅者本身要消耗一定的时间和内存，而且当你订阅一个消息后，也许此消息最后都未发生，但这个订阅会始终存在于内存中。另外，发布-订阅模式虽然可以弱化对象之间的联系，但如果过度使用的话，对象和对象之间的必要联系也将深埋在背后，会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候，要跟踪一个bug不是件轻松的事情。

avatar
文章
阅读
粉丝