JavaScript设计模式 -- 代理模式

在软件开发中，有时我们需要在访问某个对象时，增加额外的控制或处理逻辑，例如延迟加载、权限校验、日志记录或缓存等。**代理模式（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，为相同输入值缓存结果，从而避免重复计算。