『面试的底气』—— 设计模式之代理模式(一)｜8月更文挑战

“这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战”

前言

在面试高级前端时，往往会遇到一些关于设计模式的问题，每次都回答不太理想。恰逢8月更文挑战的活动，准备用一个月时间好好理一下关于设计模式方面的知识点，给自己增加点面试的底气。

定义

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

关键

代理模式的关键是，当程序不方便或者不满足需要去直接访问一个对象的时候，提供一个替身
对象来控制对这个对象的访问，程序实际上访问的是替身对象。替身对象对请求做出一些处理之
后，再把请求转交给本体对象。

JavaScript中的代理模式

代理模式的变体种类非常多，不一定都适合在JavaScript中使用，本文挑两种在JavaScript开发中最常用的两种代理来介绍，分别是虚拟代理和缓存代理。

虚拟代理

虚拟代理会把一些开销很大的对象，延迟到真正需要它的时候才去创建。这里用实现图片预加载功能的例子来介绍虚拟代理。

图片预加载是一种常用的技术，如果直接给某个 img 标签节点设置 src 属性，由于图片过大或者网络不佳，图片的位置往往有段时间会是一片空白。常见的做法是先用一张loading 图片占位，然后用异步的方式加载图片，等图片加载好了再把它填充到 img 节点里，这种场景就很适合使用虚拟代理。

先创建一个图片类，用来生成一张图片。

class MyImage {
  constructor() {
    this.img = document.createElement('img');
    document.body.appendChild(this.img);
  }
  setSrc(src) {
    this.img.src = src;
  }
}
复制代码

执行const myImage = new MyImage()生成一个img节点并将插入body中，先在开发者工具中把网速调至Slow 3G，然后通过 执行myImage.setSrc('xxx')给该img节点设置src属性，可以看到，在图片被加载好之前，页面中有一段长长的空白时间。

为了解决这个问题。写一个代理类ProxyImage，通过这个代理MyImage类，实现在图片被真正加载好之前，页面中将出现一张占位的图, 来提示用户图片正在加载。

class ProxyImage {
  constructor(MyImage) {
    this.myImage = new MyImage();
    this.img = new Image();
    this.img.onload = function () {
      this.myImage.setSrc(this.img.src);
    }
  }
  setSrc(src) {
    this.myImage.setSrc('./loading.gif');
    this.img.src = src;
  }
}
复制代码

执行const proxyImage = new ProxyImage(MyImage)把MyImage类用ProxyImage类代理并生成一个proxyImage对象，此时body中已经被插入了一个MyImage类实例化生成的img节点。

执行proxyImage.setSrc(xxxx)后，会先执行this.myImage.setSrc('./loading.gif')给img节点的src属性设置一张占位的图，同时把真正要展示的图片的src地址赋值给new Image()创建的图片对象this.img的src属性，在this.img加载成功后再把真正的图片src通过this.myImage.setSrc(this.img.src)赋值给img节点的src属性。

这样在真正要展示图片加载成功之前，由MyImage类实例化生成的img标签会一直展示加载的占位图，实现图片预加载的功能。

代理的意义

假如不用虚拟代理可以实现图片预加载的功能吗，当然可以，下面来实现一下：

class MyImage {
  constructor() {
    this.img = document.createElement('img');
    document.body.appendChild(this.img);
    this.image = new Image();
    image.onload = function () {
      this.img.src = this.image.src;
    };
  }
  setSrc(src) {
    this.img.src = 'https://juejin.cn/post/loading.gif';
    this.image.src = src;
  }
}
复制代码

咋看一下代码量还更少，代码更简单了。但是这么写违背了设计模式的单一职责原则，在MyImage类中除了负责给img节点设置src，还要负责预加载图片。

假如有一张图片非常小，根本不需要预加载，使用预加载还会出现占位图一闪而过的问题。那怎么办呢？难道要重新写个MyImage类。

实际上只需要的只是给img节点设置 src，预加载图片只是一个锦上添花的功能。

把这个功能放在代理中，那么代理的作用在这里就体现出来了，代理负责预加载图片，预加载的操作完成之后，重新交给MyImage类中来给img节点设置 src。

这里并没有改变或者增加 MyImage 的方法，只是通过代理，给MyImage类添加了新的行为。这是符合开放—封闭原则的。

给img节点设置src和图片预加载这两个功能，被隔离在两个类里，它们可以各自变化而不影响对方。何况就算有一天我们不再需要预加载，那么只需要改成请求本体而不是请求代理对象即可。