【前端设计模式】之代理模式

// 定义目标对象接口
class Subject {
  request() {
    // 处理请求
  }
}
// 定义具体目标对象类
class RealSubject extends Subject {
  request() {
    // 处理真实请求
  }
}
// 定义代理对象类
class Proxy extends Subject {
  constructor() {
    super();
    this.realSubject = new RealSubject();
  }
  request() {
    // 在转发请求之前或之后执行一些额外操作
    this.preRequest();
    this.realSubject.request();
    this.postRequest();
  }
  preRequest() {
    // 在转发请求之前执行一些额外操作
  }
  postRequest() {
    // 在转发请求之后执行一些额外操作
  }
}
// 使用示例
const proxy = new Proxy();
proxy.request(); // 通过代理对象发送请求，并在转发前后执行额外操作

// 定义目标对象
class ImageLoader {
  constructor(imageElement) {
    this.imageElement = imageElement;
    this.realImage = new Image();
    this.realImage.onload = () => {
      this.imageElement.src = this.realImage.src;
    };
  }
  load() {
    // 模拟从服务器加载真实图片的操作
    console.log("Loading real image...");
    this.realImage.src = this.imageElement.dataset.src;
  }
}
// 定义图片懒加载代理对象
class LazyImageProxy {
  constructor(imageElement) {
    this.imageElement = imageElement;
  }
  load() {
    if (this.imageElement.getBoundingClientRect().top < window.innerHeight) {
      const imageLoader = new ImageLoader(this.imageElement);
      imageLoader.load();
    }
  }
}
// 使用示例
const lazyImages = document.querySelectorAll(".lazy-image");
lazyImages.forEach((image) => {
  const lazyImageProxy = new LazyImageProxy(image);
  lazyImageProxy.load();
});

// 定义目标对象
class DataService {
  fetchData(key) {
    // 模拟从服务器获取数据的操作
    console.log("Fetching data from server...");
    return `Data for ${key}`;
  }
}
// 定义数据缓存代理对象
class DataCacheProxy {
  constructor() {
    this.cache = {};
    this.dataService = new DataService();
  }
  fetchData(key) {
    if (this.cache[key]) {
      console.log("Fetching data from cache...");
      return this.cache[key];
    } else {
      const data = this.dataService.fetchData(key);
      this.cache[key] = data;
      return data;
    }
  }
}
// 使用示例
const proxy = new DataCacheProxy();
console.log(proxy.fetchData("example")); // 从服务器获取数据，并缓存起来
console.log(proxy.fetchData("example")); // 从缓存中获取数据

const proxy = new Proxy(target, handler);

const user = {
  name: "John",
  isAdmin: false,
};

const userProxy = new Proxy(user, {
  get(target, property) {
    if (property === "isAdmin") {
      return false; // 拒绝访问isAdmin属性
    }
    return target[property];
  },
  set(target, property, value) {
    if (property === "isAdmin") {
      throw new Error("Cannot modify isAdmin property.");
    }
    target[property] = value;
    return true;
  },
});

console.log(userProxy.name); // 输出: "John"
console.log(userProxy.isAdmin); // 输出: false
userProxy.isAdmin = true; // 抛出错误: "Cannot modify isAdmin property."