常见的改善前端代码的设计模式-代理模式

基本概念

定义：为一个对象提供一个代用品或占位符，以便控制对它的访问

场景：权限控制（保护代理）、延迟加载（虚拟代理）、缓存代理

代理的意义：维护单一职责原则

代理和本体接口应该有一致性，这样的好处是：

• 用户可以放心地请求代理，他只关系是否能够得到想要的结果
• 在任何使用本体的地方都可以替换成使用代理

虚拟代理的代码实现

jscode

/**
** 图片预加载，代理在图片加载之前显示一个loading
**/
var myImage = (function(){     
	var imgNode = document.createElement( 'img' );     
	document.body.appendChild( imgNode );      
	return function( src ){         
		imgNode.src = src;     
	} 
})();  


var proxyImage = (function(){     
	var img = new Image;      
	img.onload = function(){         
	  myImage( this.src );     
	}      
	return function( src ){        
		myImage( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );         
		img.src = src;        
	} 
})();  

proxyImage( 'http:// imgcache.qq.com/music// N/k/000GGDys0yA0Nk.jpg' );

缓存代理的代码实现

var mult = function() { 
	var a = 1
	for ( var i =0; i < arguments.length; i++ ) {
		a = a * arguments[i]
	}
	return a
}

var plus = function() {
	var a = 0
	for ( var i =0; i < arguments.length; i++ ) {
		a = a + arguments[i]
	}
	return a
}

// 创建缓存代理的工厂
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 )