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

2018-4-14 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

什么是代理模式

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

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

如何实现代理模式

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

例子(上代码)

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

(1)保护代理

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

作用:过滤请求

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

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

论坛管理者   :code为“002”

系统管理者   :code为“003”

游        客    :code为“000”

论坛开放了四个基础功能

1,发帖

2,帖子审核

3,清除帖子

4,留言

游客不具备任何操作权限,注册用户只能发帖,论坛管理者可以审核以及删帖操作,系统管理者具有所有功能权限。

[javascript] view plain 
  •     this.name = name ;  
  •     this.code = code ;  
  • } ;  
  • User.prototype = {  
  •     getName : function(){  
  •         return this.name ;  
  •     } ,  
  •     getCode : function(){  
  •         return this.code ;  
  •     } ,  
  •     post : function(){  
  •         console.log("发帖子!") ;  
  •     } ,  
  •     remove : function(){  
  •         console.log("删除帖子!") ;  
  •     } ,  
  •     check : function(){  
  •         console.log("审核帖子!") ;  
  •     } ,  
  •     comment : function(){  
  •         console.log("回复帖子!") ;  
  •     }  
  • } ;  
  • //代理论坛类  
  • function Forum(user){  
  •     this.user = user ;  
  • } ;  
  • Forum.prototype = {  
  •     getUser : function(){  
  •         return this.user ;  
  •     } ,  
  •     post : function(){  
  •         if(this.user.getCode() == "001" || this.user.getCode() == "003"){  
  •             return this.user.post() ;  
  •         }  
  •         console.log("没权限发帖子!") ;  
  •     } ,  
  •     remove : function(){  
  •         if(this.user.getCode() == "002" || this.user.getCode() == "003"){  
  •             return this.user.remove() ;  
  •         }  
  •         console.log("没权限删除帖子!") ;  
  •     } ,  
  •     check : function(){  
  •         if(this.user.getCode() == "002" || this.user.getCode() == "003"){  
  •             return this.user.check() ;  
  •         }  
  •         console.log("没权限审核帖子!") ;  
  •     } ,  
  •     comment : function(){  
  •         if(this.user.getCode() == "003"){  
  •             return this.user.comment() ;  
  •         }  
  •         console.log("没权限回复帖子!") ;  
  •     }  
  • } ;  
  • //功能测试  
  • function ForumClient(){  
  •      this.run = function(){  
  •          new Forum(new User("bigbear","003")).check() ; // 审核帖子  
  •      }  
  •  } ;  
  • 在该例子中,论坛代理有与user本体相同的接口,可以在满足条件时,执行与本体相同的代码,与调用方法的人而言,是不透明的,我实现了调用,但不在乎是通过代理实现的,还是本体实现的。

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

    (2)虚拟代理

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

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

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

    [javascript] view plain 
  •     var imageNode = document.createElement('img');  
  •     document.body.appendChild(imageNode);  
  •   
  •     return {  
  •         setSrc: function(src){  
  •             imageNode.src = src;  
  •         }  
  •     }  
  • })()  
  •   
  • //代理类  
  • var proxyImage = (function(){  
  •     var img = new Image();  
  •     img.onload = function(){  
  •         myImage.setSrc(this.src);  
  •     }  
  •   
  •     return {  
  •         setSrc: function(src){  
  •             myImage.setSrc('本地的图片地址');  
  •             img.src = src; //缓存完毕之后会触发img的onload事件  
  •         }  
  •     }  
  • })()  
  • 比如:利用虚拟代理合并HTTP请求

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

    (3)缓存代理

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

    什么情况下使用代理

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

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

    小结

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

    万达主管,万达主管QQ( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

    标签: js设计模式——代理模式proxy

    分享到: 新浪微博 腾讯微博 微信 微信 更多

    Powered by emlog 京ICP备12006971号-1 sitemap