J*aScript代理模式_虚拟代理与缓存代理实践_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript代理模式_虚拟代理与缓存代理实践

2025-11-20

浏览次数：次

返回列表

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

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

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

虚拟代理：图片预加载

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

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

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

代码示例：

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');

缓存代理：函数结果缓存

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

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

成新网络商城购物系统

使用模板与程序分离的方式构建，依靠专门设计的数据库操作类实现数据库存取，具有专有错误处理模块，通过 Email 实时报告数据库错误，除具有满足购物需要的全部功能外，成新商城购物系统还对购物系统体系做了丰富的扩展，全新设计的搜索功能，自定义成新商城购物系统代码功能代码已经全面优化，杜绝SQL注入漏洞前台测试用户名：admin密码：admin888后台管理员名：admin密码：admin888

0 查看详情成新网络商城购物系统

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

代码示例：

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)); // 命中缓存