设计模式-代理模式

1、概念

为一个对象提供一个代用品或占位符，以便控制对它的访问。

2、常用的虚拟代理形式

某一个花销很大的操作，可以通过虚拟代理的方式延迟到这种需要它的时候才去创建（例：使用虚拟代理实现图片懒加载）。

3、图片懒加载的方式

先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。

4、解释

使用代理模式实现图片懒加载的优点还有符合单一职责原则。减少一个类或方法的粒度和耦合度。

5、代码实现

let imgFunc = (function() { // 创建一个img标签 let imgNode = document.createElement('img'); // 把标签放到body上 document.body.appendChild(imgNode); // 返回setSrc函数 return { setSrc: function(src) { imgNode.src = src; } }; })(); let proxyImage = (function() { // 创建一个img标签 let img = new Image(); // 给img标签添加自执行函数 img.onload = function() { imgFunc.setSrc(this.src); }; return { setSrc: function(src) { imgFunc.setSrc('/img/loading02.gif'); setTimeout(() => { img.src = src; }, 1000); } }; })(); console.log(proxyImage); // {setSrc: ƒ} proxyImage.setSrc('/img/08.jpg');