理解js设计模式之代理模式
2017-08-21 10:49
387 查看
代理模式:想去做什么不直接去做,而是交给自己的代理去做
比如需要一个图片懒加载的功能,那么在不是用代理模式的情况下,代码大体上应该是这样的:
这样子的一个方法里面就融合了,创建节点,和创建代理图片对象和绑定事件,常说模块职责单一化,这个时候代理模式可以帮组解耦这个混杂的情况,当你完成一个任务需要借助另外一个东西来帮你完成
代码:
保护代理和虚拟代理:
所谓的保护代理:顾名思义,会过滤掉一些对象的代理请求,比如我们图片代理要求图片地址的主机名不能是18禁,,,,咳咳,还有其他什么的;
那么虚拟代理是什么:将一些消耗比较大的放到代理中去,比如创建图片dom操作,可以等到判断完毕后再代理里面创建
比如需要一个图片懒加载的功能,那么在不是用代理模式的情况下,代码大体上应该是这样的:
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操作,可以等到判断完毕后再代理里面创建
相关文章推荐
- 理解js设计模式之代理模式
- GOF23设计模式之动态代理模式之理解
- js架构设计模式——理解javascript中的MVVM开发模式
- 深入理解Node.js中通用基础设计模式
- 深入理解JavaScript系列(31):设计模式之代理模式
- 理解js设计模式之策略模式
- 设计模式之我吾-代理模式的理解
- js设计模式--代理模式
- 深入理解JavaScript系列(31):设计模式之代理模式
- 深入理解JavaScript系列(31):设计模式之代理模式
- 理解设计模式之代理模式
- js设计模式单例理解
- 设计模式-深入理解各种代理模式(2)通俗代码版
- JS设计模式理解干货
- 深入理解JavaScript系列(31):设计模式之代理模式
- 我所理解的设计模式(C++实现)——代理模式(Proxy Pattern)
- 关于设计模式装饰器、适配器、代理模式的关键点理解
- 深入理解JavaScript系列(31):设计模式之代理模式
- 大熊君说说JS与设计模式之------代理模式Proxy
- 深入理解JavaScript系列(31):设计模式之代理模式详解