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

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

场景:权限控制(保护代理)、延迟加载(虚拟代理)、缓存代理

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

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

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

虚拟代理的代码实现

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 )
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章