JavaScript设计模式(十二)——代理模式 (Proxy)

引言 - 代理模式的核心概念

代理模式是一种结构型设计模式，它为其他对象提供代理以控制访问。代理模式遵循控制访问、分离关注点及增强功能的核心原则。在现代JavaScript开发中，代理模式日益重要，它能解决对象访问控制、数据验证、懒加载、性能优化等问题，同时保持代码灵活性和可维护性。

JavaScript Proxy API详解

JavaScript Proxy API是ES6引入的强大功能，用于创建对象的代理，控制对对象的访问。基本语法为const proxy = new Proxy(target, handler)，其中target是被代理对象，handler定义拦截行为。

Handler对象包含trap方法，用于拦截对象操作。例如：

javascript 复制代码

const handler = {
  get(target, prop) { // 拦截属性读取
    return prop in target ? target[prop] : 'default';
  },
  set(target, prop, value) { // 拦截属性设置
    target[prop] = value;
    return true;
  }
};

Proxy支持13种拦截操作，包括get、set、has、deleteProperty、ownKeys、apply、construct等，覆盖了大部分JavaScript操作。

Proxy与Reflect紧密相关，Reflect提供的方法与Proxy的trap一一对应，使代理实现更简洁：

javascript 复制代码

const handler = {
  get: Reflect.get, // 使用Reflect的get方法
  set: Reflect.set
};

Reflect API确保了默认行为的一致性，同时提供了更优雅的函数式操作方式。

代理模式的几种实现方式

代理模式通过中间层控制对象访问，提供多种实现方式满足不同需求。

虚拟代理与保护代理：虚拟代理延迟创建开销大的对象，保护代理控制访问权限。

javascript 复制代码

// 保护代理示例
const user = { role: 'admin' };
const protectedObj = new Proxy(target, {
  get(target, prop) {
    if (user.role !== 'admin' && prop === 'sensitiveData') {
      throw new Error('无访问权限');
    }
    return target[prop];
  }
});

缓存代理与日志代理：缓存代理存储计算结果，日志代理记录操作，便于调试和优化。

javascript 复制代码

// 缓存代理示例
const cachedFn = new Proxy(originalFn, {
  cache: {},
  apply(target, thisArg, args) {
    const key = JSON.stringify(args);
    return this.cache[key] || (this.cache[key] = target.apply(thisArg, args));
  }
});

防火墙代理：过滤危险请求，增强系统安全性。

javascript 复制代码

// 防火墙代理示例
const firewall = new Proxy(target, {
  has(target, prop) {
    return ['exec', 'eval'].includes(prop) ? false : prop in target;
  }
});

这些代理模式为JavaScript开发提供了灵活的对象访问控制机制。

实际应用场景和案例

JavaScript代理模式在实际开发中有多种应用场景。在Vue3中，响应式系统通过Proxy实现数据追踪：

javascript 复制代码

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key); // 依赖收集
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      trigger(target, key); // 触发更新
      return true;
    }
  });
}

API请求拦截与封装方面，Proxy可以统一处理请求：

javascript 复制代码

const api = new Proxy({}, {
  get(target, prop) {
    return async (...args) => {
      const res = await fetch(prop, args);
      return handleResponse(res); // 统一错误处理
    };
  }
});

对象访问控制与验证示例：

javascript 复制代码

const validator = new Proxy({}, {
  get(target, prop) {
    return (value) => {
      if (prop === 'email' && !/^\S+@\S+\.\S+$/.test(value)) {
        throw new Error('Invalid email format');
      }
      return value;
    };
  }
});

在模块系统中，Proxy可实现懒加载：

javascript 复制代码

const moduleLoader = new Proxy({}, {
  get(target, prop) {
    if (!target[prop]) {
      target[prop] = import(`./modules/${prop}.js`); // 按需加载
    }
    return target[prop];
  }
});

最佳实践、性能与展望

代理模式适用于数据访问控制、对象功能扩展和操作拦截场景。实践中应避免过度使用代理，优先考虑直接操作性能。对于性能敏感场景，可采用缓存策略、减少代理层级及仅在必要时使用代理。现代框架如Vue 3、React广泛利用代理实现响应式系统，未来随着JavaScript引擎优化，代理模式将在状态管理、数据绑定和API封装领域有更广泛应用。掌握代理模式将帮助开发者构建更灵活、高效的应用架构。