JavaScript设计模式中代理模式的使用方法

Posted 2022-11-14 三水草肃

代理模式

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

保护代理和虚拟代理

1. 保护代理：代理逻辑可以帮助原函数过滤掉一些不好的请求

   • 保护代理用于控制不同权限的对象对目标的访问，但是在 javascript 并不容易实现保护代理，因为我们无法判断谁访问了某个对象。

2. 虚拟代理：延迟到需要它的时候才去创建

   1. 场景

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

      const myImage = (function () 
        const Image = document.createElement("img");
        document.body.appendChild(Image);
        return 
          setSrc: function (src) 
            Image.src = src;
          ,
        ;
      )();
      
      // 加一层代理，在图片加载前先展示x.jpg
      const proxyImage = (function () 
        const img = new Image();
        img.onload = function (src) 
          myImage(this.src);
        ;
        return function () 
          myImage("./logo192.png");
          img.src = src;
        ;
      )();
      proxyImage();
      

      2. 图片预加载不使用任何设计模式也能办到，下面来讲讲使用代理模式的好吃，
         1. 符合单一职责原则：就一个类（包括对象和函数），应该仅有一个引起它变化的原因。如果一个对象承担了多项职责，就意味着这个对象将变得巨大，引起它变化的原因可能会有多个。如果一个对象承担的职责过多，职责耦合在一起，这种耦合会导致脆弱的设计。
         2. 便于后期的维护，如果后期不需要图片预加载，我们只需要修改请求本地，不使用代理请求本地。
         3. 符合开放-封闭原则