用 JavaScript 代理模式构建灵活而强大的代码

代理模式是一种设计模式，它允许你在不改变原始对象的情况下，为对象提供一个替代或附加接口。代理对象充当客户端和原始对象之间的中介，控制对原始对象的访问并根据需要进行操作。

在 javascript 中，代理模式可以应用于各种场景，例如：

1. 懒加载：代理对象可以延迟实例化原始对象，直到真正需要时，从而优化性能。

// 代理对象
function LazyImageProxy(src) {
  this.src = src;
  this.image = null;
}

// 延迟加载：在访问 image 属性时才实例化真实图像
LazyImageProxy.prototype.getImage = function() {
  if (!this.image) {
    this.image = new Image();
    this.image.src = this.src;
  }
  return this.image;
};

// 使用：延迟加载图像，直到用户滚动到它们
const imgProxy = new LazyImageProxy("/path/to/image.jpg");
window.addEventListener("scroll", () => {
  if (isElementInView(imgProxy.image)) {
    imgProxy.getImage();
  }
});

2. 访问控制：代理对象可以控制对敏感资源的访问，验证权限或实施其他安全措施。

// 代理对象：控制访问私有数据
function PrivateDataProxy(obj) {
  this.obj = obj;
}

PrivateDataProxy.prototype.getData = function() {
  if (this.obj.isAuthenticated()) {
    return this.obj.data;
  } else {
    throw new Error("Unauthorized access");
  }
};

// 使用：限制对私有数据的访问
const obj = {
  data: "Sensitive data",
  isAuthenticated: () => false
};
const proxy = new PrivateDataProxy(obj);
try {
  console.log(proxy.getData()); // 抛出 Unauthorized access 错误
} catch (err) {
  console.error(err);
}

3. 事件监听：代理对象可以集中管理事件监听器，简化代码维护。

// 代理对象：统一管理事件监听
function EventProxy() {
  this.listeners = [];
}

EventProxy.prototype.addListener = function(listener) {
  this.listeners.push(listener);
};

EventProxy.prototype.removeListener = function(listener) {
  this.listeners = this.listeners.filter(l => l !== listener);
};

EventProxy.prototype.dispatch = function(event) {
  this.listeners.forEach(l => l(event));
};

// 使用：集中管理 DOM 事件监听器
const proxy = new EventProxy();

// 订阅事件
const listener1 = (e) => console.log("Listener 1 triggered");
const listener2 = (e) => console.log("Listener 2 triggered");
proxy.addListener(listener1);
proxy.addListener(listener2);

// 触发事件
proxy.dispatch("Hello world!");

// 取消订阅事件
proxy.removeListener(listener1);

4. 缓存：代理对象可以缓存结果，优化性能并减少重复计算。

// 代理对象：缓存函数调用结果
function CacheProxy(func) {
  this.func = func;
  this.cache = {};
}

CacheProxy.prototype.call = function(...args) {
  const key = JSON.stringify(args);
  if (!this.cache.hasOwnProperty(key)) {
    this.cache[key] = this.func(...args);
  }
  return this.cache[key];
};

// 使用：缓存费时的计算
const heavyCalculation = (n) => {
  let result = 0;
  for (let i = 1; i <= n; i++) {
    result += i;
  }
  return result;
};

const proxy = new CacheProxy(heavyCalculation);

// 首次调用计算结果
console.log(proxy.call(1000));

// 后续调用返回缓存结果
console.log(proxy.call(1000));

5. 拦截和修改：代理对象可以拦截对原始对象的调用，修改参数、返回值或执行其他操作。

// 代理对象：拦截函数调用并修改返回值
function InterceptProxy(func) {
  this.func = func;
}

InterceptProxy.prototype.call = function(...args) {
  args[0] = args[0] + 1; // 修改第一个参数
  return this.func(...args) + 1; // 修改返回值
};

// 使用：拦截和修改 console.log 的行为
const proxy = new InterceptProxy(console.log);

// 原始调用
console.log("Hello world!"); // 输出 "Hello world!"

// 代理调用
proxy.call("Hello world!"); // 输出 "Hello world!1"

代理模式在 JavaScript 中是一种强大的工具，可提高代码的可重用性、可测试性和性能。通过分离应用程序不同的关注事项，代理对象允许你创建更灵活和易于维护的代码库。