什么是JavaScript的代理模式在缓存实现中的应用，以及它如何减少重复计算或网络请求？-js教程-PHP中文网

什么是JavaScript的代理模式在缓存实现中的应用，以及它如何减少重复计算或网络请求？

夜晨

发布： 2025-09-16 20:06:02

原创

787人浏览过

代理模式通过中间人控制访问，结合localStorage实现持久化缓存，利用Proxy拦截请求，先查缓存再决定是否调用原函数。

什么是javascript的代理模式在缓存实现中的应用，以及它如何减少重复计算或网络请求？

JavaScript的代理模式在缓存实现中，简单来说，就是充当一个“中间人”，帮你挡掉一些不必要的请求，直接从缓存里拿结果，从而减少重复计算或网络请求，提高效率。

代理模式在缓存实现中的应用

代理模式的核心在于创建一个代理对象，该对象控制对另一个对象的访问。在缓存场景下，代理对象会先检查缓存中是否存在请求的结果。如果存在，则直接返回缓存的结果；如果不存在，则调用原始对象执行请求，并将结果存入缓存，以便下次使用。

副标题1 JavaScript代理模式如何与localStorage结合实现持久化缓存？

localStorage提供了一种在浏览器端存储数据的机制，即使关闭浏览器，数据仍然存在。结合代理模式，我们可以创建一个代理对象，在请求数据时，先检查localStorage中是否存在对应的数据。如果存在，则直接从localStorage中读取并返回；如果不存在，则调用原始对象执行请求，并将结果存入localStorage。

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

例如：

function createCachedProxy(target, cacheKey) {
  return new Proxy(target, {
    apply: function(target, thisArg, argumentsList) {
      const cachedData = localStorage.getItem(cacheKey);
      if (cachedData) {
        console.log("从localStorage读取数据");
        return JSON.parse(cachedData);
      }

      const result = target.apply(thisArg, argumentsList);
      localStorage.setItem(cacheKey, JSON.stringify(result));
      console.log("从原始对象获取数据并存入localStorage");
      return result;
    }
  });
}

// 示例：假设有一个函数用于获取用户数据
function getUserData(userId) {
  // 模拟网络请求
  console.log("正在请求用户数据...");
  return { id: userId, name: "用户" + userId };
}

// 创建缓存代理
const cachedGetUserData = createCachedProxy(getUserData, "userData");

// 第一次调用，会从原始对象获取数据并存入localStorage
const user1 = cachedGetUserData(123);
console.log(user1);

// 第二次调用，直接从localStorage读取数据
const user2 = cachedGetUserData(123);
console.log(user2);

登录后复制

需要注意的是，localStorage存储的数据是字符串，因此需要使用

JSON.stringify

登录后复制

和

JSON.parse

登录后复制

进行序列化和反序列化。另外，localStorage的存储空间有限，需要合理管理缓存数据，避免超出限制。

副标题2 使用Proxy实现缓存时，如何处理缓存失效和更新的问题？

缓存失效和更新是缓存策略中非常重要的部分。简单粗暴地无限期缓存数据会导致数据陈旧，与实际情况不符。因此，我们需要考虑缓存的有效期以及如何更新缓存。

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

一种常见的做法是为缓存数据设置过期时间。可以在localStorage中存储缓存数据时，同时存储一个过期时间戳。每次读取缓存时，先检查是否过期，如果过期则重新请求数据并更新缓存。

function createCachedProxyWithExpiration(target, cacheKey, expirationTime) {
  return new Proxy(target, {
    apply: function(target, thisArg, argumentsList) {
      const cachedData = localStorage.getItem(cacheKey);
      const expiration = localStorage.getItem(cacheKey + "_expiration");

      if (cachedData && expiration && Date.now() < parseInt(expiration)) {
        console.log("从localStorage读取数据 (未过期)");
        return JSON.parse(cachedData);
      }

      const result = target.apply(thisArg, argumentsList);
      localStorage.setItem(cacheKey, JSON.stringify(result));
      localStorage.setItem(cacheKey + "_expiration", Date.now() + expirationTime);
      console.log("从原始对象获取数据并存入localStorage");
      return result;
    }
  });
}

// 示例：设置缓存过期时间为1小时
const cachedGetUserDataWithExpiration = createCachedProxyWithExpiration(getUserData, "userData", 60 * 60 * 1000);

// 第一次调用
const user3 = cachedGetUserDataWithExpiration(456);
console.log(user3);

// 等待超过1小时后再次调用
setTimeout(() => {
  const user4 = cachedGetUserDataWithExpiration(456);
  console.log(user4); // 这次会重新请求数据
}, 3601000);

登录后复制

另一种策略是使用“惰性更新”。即使缓存已经过期，仍然返回旧的缓存数据，同时异步地更新缓存。这样可以避免用户在等待新数据加载时出现空白。

副标题3 除了localStorage，还有哪些JavaScript缓存方案可以与代理模式结合？

除了localStorage，还有一些其他的JavaScript缓存方案可以与代理模式结合，例如：