世娱网
您的当前位置:首页学习JavaScript设计模式之代理模式_javascript技巧

学习JavaScript设计模式之代理模式_javascript技巧

来源:世娱网


  • 明星都有经纪人作为代理。如果请明星办一场商演,只能联系其经纪人,经纪人会把商演的细节和报酬谈好,再把合同交给明星签。
  • 一、定义

    代理模式:为一个对象提供一个代用品或占位符,以便控制对它的访问。
    代理分为:保护代理和虚拟代理
    保护代理:用于控制不同权限的对象对目标对象的访问,在JavaScript中很难判断谁访问了某个对象,所以保护代理很难实现。

    二、图片预加载(最常见的虚拟代理应用场景)

    图片预加载是一种常用技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时间会有空白。常见的做法事先用一张loading图片占位,然后异步加载图片,待图片加载完成,把其填充到img节点里。
    实现原理:
    创建一个Image对象:var a = new Image();
    定义Image对象的src: a.src = “xxx.gif”;
    这样做就相当于给浏览器缓存了一张图片。

    可通过Image对象的complete属性来检测图像是否加载完成。每个Image对象都有一个complete属性,当图像处于装载过程中时,该属性值false,当发生了onload、onerror、onabort中任何一个事件后,则表示图像装载过程结束,此时complete属性为true。

    (1)非代理实现

    
    
    

    (2)代理实现

    
    
    

    使用代理模式的好处:使每个函数功能单一,实现对象设计的“单一职责原则”!

    三、文件同步

    假设我们在做一个文件同步功能,当选中checkbox时候,它对应的文件就会被同步到另外一台服务器。

    
     文件1
     文件2
     文件3
     文件4
     文件5
     文件6
     

    没选中一个checkbox就同步一次,显然不太合理。因为在web开发中,最大的开销就是网络请求。
    解决方案:通过一个代理函数来收集一段时间之内的请求,然后一次性发给服务器。

    
    
    

    四、缓存代理–计算乘积(序列一模一样)

    
    
    

    希望本文所述对大家学习javascript程序设计有所帮助。

    显示全文