代码实现
//图片预加载:先用一张loading图片占位,然后用异步的方式加载图片,等图片加载好后把他填充到img节点里
var myImg = (function(){
var ImgNode = document.createElement("img");
document.body.appendChild(ImgNode);
return{
setSRC:function(src){
ImgNode.src = src;
}
}
})()
var ImgProxy = (function(){
var img = new Image;
img.onload = function(){
myImg.setSRC(this.src)
}
return{
setSRC:function(src){
myImg.setSRC("file:// /C:/Users/svenzeng/Desktop/loading.gif");
img.src = src;
}
}
})()
ImgProxy.setSRC( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
实际上,我们需要的是给img节点设置src,预加载图片只是一个锦上添花的功能,如果能把这个操作放在另一个对象里面,自然是一个非常好的方法,于是代理的作用就体现出来了
//高阶函数动态创建代理,通过传入高阶函数,为计算方法创建缓存代理
function add(){
var a = 0;
for(var i = 0; i < arguments.length; i++){
a = a + arguments[i]
}
return a;
}
function mult(){
var a = 1;
for(var i = 0; i < arguments.length;i++){
a = a*arguments[i]
}
return a
}
var calcProxy = function(fn){
var result = {};
return function(){
let key = Array.prototype.join.call(arguments,"-");
if(result[key]){
return result[key]
}
return result[key] = fn(...arguments)
}
}
var proxyMult = calcProxy( mult ),
proxyPlus = calcProxy( add );
console.log ( proxyMult( 1, 2, 3, 4 ) ); // 输出:24
console.log ( proxyMult( 1, 2, 3, 4 ) ); // 输出:24
console.log ( proxyPlus( 1, 2, 3, 4 ) ); // 输出:10
console.log ( proxyPlus( 1, 2, 3, 4 ) );
//虚拟代理合并http请求:文件同步功能,当选中一个checkbox的时候,它对应文件会被同步到另一台备用服务器上,解决方案写一个代理函数来收集一段时间之内的请求,最后一次性发送给服务器setTimeout
总结:当真正发现不方便直接访问某个对象的时候使用代理模式
网友评论