JavaScript代理模式_虚拟代理与缓存代理实践-js教程-PHP中文网

JavaScript代理模式_虚拟代理与缓存代理实践

紅蓮之龍

发布： 2025-11-20 17:46:57

原创

561人浏览过

代理模式通过代理对象控制对原对象的访问，可实现虚拟代理和缓存代理；虚拟代理用于图片预加载，先显示占位图再替换真实图片；缓存代理用于函数结果缓存，避免重复计算提升性能；两者均能在不修改原逻辑的前提下增强功能与性能。

javascript代理模式_虚拟代理与缓存代理实践

代理模式在JavaScript中是一种常见且实用的设计模式，它通过一个代理对象来控制对原对象的访问。这种模式能帮助我们延迟真实操作的执行（虚拟代理），或避免重复计算提升性能（缓存代理）。下面结合具体场景，说明如何用JavaScript实现虚拟代理和缓存代理。

虚拟代理：图片预加载

在网页开发中，直接加载大图可能导致页面卡顿或白屏。虚拟代理可以在真实图片加载完成前，先展示占位图，等图片下载完毕再替换，从而优化用户体验。

实现思路是创建一个代理对象，代替真实的图片对象进行加载管理。

创建一个Image实例用于加载真实图片
先设置img标签的src为loading图
等待真实图片加载完成后再替换

代码示例：

立即学习“Java免费学习笔记（深入）”；

function createImageProxy() {
  const img = new Image();
  const proxyImg = new Image();
<p>proxyImg.src = 'loading.gif'; // 占位图</p><p>img.onload = function () {
proxyImg.src = img.src;
};</p><p>return {
setSrc(targetImg) {
proxyImg.src = 'loading.gif';
img.src = targetImg;
},
getElement() {
return proxyImg;
}
};
}</p><p>// 使用
const imageProxy = createImageProxy();
document.body.appendChild(imageProxy.getElement());
imageProxy.setSrc('real-image.jpg');

登录后复制

缓存代理：函数结果缓存

某些计算密集型函数可能被频繁调用，传入相同参数时反复计算浪费资源。缓存代理可以记录已计算的结果，下次请求相同参数时直接返回缓存值。

适用于递归计算、复杂数据处理等场景。

v10.35西部数码域名虚拟主机分销管理系统

西部数码域名虚拟主机分销管理系统简单易用通过API接口与上级服务商通信。让使用者能在操作简单快捷的情况下轻松完成业务的实时申请、开通和管理以及续费升级。系统的主要特色有：开源免费、模板分离使用方便、可以不依赖于上级代理独立运行、客服托管系统,降低售后服务压力、在线升级、无限级别代理平台、免费集成新网万网等五大域名注册接口、功能强大界面美观等系统包含如下模块： 1、域名实时注册

查看详情

代理函数接收参数并生成唯一键（如JSON字符串）
检查缓存中是否存在该键对应的结果
有则返回缓存值，无则调用原函数并存入缓存

代码示例：

立即学习“Java免费学习笔记（深入）”；

function createCacheProxy(fn) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log('命中缓存:', key);
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}
<p>// 被代理的函数：斐波那契数列
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}</p><p>const cachedFibonacci = createCacheProxy(fibonacci);</p><p>console.log(cachedFibonacci(10)); // 计算一次，后续调用直接取缓存
console.log(cachedFibonacci(10)); // 命中缓存

登录后复制