【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=88
salesOffices.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