理解js设计模式之代理模式

代理模式：想去做什么不直接去做，而是交给自己的代理去做

比如需要一个图片懒加载的功能，那么在不是用代理模式的情况下，代码大体上应该是这样的：

var realImg='http://new-img2.ol-img.com/985x695/79/172/lic9i4TykRiA.jpg';  //真实图片var xiaojuhua='http://www.wallpaperama.com/post-images/forums/200903/07p-6606-loadingcircle.gif'; //小菊花图片function loadImg(loaddingImg,realImg){  var imgNode=document.createElement('img');     document.body.appendChild(imgNode);       imgNode.src=loaddingImg;    var proxyImg=new Image();  proxyImg.src=realImg;    proxyImg.onload=function(){    imgNode.src=this.src;  }}loadImg(xiaojuhua,realImg)  //为了能看到小菊花，需要降低网络链接的数据 fast 3G ，slow 3G 都能看到

　　这样子的一个方法里面就融合了，创建节点，和创建代理图片对象和绑定事件，常说模块职责单一化，这个时候代理模式可以帮组解耦这个混杂的情况，当你完成一个任务需要借助另外一个东西来帮你完成

代码：

var xiaojuhua='http://www.wallpaperama.com/post-images/forums/200903/07p-6606-loadingcircle.gif';var realImg= 'http://new-img2.ol-img.com/985x695/79/172/lic9i4TykRiA.jpg'; //这个方法只负责创建img标签，对外暴露设置img的src接口function myImage(){ var image=document.createElement('img');  document.body.append(image);  return {    set:function(src){      image.src=src;    }  }}//在body里面异步加载图片，传入图片地址参数，和本地loadding图片var myImg=myImage();var proxyImage=function(){  var img=new Image();  img.onload=function(){    console.log(this);    myImg.set(this.src);  }  return {    set:function(loadimg,src){        img.src=src;        myImg.set(loadimg);    }  }}var proxy=proxyImage();proxy.set(xiaojuhua,realImg);

　　

保护代理和虚拟代理：

所谓的保护代理：顾名思义，会过滤掉一些对象的代理请求，比如我们图片代理要求图片地址的主机名不能是18禁，，，，咳咳，还有其他什么的；

那么虚拟代理是什么：将一些消耗比较大的放到代理中去，比如创建图片dom操作，可以等到判断完毕后再代理里面创建