js设计模式之代理模式

一、简单介绍

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

二、应用场景

nginx服务器将用户的请求集中处理，分发给对应的服务器。同时，将服务器的响应分发给对应的客户。代理模式的思想是类似的。

或许，你会觉得，这和策略模式一样。但按照我的理解，策略模式更注重的是环境（也就是条件）的区分，然后执行不同的逻辑。代理模式则相当于一个中间件，先对逻辑进行预处理，然后再执行后续的逻辑。

除此之外，代理模式可以将真实的逻辑隐藏起来，通过代理对象控制后续的逻辑。或者可以按照需要，在适当的时候处理。现实里就是，你设置一个闹钟，只有在确定的时间，铃声才会响起。铃声响起就是你需要的功能，但是何时想起，这是代理控制的。

三、示例一

下面是一个简单的例子。图片的过度图是常见的需求。实际图片可能很大，所以先用一张较小的图片占位，等待实际图片加载完成时，再将实际的图片展示在界面上。

const tempImg = "./loadimg.svg";
//代理的对象
const setImg = (src, imgEle) => {
  const img = new Image();
  imgEle.src = tempImg;
  img.src = src;
  img.onload = function() {
    setRealImg(src, imgEle);
  };
};
//实际需要执行的逻辑
const setRealImg = (src, ele) => {
  ele.src = src;
};