代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。
一种代理的作用是帮对象过滤一些请求,这种代理叫保护代理;
另一种代理把一些开销很大的对象,延迟到真正需要它的时候才去创建,这种代理叫虚拟代理。
保护代理用于控制不同权限的对象对目标对象的访问,但在JavaScript并不容易实现保护代理,因为我们无法判断谁访问了某个对象。而虚拟代理是最常用的一种代理模式
js开发中常用的代理模式是虚拟代理。
虚拟代理例子:图片预加载
图片预加载是一种常用的技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时间会是一片空白。常见的做法是先用一张loading图片占位,然后用异步的方式加载图片,等图片加载好了再把它填充到img节点里,这种场景就很适合使用虚拟代理。
1 | <div class="container"></div> |
首先创建一个普通的本体对象,这个对象负责往页面中创建一个img标签,并且提供一个对外的setSrc接口,外界调用这个接口,便可以给该img标签设置src属性:
1 | const myImage = (function () { |
现在开始引入代理对象proxyImage,通过这个代理对象,在图片被真正加载好之前,页面中将出现一张占位loading.gif,来提示用户图片正在加载:
1 | const proxyImage = (function () { |