继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

js设计模式——代理模式proxy

慕仔4209126
关注TA
已关注
手记 304
粉丝 69
获赞 305

什么是代理模式

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。

(可以想象一下明星与经纪人的关系,明星是请求的本体,经纪人就是代理proxy)

如何实现代理模式

代理对象内部含有对本体对象的引用,因而可以与调用本体的相关方法;同时,代理对象提供与本体对象相同的接口,方便在任何时刻代理本体对象。

例子(上代码)

代理模式的变体有很多,有:保护代理虚拟代理缓存代理、防火墙代理、远程代理、智能引用代理、写时复制代理。具体介绍前三种。

(1)保护代理

保护代理主要用于控制不同权限的对象对本体对象的访问权限。比如很多人想访问本体A,如果有代理B存在的话,B会首先剔除不满足A的访问条件的访问者,符合条件的才能访问。

作用:过滤请求

例如:权限的划分和管理就是使用保护代理proxy来完成的。


注册普通用户:code为“001”

论坛管理者   :code为“002”

系统管理者   :code为“003”

游        客    :code为“000”

论坛开放了四个基础功能

1,发帖

2,帖子审核

3,清除帖子

4,留言

 

[javascript] view plain copy print?

  1. //用户本体  

  2. function User(name,code){  

  3.     this.name = name ;  

  4.     this.code = code ;  

  5. } ;  

  6. User.prototype = {  

  7.     getName : function(){  

  8.         return this.name ;  

  9.     } ,  

  10.     getCode : function(){  

  11.         return this.code ;  

  12.     } ,  

  13.     post : function(){  

  14.         console.log("发帖子!") ;  

  15.     } ,  

  16.     remove : function(){  

  17.         console.log("删除帖子!") ;  

  18.     } ,  

  19.     check : function(){  

  20.         console.log("审核帖子!") ;  

  21.     } ,  

  22.     comment : function(){  

  23.         console.log("回复帖子!") ;  

  24.     }  

  25. } ;  

  26. //代理论坛类  

  27. function Forum(user){  

  28.     this.user = user ;  

  29. } ;  

  30. Forum.prototype = {  

  31.     getUser : function(){  

  32.         return this.user ;  

  33.     } ,  

  34.     post : function(){  

  35.         if(this.user.getCode() == "001" || this.user.getCode() == "003"){  

  36.             return this.user.post() ;  

  37.         }  

  38.         console.log("没权限发帖子!") ;  

  39.     } ,  

  40.     remove : function(){  

  41.         if(this.user.getCode() == "002" || this.user.getCode() == "003"){  

  42.             return this.user.remove() ;  

  43.         }  

  44.         console.log("没权限删除帖子!") ;  

  45.     } ,  

  46.     check : function(){  

  47.         if(this.user.getCode() == "002" || this.user.getCode() == "003"){  

  48.             return this.user.check() ;  

  49.         }  

  50.         console.log("没权限审核帖子!") ;  

  51.     } ,  

  52.     comment : function(){  

  53.         if(this.user.getCode() == "003"){  

  54.             return this.user.comment() ;  

  55.         }  

  56.         console.log("没权限回复帖子!") ;  

  57.     }  

  58. } ;  

  59. //功能测试  

  60. function ForumClient(){  

  61.      this.run = function(){  

  62.          new Forum(new User("bigbear","003")).check() ; // 审核帖子  

  63.      }  

  64.  } ;  

在该例子中,论坛代理有与user本体相同的接口,可以在满足条件时,执行与本体相同的代码,与调用方法的人而言,是不透明的,我实现了调用,但不在乎是通过代理实现的,还是本体实现的。

本案例来源:大熊君大话设计模式JavaScript

(2)虚拟代理

虚拟代理是将调用本体方法的请求进行管理,等到本体适合执行时,再执行。

作用:将开销很大的对象,延迟到真正需要它的时候再执行。

比如:利用虚拟代理实现图片预加载功能:

[javascript] view plain copy print?

  1. /**在图片预加载中实现虚拟代理 */  

  2. var myImage = (function(){  

  3.     var imageNode = document.createElement('img');  

  4.     document.body.appendChild(imageNode);  

  5.   

  6.     return {  

  7.         setSrc: function(src){  

  8.             imageNode.src = src;  

  9.         }  

  10.     }  

  11. })()  

  12.   

  13. //代理类  

  14. var proxyImage = (function(){  

  15.     var img = new Image();  

  16.     img.onload = function(){  

  17.         myImage.setSrc(this.src);  

  18.     }  

  19.   

  20.     return {  

  21.         setSrc: function(src){  

  22.             myImage.setSrc('本地的图片地址');  

  23.             img.src = src; //缓存完毕之后会触发img的onload事件  

  24.         }  

  25.     }  

  26. })()  

比如:利用虚拟代理合并HTTP请求

[javascript] view plain copy print?

  1. /**虚拟代理合并http请求 */  

  2. //通过代理函数收集一段时间的请求,一次性发送给服务器,减少频繁的网络请求带来的极大开销  

  3. //模拟向服务器发送同步请求的函数  

  4. var synchronousFile = function(id){  

  5.     console.log('开始同步上传文件,id为:'+id);  

  6. }  

  7.   

  8. //代理类收集一段时间的同步请求,统一发送  

  9. var proxySynchronousFile = (function(){  

  10.     var cache = [], //设置缓存数组  

  11.         timer; //定时器,通过闭包访问定时器的引用  

  12.   

  13.     return function(id){  

  14.         cache.push(id);  

  15.         if(timer){  

  16.             return;  

  17.         }  

  18.         timer = setTimeout(function(){  

  19.             synchronousFile(cache.join(','));  

  20.             clearTimeout(timer);  

  21.             timer = null;  

  22.             cache.length = 0;  

  23.         },2000)  

  24.     }  

  25. })()  

  26.   

  27. var checkbox = document.getElementsByTagName('input');  

  28.   

  29. for(var i=0,c;c=checkbox[i++];){  

  30.     c.onclick = function(){  

  31.         if(this.check === true){  

  32.             proxySynchronousFile(this.id);  

  33.         }  

  34.     }  

  35. }  

在这些例子中,虚拟代理对请求进行搁置处理,等到合适的时机,对本体的接口进行调用,可以有效提升Web性能。

(3)缓存代理

缓存代理可以为开销大的一些运算结果提供暂时性的存储,如果再次传进相同的参数是,直接返回结果,避免大量重复计算。

[javascript] view plain copy print?

  1. /**创建缓存代理工厂 */  

  2. //将缓存代理与工厂模式相结合,创建多种运算的缓存代理  

  3. var mult = function(){  

  4.     var a = 1;  

  5.     for(var i=0;i<arguments.length;i++){  

  6.         a = a*arguments[i];  

  7.     }  

  8.     return a;  

  9. }  

  10. var plus = function(){  

  11.     var a = 0;  

  12.     for(var i=0; i<arguments.length; i++){  

  13.         a = a + arguments[i];  

  14.     }  

  15.     return a;  

  16. }  

  17. //高阶函数:将函数作为参数或者返回值的函数  

  18. var proxyFactory = function(fn) {  

  19.     var cache = {}; //参数缓存列表  

  20.     return function(){  

  21.         var args = Array.prototype.join.call(arguments,',');  

  22.         if(args in cache){  

  23.             return cache[args];  

  24.         }  

  25.         //参数属性对应的是函数  

  26.         return cache[args] = fn.apply(this,arguments);  

  27.     }  

  28. }  

  29.   

  30. //测试  

  31. var proxyMult = proxyFactory(mult),  

  32.     proxyPlus = proxyFactory(plus);  

  33.   

  34. console.log(proxyMult(1,2,3,4));  

  35. console.log(proxyMult(1,2,3,4));  

  36. console.log(proxyPlus(5,6,7,8));  

  37. console.log(proxyPlus(5,6,7,8));  

什么情况下使用代理

当我们需要使用的对象很复杂或者需要很长时间去构造,这时就可以使用代理模式(Proxy)。例如:如果构建一个对象很耗费时间和计算机资源,代理模式(Proxy)允许我们控制这种情况,直到我们需要使用实际的对象。一个代理(Proxy)通常包含和将要使用的对象同样的方法,一旦开始使用这个对象,这些方法将通过代理(Proxy)传递给实际的对象。

比如上面的代码:需要花很长的时间加载很多图片,复杂的运算过程,频繁的多次请求处理等;都可以用到代理模式。

小结

代理模式的一个好处就是对外部提供统一的接口方法,而代理类在接口中实现对真实类的附加操作行为,从而可以在不影响外部调用情况下,进行系统扩展。也就是说,我要修改真实角色的操作的时候,尽量不要修改他,而是在外部在“包”一层进行附加行为,即代理类。

原文出处

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP