学习JavaScript设计模式之代理模式

什么是代理模式

代理模式是一种结构型设计模式，可以为其他对象提供一种代理以控制对这个对象的访问。

代理模式允许在不改变原始对象行为的情况下，通过代理对象来控制或修改对象的行为。这种方式提供了一种更加灵活和安全的访问对象的方式。

代理模式由三个部分组成，分别是目标对象（即要被代理的对象）、代理对象和客户端。

代理模式的应用场景

代理模式在以下场景中非常有用：

远程代理：为远程对象提供代表本地对象的代理对象，使得可以通过网络访问远程对象。
虚拟代理：延迟加载大型对象或耗时对象，直到第一次访问时才开始实例化该对象。
安全代理：控制对对象的访问权限，以确保只有授权的用户可以访问对象。
智能代理：在访问对象时添加额外的功能，例如，在访问对象前先执行某些操作或在访问对象后缓存结果。

实例说明

下面是两个代理模式的示例：

1. 虚拟代理

示例场景：网站上有一个图片列表，当用户点击其中的图片时，需要打开一个模态框来显示该图片。

但是，当图片很多时，一次性加载所有图片会导致网站变慢，影响用户体验。

这时，我们可以使用虚拟代理，即只在用户点击时才加载该图片，而不是一开始就加载所有图片。

class Image {
  constructor(url) {
    this.url = url;
    this.loaded = false;
  }

  load() {
    console.log(`开始加载图片：${this.url}`);
    this.loaded = true;
  }
}

class ImageProxy {
  constructor(url) {
    this.url = url;
  }

  display() {
    if (!this.image) {
      this.image = new Image(this.url);
    }

    if (!this.image.loaded) {
      this.image.load();
    }

    console.log(`显示图片：${this.url}`);
  }
}

在这个示例中，Image 是目标对象，ImageProxy 是代理对象。

当用户第一次点击图片时，ImageProxy 会创建一个 Image 对象，并调用其 load 方法来加载图片。第二次点击相同的图片时，ImageProxy 只需要直接调用 Image 对象的 display 方法即可。

2. 安全代理

示例场景：在一个在线购物网站中，只有登录用户才可以查看订单信息。为了防止用户通过猜测 URL 的方式访问订单信息，我们需要使用安全代理来控制用户对订单信息的访问权限。

class Order {
  constructor(id, userInfo) {
    this.id = id;
    this.userInfo = userInfo;
  }

  display() {
    console.log(`查看订单信息：${this.id}`);
  }
}

class OrderProxy {
  constructor(id, userInfo) {
    this.id = id;
    this.userInfo = userInfo;
  }

  display() {
    if (this.userInfo.loggedIn) {
      console.log(`查看订单信息：${this.id}`);
    } else {
      console.log(`请先登录后再查看订单信息`);
    }
  }
}

在这个示例中，Order 是目标对象，OrderProxy 是代理对象。

当用户调用 display 方法时，OrderProxy 会先检查用户是否已经登录，如果登录了就直接调用 Order 对象的 display 方法，否则就提示用户先登录后再查看订单信息。