【JavaScript设计模式】行为型设计模式--发布-订阅模式

       发布-订阅者模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。那具体的含义，就是有订阅者和发布者，两者的功能，订阅是请求在某些事件(event)到达时可以通知它并执行对应的动作(action)，而发布则相对的是向订阅告知事件(event)已经到达，你可以执行对应的动作(action)了。

      举一个现实中的例子。我们在现实中可以看到一个现象：假如A要去买房子，那么这个A就会把自己的联系方式给售楼处的负责人，只要楼盘有房子就会通知A，然后A就可以过去看房子，买房子，就不需要每天都去打电话询问是不是到了购买时间，这个例子就可以利用发布-订阅者模式进行实现，这个售楼处负责人是发布者，A是订阅者，接下来我们实现简单的发布-订阅者模式。

代码如下：

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);}};//A订阅消息salesOffices.listen( function(price, squareMeter){console.log('价格=' + price);console.log('squareMeter=' + squareMeter);});//B订阅消息salesOffices.listen( function(price, squareMeter){console.log('价格=' + price);console.log('squareMeter=' + squareMeter);});salesOffices.trigger(20000,88);//价格=20000  squareMeter=88salesOffices.trigger(30000,110); //价格=30000  squareMeter=110

     以上代码实现了最简单的发布-订阅模式，但是这里还存在一些问题。我们看到订阅者接收到了发布者发布的每个消息，虽然A只想买88平方米的房子，但是发布者把110平方米的信息也发给了A，这对于小明来说是不必要的，所以我们需要增加一个标识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('squareMeter80', function(price){console.log('价格=' + price);});salesOffices.listen('squareMeter100', function(price){console.log('价格=' + price);});salesOffices.trigger('squareMeter80',20000);  //发布88平方米房子的价格salesOffices.trigger('squareMeter100',30000); //发布110平方米房子的价格

     接下来实现一个通用的发布-订阅模式。

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);}},//取消订阅remove : function(){var fns = this.clientList[ key ];if( !fns){return false;}if( !fn){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 installEvent = function ( obj ){for( var i in event){obj[ i ] = event[ i ];}} 

测试：

var salesOffices = {};var fn1,fn2;installEvent(salesOffices);//A订阅消息salesOffices.listen('squareMeter88', fn1 = function( price ){console.log('价格=' + price);});//B订阅消息salesOffices.listen('squareMeter88', fn2 = function( price ){console.log('价格=' + price);});salesOffices.remove('squareMeter88', fn1 );//删除A的订阅salesOffices.trigger('squareMeter88', 20000 );//价格=20000