JavaScript 设计模式——代理模式

在阅读本文之前，可以先了解下 JavaScript 中的 Proxy(点击查看)。

1. 什么是代理模式

为其他对象提供一种代理以控制对这个对象的访问。

2. 代理模式细分

1. 虚拟代理（将开销大的运算延迟到需要时执行）
2. 缓存代理（为开销大的运算结果提供缓存）
3. 保护代理（用于对象应该有不同访问权限的情况）
4. 防火墙代理（控制网络资源的访问）
5. 远程代理（为一个对象在不同的地址空间提供局部代表）
6. 智能引用代理（取代了简单的指针，它在访问对象时执行一些附加操作，比如计算一个对象被引用的次数）
7. 写时复制代理（延迟对象复制过程，对象需要真正修改时才进行。写时复制代理是虚拟代理的一种变体，DLL（操作系统中的动态链接库）是其典型运用场景。)

2.1 虚拟代理

虚拟代理预加载图片

const image = (function () {
   
  const imgNode = document.createElement('img');

  document.body.appendChild(imgNode);

  return {
   
    setSrc: function (src) {
   
      imgNode.src = src;
    },
  };
})();

// 代理容器
const proxyImage = (function () {
   
  let img = new Image();

  // 加载完之后将设置为添加的图片
  img.onload = function () {
   
    image.setSrc(this.src);
  };

  return {
   
    setSrc: function (src) {
   
      image.setSrc('loading.gif');
      img.src = src;
    },
  };
})();

proxyImage.setSrc('https://image/path/file.jpg'