前端的设计模式-发布订阅者模式

前端的设计模式-发布订阅者模式

发布订阅者模式：对象的一对多的关系；

情景：比如某地的一个楼盘非常火爆，当开盘的时候，需要通知张三、李四、王五等购买者的过来购买。

var salesOffices = {};//定义一个对象：开发商
saleOffices.clientList = []; //收集购买者的数组
saleOffices.listen = function(fn){
	this.clentList.push(fn);
}
salesOffices.trigger = function(){ //楼盘开盘了，通知购买者过来购买
	for( var i = 0; i < this.clientList.length; i++ ){
    	this.clientList[i].apply(this,arguments);
    }
}
saleOffices.listen(function(price,squareMeter){
	console.log('张三购买'，'价格：'+price, '面积：'+squareMeter)
})
saleOffices.listen(function(price,squareMeter){
	console.log('李四购买'，'价格：'+price, '面积：'+squareMeter)
})
saleOffices.listen(function(price,squareMeter){
	console.log('王五购买'，'价格：'+price, '面积：'+squareMeter)
})
saleOffices.listen(function(price,squareMeter){
	console.log('冯六购买'，'价格：'+price, '面积：'+squareMeter)
})
saleOffices.trigger(10000,100)；
输出结果：张三购买，价格：10000, 面积：100
		  李四购买，价格：10000, 面积：100
		  王五购买，价格：10000, 面积：100
		  冯六购买，价格：10000, 面积：100

情景：楼盘开盘有两种户型，100平方和120平方，张三、李四只对100平方的感兴趣，王五、冯六只对120平方感兴趣。

var salesOffices = {};//定义一个对象：开发商
saleOffices.clientList = {"square100":[],"square120":[]}; //收集购买者的数组
saleOffices.listen = function(key,fn){
	if(!this.clientList[key]){
		this.clientList[key] = [];
    }
	this.clentList[key].push(fn);
}
salesOffices.trigger = function(){ //楼盘开盘了，通知购买者过来购买
	var key = Array.prototype.shift.call(arguments) //取出对应的key
	var fns = this.clientList[key]; //取出对应的key的数组执行
	for( var i = 0; i < fns.length; i++ ){
    	fns[i].apply(this,arguments);
    }
}
saleOffices.listen("square100"，function(price,squareMeter){
	console.log('张三购买'，'价格：'+price, '面积：'+squareMeter)
})
saleOffices.listen("square100"，function(price,squareMeter){
	console.log('李四购买'，'价格：'+price, '面积：'+squareMeter)
})
saleOffices.listen("square120"，function(price,squareMeter){
	console.log('王五购买'，'价格：'+price, '面积：'+squareMeter)
})
saleOffices.listen("square120"，function(price,squareMeter){
	console.log('冯六购买'，'价格：'+price, '面积：'+squareMeter)
})
saleOffices.trigger("square100",10000,100)；
saleOffices.trigger("square120",12000,120)；
输出结果：张三购买，价格：10000, 面积：100
		  李四购买，价格：10000, 面积：100
		  王五购买，价格：12000, 面积：120
		  冯六购买，价格：12000, 面积：120

通过es6 class封装通用的观察订阅者模式

class Event{
	constructor{
		this.clientList = [];
	}
    listen(key,fn){
		if(!this.clientList[key]){
			this.clientList = [];
		}
		this.clientList[key].push(fn);
    }
    trigger(){
    	var key = Array.prototype.shift.call(arguments),
    		fns = this.clientList[key];
    		for(var i = 0; i < fns.length; i++){
    			fns[i].apply(this,arguments);
    		}
    }
}
//使用的方法
class SaleOffices extend Event{
	constructor(){
		super()
	}
}
var saleOffices  = new SaleOffices();