设计模式之代理模式与观察者模式

代理模式

代理模式-将操作交由代理来实现,代理上会有其他的处理,使之在适当的时候才去操作
虚拟代理-开销大之类的操作,用异步的方式(延迟)代理去实现

    //虚拟代理之延迟处理功能
	var getInput = function (type) {
		if(type === "all") return document.getElementsByTagName('input');
		if(typeof type === "number") return document.getElementsByTagName('input')[type-1];
		if(Object.prototype.toString.call(type) == '[object Array]'){
			var inputArr = [];
			for(var i in type){
				var input = document.getElementsByTagName('input')[type[i]-1];
				 input && inputArr.push(input);
			};
			return inputArr;
		};
		return false;
	};

	for(var inputI = 0;inputI<getInput("all").length;inputI++){
		getInput("all")[inputI].onclick= function(){
			if(this.checked === false) return;
			proxySend(this.value);
		};
	};
    // 代理发送,通过闭包保存需要发送的val
    // 2000ms没有再去点击checkbox才去发送
	var proxySend =(function(){
		var valArr = [];
		var time;
		return function(value){
			idArr.push(value);
			clearTimeout(time);
			time = setTimeout(function(){
				for(var i = 0;i<valArr.length;i++){
					sendInput(valArr[i]);
				};
				valArr = [];
				time = null;
			},2000);
		};
	})();

	var sendInput = function(value){
		console.info(value+":发送");
	};	

缓存代理-代理中保存计算的值(花销大的计算结果),下一次先试着从缓存中调用

	var proxy = (function(){
		var cache = {};
		return function(){
			var args = Array.prototype.join.call( arguments, ',' );
			console.info(args);	
			if ( args in cache ){
				console.info(cache);	
				return cache[ args ];
			}
			return cache[ args ] = mult.apply( this, arguments );
		}
		})();

//通过*立即执行函数返回函数形成闭包,保存缓存cache,然后将*arguments拼接作为缓存对象的key,值为计算结果,通过*if(key in object)来得到重复的key

//高级函数与缓存代理
var createProxyFactory = function( fn ){
	var cache = {};
		return function(){
		var args = Array.prototype.join.call( arguments, ',' );
		if ( args in cache ){
		return cache[ args ];
		}
		return cache[ args ] = fn.apply( this, arguments );
		}
};
var proxyMult = createProxyFactory( mult ),
proxyPlus = createProxyFactory( plus );

alert ( proxyMult( 1, 2, 3, 4 ) ); 
alert ( proxyMult( 1, 2, 3, 4 ) ); 
alert ( proxyPlus( 1, 2, 3, 4 ) ); 
alert ( proxyPlus( 1, 2, 3, 4 ) ); 

不通过立即执行函数,而是调用函数来实现得到闭包,使不同的计算函数得到自己的缓存对象

观察者模式-订阅发布(自定义事件-触发)

订阅--将key作为标志位,将key发生时需要执行的函数保存
发布--通过key寻找函数,并执行

	var subPub = (function(){
		var listenList = {};
		//保存key:[fn1,fn2,fn3]
		
		var listen = function(key,fn){
			if(key in listenList){
				for(var i = 0 ;i<listenList[key].length ; i++){
					if(listenList[key][i] == fn)return;
				}
			}else{
				listenList[key] = [];
			};
			listenList[key].push(fn);
		};
        // 判断key与fn情况,然后将函数push保存

		var trigger = function(){
			var key = [].shift.call(arguments);
			if(!listenList[key] || listenList[key].length == 0) return false;
			for(var i = 0 ; i<listenList[key].length ; i++){
				listenList[key][i].apply(this,arguments);
			}
		};
        //通过key得到需要执行的函数,然后将参数传入执行
        
		var remove = function(key,fn){
			if(!listenList[key] || listenList[key].length == 0) return false;
			if(!fn){listenList[key].length = 0;return}
			for(var i = 0 ; i<listenList[key].length ; i++){
				if(listenList[key][i] == fn){
					listenList[key].splice(i,1);
				}
			}
		};

		return {
			remove:remove,
			trigger:trigger,
			listen:listen
		}
	})()