在软件开发中，有时我们需要在访问某个对象时，增加额外的控制或处理逻辑，例如延迟加载、权限校验、日志记录或缓存等。**代理模式（Proxy Pattern）**正是为了解决这些问题而诞生的。它通过为目标对象提供一个代理对象，来间接控制对目标对象的访问，从而达到增强或保护目标对象功能的目的。
本文将详细介绍代理模式的基本概念、分类、以及在 JavaScript 中的多种实现示例，帮助你在实际项目中灵活运用代理模式。
代理模式简介
代理模式是一种结构型设计模式，其核心思想是在访问目标对象（真实对象）时，通过一个中间层（代理对象）来控制对真实对象的访问。代理对象与真实对象具有相同的接口，因此客户端无需改变代码即可使用代理对象。代理模式的主要作用包括：
- 延迟加载：在真正需要使用对象时才创建或加载对象（虚拟代理）。
- 权限校验：在调用真实对象方法前进行安全性检查（保护代理）。
- 缓存：对真实对象的调用结果进行缓存，提高系统性能（缓存代理）。
- 日志记录和监控：记录对真实对象的调用情况，便于调试和监控。
代理模式的分类
根据代理对象的用途和实现方式，代理模式主要可以分为以下几类：
- 虚拟代理：用于延迟加载或创建开销较大的对象，在真正需要时才创建真实对象。
- 保护代理：用于控制对真实对象的访问权限或进行额外的安全性检查。
- 缓存代理：用于缓存真实对象的方法调用结果，避免重复计算或网络请求。
- 远程代理：用于访问远程对象，为客户端隐藏分布式系统的复杂性。
- 日志代理：用于记录对真实对象的操作，方便系统监控和调试。
在 JavaScript 中，由于其灵活的函数式编程特性，实现以上代理模式都非常方便。
JavaScript 中的代理模式实现示例
下面我们通过三个示例来展示如何在 JavaScript 中使用代理模式解决实际问题。
示例 1：虚拟代理（Lazy Proxy）
假设有一个图片加载器，加载高分辨率图片可能比较耗时，我们希望在图片真正需要展示时再进行加载，从而节省资源。使用虚拟代理可以在调用时延迟加载真实图片对象。
// 真实对象：高分辨率图片加载器
class HighResImage {constructor(url) {this.url = url;this.loadImage();}loadImage() {console.log(`开始加载高分辨率图片：${this.url}`);// 模拟耗时加载操作setTimeout(() => {console.log(`图片加载完成：${this.url}`);}, 2000);}display() {console.log(`显示图片：${this.url}`);}
}// 虚拟代理：延迟创建 HighResImage 实例
class ImageProxy {constructor(url) {this.url = url;this.realImage = null;}display() {if (!this.realImage) {console.log('第一次调用 display()，创建真实图片对象...');this.realImage = new HighResImage(this.url);}this.realImage.display();}
}// 客户端调用
const imageProxy = new ImageProxy('https://example.com/high-res.jpg');
imageProxy.display();
// 输出示例：
// 第一次调用 display()，创建真实图片对象...
// 开始加载高分辨率图片：https://example.com/high-res.jpg
// 显示图片： https://example.com/high-res.jpg
// （2秒后）图片加载完成： https://example.com/high-res.jpg
在此示例中，ImageProxy 代理对象在第一次调用 display() 时才会创建并加载真实图片对象，从而实现了延迟加载。
示例 2：保护代理（Protection Proxy）
在某些场景下，我们希望在调用真实对象方法之前进行权限检查，例如只有拥有管理员权限的用户才能执行敏感操作。保护代理可以在调用真实对象之前进行安全性验证。
// 真实对象：系统管理器
class AdminOperations {deleteUser(userId) {console.log(`删除用户：${userId}`);}updateSettings(settings) {console.log(`更新系统设置：${JSON.stringify(settings)}`);}
}// 保护代理：进行权限校验
class AdminOperationsProxy {constructor(userRole) {this.userRole = userRole; // 用户角色，如 'admin' 或 'guest'this.adminOperations = new AdminOperations();}deleteUser(userId) {if (this.userRole !== 'admin') {console.log('权限不足，无法删除用户。');return;}this.adminOperations.deleteUser(userId);}updateSettings(settings) {if (this.userRole !== 'admin') {console.log('权限不足，无法更新设置。');return;}this.adminOperations.updateSettings(settings);}
}// 客户端调用
const proxyForGuest = new AdminOperationsProxy('guest');
proxyForGuest.deleteUser(123); // 输出：权限不足，无法删除用户。const proxyForAdmin = new AdminOperationsProxy('admin');
proxyForAdmin.deleteUser(456); // 输出：删除用户：456
通过保护代理，我们在调用敏感操作前进行了权限检查，避免了未经授权的操作。
示例 3：缓存代理（Caching Proxy）
对于某些开销较大的计算或数据请求，我们可以使用缓存代理保存结果，避免重复计算或网络请求，提高性能。
// 真实对象：模拟一个耗时计算函数
function heavyComputation(num) {console.log(`开始计算：${num}`);// 模拟复杂计算（这里使用简单的平方运算代替）let result = num * num;console.log(`计算完成：${num} 的平方是 ${result}`);return result;
}// 缓存代理：为 heavyComputation 添加缓存功能
function cachingProxy(fn) {const cache = new Map();return function(num) {if (cache.has(num)) {console.log(`从缓存中获取结果：${num}`);return cache.get(num);}const result = fn(num);cache.set(num, result);return result;};
}// 使用代理后的函数
const cachedComputation = cachingProxy(heavyComputation);console.log(cachedComputation(5)); // 第一次计算，输出计算过程
console.log(cachedComputation(5)); // 第二次调用，从缓存中获取结果
在这个例子中，cachingProxy 函数包装了 heavyComputation，为相同输入值缓存结果，从而避免重复计算。
代理模式的优缺点
优点
- 解耦客户端与真实对象：客户端只需通过代理对象进行交互，无需直接依赖真实对象。
- 增强功能：在调用真实对象前后增加额外处理，如权限校验、延迟加载、缓存等。
- 控制对象访问：可以对真实对象的访问进行统一控制，方便集中管理。
缺点
- 增加系统复杂度：引入代理层可能使系统结构变得更复杂，增加维护成本。
- 性能开销：代理对象需要额外的处理逻辑，在某些场景下可能会带来额外的性能开销。
总结
代理模式通过在客户端与真实对象之间增加一层代理，有效地控制了对真实对象的访问，并在此过程中实现了延迟加载、权限校验、缓存等多种扩展功能。本文通过虚拟代理、保护代理和缓存代理三个示例，展示了如何在 JavaScript 中灵活运用代理模式来解决实际问题。
希望这篇文章能帮助你深入理解代理模式，并在项目中找到合适的应用场景。如果你有任何问题或建议，欢迎在评论区讨论交流！