学习JavaScript设计模式之代理模式
- 明星都有经纪人作为代理。如果请明星办一场商演，只能联系其经纪人，经纪人会把商演的细节和报酬谈好，再把合同交给明星签。
一、定义
代理模式：为一个对象提供一个代用品或占位符，以便控制对它的访问。
代理分为：保护代理和虚拟代理
保护代理：用于控制不同权限的对象对目标对象的访问，在JavaScript中很难判断谁访问了某个对象，所以保护代理很难实现。
二、图片预加载（最常见的虚拟代理应用场景）
图片预加载是一种常用技术，如果直接给某个img标签节点设置src属性，由于图片过大或者网络不佳，图片的位置往往有段时间会有空白。常见的做法事先用一张loading图片占位，然后异步加载图片，待图片加载完成，把其填充到img节点里。
实现原理：
创建一个Image对象：vara=newImage();
定义Image对象的src:a.src=“xxx.gif”;
这样做就相当于给浏览器缓存了一张图片。
可通过Image对象的complete属性来检测图像是否加载完成。每个Image对象都有一个complete属性，当图像处于装载过程中时，该属性值false,当发生了onload、onerror、onabort中任何一个事件后，则表示图像装载过程结束，此时complete属性为true。
（1）非代理实现
varmyImage=(function(){
varimgNode=document.createElement("img");
document.body.appendChild(imgNode);
varimg=newImage();
img.onload=function(){
imgNode.src=img.src;
};
return{
setSrc:function(src){
imgNode.src="./images/loading.gif";
img.src=src;
}
}
})();
myImage.setSrc("./images/originImg.png");
（2）代理实现
//创建图片DOM
varmyImage=(function(){
varimgNode=document.createElement("img");
document.body.appendChild(imgNode);
return{
setSrc:function(src){
imgNode.src=src;
}
};
})();
//代理
varproxyImage=(function(){
varimg=newImage();
img.onload=function(){
myImage.setSrc(this.src);//this指向img！img加载完成后，将img.src传递给myImage
};
return{
setSrc:function(src){
myImage.setSrc("./images/loading.gif");//loading
img.src=src;
}
};
})();
proxyImage.setSrc("./images/originImg.png");
使用代理模式的好处：使每个函数功能单一，实现对象设计的“单一职责原则”！
三、文件同步
假设我们在做一个文件同步功能，当选中checkbox时候，它对应的文件就会被同步到另外一台服务器。
<body> <inputtype="checkbox"id="1"/>文件1 <inputtype="checkbox"id="2"/>文件2 <inputtype="checkbox"id="3"/>文件3 <inputtype="checkbox"id="4"/>文件4 <inputtype="checkbox"id="5"/>文件5 <inputtype="checkbox"id="6"/>文件6 </body>
没选中一个checkbox就同步一次，显然不太合理。因为在web开发中，最大的开销就是网络请求。
解决方案：通过一个代理函数来收集一段时间之内的请求，然后一次性发给服务器。
varsynchronousFile=function(id){
console.log("开始同步文件，id为："+id);
};
varproxySynchonousFile=(function(){
varcache=[],//保存本次需要同步文件的id
timer;//定时器
returnfunction(id){
cache.push(id);
if(timer){
//不要覆盖已经启动的定时
return;
}
timer=setTimeout(function(){
synchronousFile(cache.join(","));
clearTimeout(timer);
timer=null;
cache.length=0;//清空缓存
},2000);
}
})();
varcheckboxs=document.getElementsByTagName("input");
for(vari=0,c;c=checkboxs[i];i++){
c.onclick=function(){
if(this.checked===true){
proxySynchonousFile(this.id);
}
}
}
四、缓存代理–计算乘积（序列一模一样）
varmult=function(){
varresult=1;
for(vari=0,l=arguments.length;i<l;i++){
result=result*arguments[i];
}
returnresult;
};
varproxyMult=(function(){
varcache={};//{"1,2,3":6}
returnfunction(){
varargs=Array.prototype.join.call(arguments,",");
if(argsincache){
returncache[args];
}
returncache[args]=mult.apply(this,arguments);
}
})();
console.log(proxyMult(1,2,3));
//改造：
varproxyFactory=function(fn){
varcache={};
returnfunction(){
varargs=Array.prototype.join.call(arguments,",");
if(argsincache){
returncache[args];
}
returncache[args]=fn.apply(this,arguments);
}
};
console.log(proxyFactory(mult)(1,2,3));
希望本文所述对大家学习javascript程序设计有所帮助。