JavaScript 设计模式——代理模式

本文介绍了JavaScript中的代理模式,包括虚拟代理(预加载图片、合并HTTP请求)、缓存代理和保护代理。代理模式用于控制对对象的访问,如在图片加载前显示占位符,合并快速连续的HTTP请求,以及实现计算方法的缓存。JavaScript开发中,虚拟代理和缓存代理应用广泛。
摘要由CSDN通过智能技术生成

在阅读本文之前,可以先了解下 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'
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值