携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情
前言
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。
本章通过讲解代理模式，希望能够让你对设计模式更一步的学习。
本章学习内容👇
- 通过虚拟代理实现图片预加载
- 代理的意义
通过虚拟代理实现图片预加载
在Web开发中，图片预加载是一种常用的技术。在加载页面时，经常会因为网络原因或是图片大小原因，导致某些图片不能够第一时间显示。这个时候常见的作法使用一个过渡加载的图片代替。这个场景就很适合我们用虚拟代理。
首先我们创建一个生成img节点的函数，并提供他一个设置src属性值的方法👇
let myImage = (function () {
//到retun之前其实就是创建一个Img节点的初始化操作
let imgNode = document.createElement("img");
document.body.appendChild(imgNode);
//返回真正的对象属性
return {
setSrc: function (src) {
imgNode.src = src;
}
}})()//使用闭包，从而能够执行初始化操作以及缓存图片节点
接着我们需要通过一个代理对象，创建一个图片内存，当图片加载好后设置目标的src属性
let proxyImage = (function (){
let img = new Image()
img.onload = function (){
myImage.setSrc(this.src)
}
return {
setSrc:function (src){
myImage.setSrc('预览用图片')
img.src = src
}
}
})
最后，我们通过代理对象使用即可👇
proxyImage.setSrc('目标src')
此时我们再看看不用代理的情况，代码是如何的：
let MyImage = function (){
let imgNode = document.createElement("img");
document.body.appendChild(imgNode);
let img = new Image()
img.onload = function (){
imgNode.src = img.src;
}
return {
setSrc:function (src){
imgNode.src = '预览用图片';
imgNode.src = src;
}
}
}
好像除了看上去复杂点了以外，也能够实现。那么我们使用代理的意义呢？
代理的意义
以通过虚拟代理图片预加载的例子来讲，我们通过使用代理将MyImage对象的设置img节点src属性和图片预加载功能拆分到了实体对象和代理对象中。
- 这使得代码的职责更加明确，单一。
实体对象中只负责改变图片节点的src属性值，它不必关心是否用的是懒加载用的过渡图片还是实际图片；代理对象只用关心将图片进行懒加载。
这俩者相互独立，可以各自变化且不影响对方。如果有一天我们过渡图片变了，或者不再希望使用懒加载了。都不用改变实体对象。
尾声
有关JavaScript的代理模式就到此为止了，感兴趣的朋友可以独自挖掘啦
