什么是代理模式？
代理模式（Proxy Pattern）是一种结构型设计模式，它通过创建代理对象来控制对原始对象的访问。
这种模式在前端开发中广泛应用，特别是在需要控制对象访问、添加额外逻辑或优化性能的场景中。
核心思想：在客户端代码和真实对象之间添加中间层，这个中间层（代理）可以：
- 控制对原始对象的访问权限
- 添加预处理/后处理逻辑
- 实现延迟加载
- 缓存昂贵操作的结果
- 记录日志或监控行为
代理模式实现方式
1. 虚拟代理（延迟加载）
// 原始图片加载器
class ImageLoader {constructor(url) {this.url = url;}load() {console.log(`Loading image from ${this.url}`);return `<img src="${this.url}" />`;}
}// 虚拟代理 - 延迟加载
class ImageProxy {constructor(url) {this.url = url;this.imageLoader = null; // 延迟初始化}load() {if (!this.imageLoader) {this.imageLoader = new ImageLoader(this.url);// 添加占位逻辑const placeholder = document.createElement('div');placeholder.style.width = '300px';placeholder.style.height = '200px';placeholder.style.background = '#eee';document.body.appendChild(placeholder);// 延迟实际加载setTimeout(() => {document.body.removeChild(placeholder);document.body.innerHTML += this.imageLoader.load();}, 2000);}return 'Image loading initiated...';}
}// 使用代理
const image = new ImageProxy('https://example.com/large-image.jpg');
console.log(image.load()); // 立即返回占位符，2秒后加载真实图片2. 缓存代理（记忆函数）
// 原始计算函数
function fibonacci(n) {if (n <= 1) return n;return fibonacci(n - 1) + fibonacci(n - 2);
}// 缓存代理
function createCachedProxy(fn) {const cache = new Map();return function(n) {if (cache.has(n)) {console.log(`Cache hit for n=${n}`);return cache.get(n);}const result = fn(n);cache.set(n, result);console.log(`Calculated for n=${n}`);return result;};
}// 使用代理
const cachedFib = createCachedProxy(fibonacci);console.log(cachedFib(35)); // 长时间计算
console.log(cachedFib(35)); // 立即返回缓存结果3. 保护代理（访问控制）
// 原始用户服务
class UserService {constructor() {this.users = new Map([[1, { id: 1, name: 'Admin', role: 'admin' }]]);}deleteUser(id) {this.users.delete(id);return `User ${id} deleted`;}
}// 保护代理
class UserServiceProxy {constructor(user) {this.userService = new UserService();this.currentUser = user;}deleteUser(id) {if (this.currentUser.role !== 'admin') {throw new Error('Permission denied');}return this.userService.deleteUser(id);}
}// 使用代理
const adminProxy = new UserServiceProxy({ role: 'admin' });
console.log(adminProxy.deleteUser(1)); // 成功const userProxy = new UserServiceProxy({ role: 'user' });
userProxy.deleteUser(1); // 抛出权限错误4. ES6 Proxy实现
// 原始对象
const database = {users: {1: { name: 'Alice', email: 'alice@example.com' }},getEmail: function(userId) {return this.users[userId]?.email;}
};// 创建代理
const protectedDatabase = new Proxy(database, {get(target, prop) {// 权限验证if (prop === 'users') {throw new Error('Direct access to users denied');}return target[prop];},set(target, prop, value) {// 写操作限制if (prop === 'users') {throw new Error('User modification requires admin privileges');}target[prop] = value;return true;}
});console.log(protectedDatabase.getEmail(1)); // 正常访问
protectedDatabase.users = {}; // 抛出错误
console.log(protectedDatabase.users); // 抛出错误代理模式优缺点分析
优点：
- 访问控制：实现精细的权限管理
// API请求代理示例
class ApiProxy {constructor(api) {this.api = api;}async request(endpoint) {if (isRateLimited(endpoint)) {throw new Error('API rate limit exceeded');}trackRequest(endpoint);return this.api.request(endpoint);}
}- 性能优化：通过缓存和延迟加载提升性能
// 图片懒加载代理
const lazyImage = new Proxy(new Image(), {set(target, prop, value) {if (prop === 'src') {// 延迟到元素可见时加载const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {target.src = value;observer.unobserve(target);}});});observer.observe(target);return true;}return Reflect.set(...arguments);}
});document.body.appendChild(lazyImage);
lazyImage.src = 'https://example.com/large-image.jpg'; // 实际加载延迟到图片可见时- 职责分离：保持核心逻辑的纯净性
// 原始表单验证
class FormValidator {validateEmail(email) {return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);}
}// 验证代理添加日志
class LoggingValidatorProxy {constructor(validator) {this.validator = validator;}validateEmail(email) {const result = this.validator.validateEmail(email);console.log(`Email validation result for ${email}: ${result}`);return result;}
}缺点：
- 复杂性增加：可能引入额外抽象层
// 过度设计的代理示例（不推荐）
class OverEngineeredProxy {constructor(service) {this.service = service;this.logger = new Logger();this.cache = new Cache();this.validator = new Validator();}async getData() {this.logger.logStart();if (!this.validator.validate()) {throw new Error('Validation failed');}const data = await this.cache.get('data') || this.service.getData();this.logger.logEnd();return data;}
}- 性能损耗：额外的代理调用开销
// 性能敏感的原始类
class Vector {constructor(x, y) {this.x = x;this.y = y;}add(other) {return new Vector(this.x + other.x, this.y + other.y);}
}// 添加日志代理可能影响性能
const loggedVector = new Proxy(new Vector(1,2), {get(target, prop) {if (typeof target[prop] === 'function') {return function(...args) {console.log(`Calling ${prop} with`, args);return target[prop].apply(target, args);};}return target[prop];}
});// 在需要高性能计算的场景中，这种代理会产生明显开销- 调试困难：调用堆栈变深
// 多层代理导致的调试问题
const original = { method() { console.log('Original method'); }
};const proxy1 = new Proxy(original, {get(target, prop) {console.log('Proxy1 handler');return target[prop];}
});const proxy2 = new Proxy(proxy1, {get(target, prop) {console.log('Proxy2 handler');return target[prop];}
});proxy2.method(); // 调用链：proxy2 -> proxy1 -> original工程实践建议
1. 表单验证代理
// 原始表单对象
const form = {values: {},errors: {},submit() {console.log('Submitting:', this.values);}
};// 验证代理
const validatedForm = new Proxy(form, {set(target, prop, value) {if (prop === 'values') {// 自动触发验证target.errors = validateForm(value);if (Object.keys(target.errors).length === 0) {target.submit();}}return Reflect.set(...arguments);}
});function validateForm(values) {const errors = {};if (!values.email?.includes('@')) errors.email = 'Invalid email';if (values.password?.length < 6) errors.password = 'Password too short';return errors;
}// 使用
validatedForm.values = { email: 'user@example.com', password: '12345'
}; // 自动触发验证并显示错误2. API请求代理
// 请求代理工厂
function createApiProxy(api, config = {}) {return new Proxy(api, {get(target, prop) {const originalMethod = target[prop];if (typeof originalMethod !== 'function') return originalMethod;return async function(...args) {// 请求拦截if (config.beforeRequest) {args = config.beforeRequest(...args) || args;}try {const response = await originalMethod.apply(target, args);// 响应拦截return config.afterResponse ? config.afterResponse(response) : response;} catch (error) {// 错误处理if (config.errorHandler) {return config.errorHandler(error);}throw error;}};}});
}// 使用示例
const rawApi = {async getUser(id) {const res = await fetch(`/api/users/${id}`);return res.json();}
};const enhancedApi = createApiProxy(rawApi, {beforeRequest: (id) => {console.log(`Requesting user ${id}`);return [id]; // 可以修改参数},afterResponse: (data) => {console.log('Received response');return { ...data, fullName: `${data.firstName} ${data.lastName}` };},errorHandler: (error) => {console.error('API Error:', error);return { error: true, message: error.message };}
});// 调用方式保持一致
enhancedApi.getUser(123).then(console.log);注意事项
- 接口一致性：代理必须保持与原对象相同的接口
// 错误的代理实现（接口不一致）
class BadProxy {constructor(file) {this.file = file;}// 遗漏了原始对象的save方法read() {return this.file.read();}
}- 避免深层代理嵌套
// 不推荐的深层嵌套
const proxy1 = new Proxy(obj, handler1);
const proxy2 = new Proxy(proxy1, handler2);
const proxy3 = new Proxy(proxy2, handler3);
// 应尽量保持代理层级扁平- 注意内存管理
// 代理导致的闭包内存泄漏
function createLeakyProxy() {const hugeData = new Array(1000000).fill('data');return new Proxy({}, {get(target, prop) {// 无意中持有hugeData的引用return hugeData[prop];}});
}- 性能关键路径慎用
// 在动画循环中避免使用复杂代理
function animate() {// 直接访问对象属性element.x += velocity.x;element.y += velocity.y;// 而不是：// proxiedElement.x += velocity.x;requestAnimationFrame(animate);
}- 与装饰器模式区分
// 装饰器模式（增强功能）
function withLogging(fn) {return function(...args) {console.log('Calling function');return fn(...args);};
}// 代理模式（控制访问）
const proxiedFn = new Proxy(fn, {apply(target, thisArg, args) {if (!validate(args)) throw new Error('Invalid arguments');return Reflect.apply(target, thisArg, args);}
});代理模式是前端架构中的重要模式，适用于：
- 需要访问控制的场景（权限验证、流量控制）
- 性能优化需求（缓存、延迟加载）
- 增强监控能力（日志记录、性能跟踪）
- 实现智能引用（自动清理、加载）
在实际工程中建议：
- 优先使用ES6 Proxy实现简单代理逻辑
- 对性能敏感模块谨慎使用
- 保持代理接口与原始对象一致
- 使用TypeScript增强类型安全
- 配合工厂模式创建复杂代理
正确使用代理模式可以提升代码的可维护性和扩展性，但需要警惕模式滥用带来的复杂性。
建议结合具体需求场景，在代码清晰度和功能需求之间找到平衡点。