当谈到设计模式时，代理模式是一个非常重要且常用的模式之一。代理模式是一种结构性设计模式，它允许你提供一个代理或者占位符以控制对其他对象的访问。代理模式通常用于实现懒加载、远程代理、虚拟代理、安全代理等不同的场景。

什么是代理模式

代理模式是一种结构性设计模式，用于为对象提供一个替代品或占位符，从而更好地控制对它的访问。通常，代理对象充当另一个对象的接口，允许你在访问实际对象之前或之后执行附加操作。这样，你可以在不直接访问真实对象的情况下，管理和控制对象的访问行为。

代理模式是一直非常有意义的模式，在生活中可以找到很多代理模式的场景。比如，明星都有经纪人作为代理。如果想请明星来办一场商业演出，只能联系他的经纪人。经纪人会把商业演出的细节和报酬都谈好之后，再把合同交给明星签。

代理模式通常涉及以下几个角色：

抽象主题（Subject）：定义了代理和真实主题的共同接口，确保代理对象可以替代真实对象。通常是一个接口或抽象类。
真实主题（Real Subject）：定义了代理所代表的真实对象。代理将客户端的请求委派给真实主题来执行实际操作。
代理（Proxy）：实现了抽象主题的接口，它可以代表真实主题，控制对真实主题的访问。代理可以在访问真实主题之前或之后执行附加操作，如懒加载、缓存等。

这些角色一起协作，使代理模式能够有效地管理和控制对象的访问。代理对象充当客户端和真实对象之间的中介，可以增加灵活性和安全性，同时降低了系统的复杂性。

代理模式的实现思路

代理模式的工作原理涉及代理对象充当客户端和真实对象之间的中介，以控制对真实对象的访问。以下是代理模式的基本工作原理：

客户端请求：客户端通过抽象主题（通常是一个接口或抽象类）来访问代理对象。
代理对象接收请求：代理对象接收到客户端的请求后，可以在访问真实对象之前或之后执行一些附加操作，如权限检查、日志记录、懒加载等。
代理对象委派请求：如果需要，代理对象将请求委派给真实主题（实际对象）执行实际操作。
真实主题执行操作：真实主题执行客户端请求的实际操作，并返回结果。
代理对象返回结果：代理对象将真实主题返回的结果传递给客户端，作为对客户端请求的响应。

代理模式的核心思想是将访问控制和附加功能添加到对象访问的过程中，而不需要客户端直接访问真实对象。这可以实现许多不同的目标，包括：

懒加载（Lazy Loading）：代理对象可以延迟加载真实对象，只有在需要时才创建和初始化它。
远程代理（Remote Proxy）：代理对象可以代表位于远程服务器上的真实对象，从而实现分布式系统中的远程调用。
虚拟代理（Virtual Proxy）：代理对象可以用于代表大对象，只有在需要时才加载和显示它，以节省资源。
安全代理（Security Proxy）：代理对象可以用于实现访问控制，只允许有特定权限的用户访问真实对象。

总之，代理模式通过引入代理对象，提供了更灵活、更安全和更高效的对象访问方式，同时允许在访问前后执行附加操作，以满足不同的需求。

保护代理和虚拟代理

当我们探讨保护代理和虚拟代理的关联时，一个常见的示例是在一个文件管理系统中实现它们。我们将创建一个虚拟文件管理系统，其中包括保护代理来限制对敏感文件的访问，并使用虚拟代理来实现懒加载文件内容。

保护代理

现在，我们创建一个保护代理，用于限制对敏感文件的访问。只有经过身份验证的用户才能访问敏感文件：

js 复制代码

// 敏感文件类
class SensitiveFile {
  constructor(name, content) {
    this.name = name;
    this.content = content;
  }

  getName() {
    return this.name;
  }

  getContent() {
    return this.content;
  }
}

// 保护代理
class ProtectionProxy {
  constructor(userIsAuthenticated) {
    this.userIsAuthenticated = userIsAuthenticated;
  }

  accessFile(file) {
    if (this.userIsAuthenticated) {
      console.log(`Accessing file: ${file.getName()}`);
      console.log(`File content: ${file.getContent()}`);
    } else {
      console.log("Access denied. Please log in to access the content.");
    }
  }
}

// 测试示例
const sensitiveFile = new SensitiveFile(
  "sensitive.txt",
  "This is sensitive content."
);
const proxy = new ProtectionProxy(false); // 用户未经过身份验证

proxy.accessFile(sensitiveFile); // 输出："Access denied. Please log in to access the content."

proxy.userIsAuthenticated = true; // 用户经过身份验证
proxy.accessFile(sensitiveFile); // 输出文件内容

在上面的示例中，ProtectionProxy 控制对敏感文件的访问权限，只有在用户经过身份验证时才允许访问文件内容。

虚拟代理

接下来，我们创建一个虚拟代理，用于实现懒加载文件内容。文件内容将只在需要时才被加载：

js 复制代码

// 大型文件类
class LargeFile {
  constructor(name, contentProvider) {
    this.name = name;
    this.contentProvider = contentProvider;
    this.content = null;
  }

  getName() {
    return this.name;
  }

  getContent() {
    if (this.content === null) {
      console.log(`Loading content of ${this.name}...`);
      this.content = this.contentProvider();
    }
    return this.content;
  }
}

// 虚拟代理
class VirtualProxy {
  constructor(name, contentProvider) {
    this.name = name;
    this.contentProvider = contentProvider;
    this.realFile = null;
  }

  accessFile() {
    if (!this.realFile) {
      this.realFile = new LargeFile(this.name, this.contentProvider);
    }
    return this.realFile.getContent();
  }
}

// 测试示例
const virtualProxy = new VirtualProxy("large_file.txt", () => {
  console.log("Simulating content loading...");
  return "This is the content of the large file.";
});

console.log(virtualProxy.accessFile()); // 输出文件内容
console.log(virtualProxy.accessFile()); // 直接输出文件内容，不再加载

在上面的示例中，VirtualProxy 用于实现懒加载大型文件的内容，只有在首次访问文件时才会加载文件内容，后续访问将直接返回已加载的内容。

我们通过保护代理限制了对敏感文件的访问，并通过虚拟代理实现了懒加载大型文件的内容。这两个代理相互关联，共同提供了更安全和高效的文件管理功能。

虚拟代理合并 HTTP 请求

先想象这样一个场景，每周我们都要写一份工作周报，周报要交给总监批阅。总结手下管理者 250 个员工，如果每个人都直接把周报发给总监，那总监可能要把一整周的时间都花在查看邮件上面。

现在我们把周报发给各自的组长，组长作为代理，把组内成员的周报合并提炼成一份后一次性地发给总监。这样一来，总监的邮件便清净多了。

下面我将为您提供一个使用代理合并 HTTP 请求的示例，首先，您需要安装 express 和 axios，您可以使用以下命令进行安装：

bash 复制代码

npm install express axios

现在，让我们编写一个示例来合并 HTTP 请求：

js 复制代码

const express = require("express");
const axios = require("axios");

const app = express();
const port = 3000;

// 定义一个代理路由，用于合并多个 HTTP 请求
app.get("/merge-requests", async (req, res) => {
  // 创建要合并的请求列表
  const requests = [
    axios.get("https://jsonplaceholder.typicode.com/posts/1"),
    axios.get("https://jsonplaceholder.typicode.com/posts/2"),
    axios.get("https://jsonplaceholder.typicode.com/posts/3"),
  ];

  try {
    // 使用 Promise.all 合并多个请求
    const responses = await Promise.all(requests);

    // 提取每个请求的响应数据
    const mergedData = responses.map((response) => response.data);

    // 发送合并后的数据作为响应
    res.json(mergedData);
  } catch (error) {
    console.error("Error:", error.message);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

以上示例创建了一个 Node.js Express 服务器，监听在端口 3000 上。在 /merge-requests 路由中，它定义了一个代理，该代理会合并多个 HTTP 请求。

使用 Promise.all 来并行发起多个请求，并等待它们全部完成。这将确保请求是并行执行的，而不是串行执行。一旦所有请求都完成，我们提取每个请求的响应数据，并将它们存储在 mergedData 数组中。最后，我们将合并后的数据作为 JSON 响应发送给客户端。

这个示例演示了代理模式的应用，特别是合并多个 HTTP 请求，以减少请求次数并提高性能。代理模式可以用于实现各种请求合并、缓存和优化的场景，以改善应用程序的性能和效率。

代理模式在 React 中的应用

代理模式在 React 中有多种应用场景，它可以帮助你控制和优化组件的行为。以下是一些代理模式在 React 中的常见应用：

虚拟代理 (Virtual Proxy)

React 中的虚拟代理通常指的是组件的懒加载。当你有一个大型组件或页面，不希望一开始就加载所有内容时，可以使用虚拟代理。React 提供了 React.lazy() 和 Suspense 来实现组件的懒加载。这样，组件只有在首次渲染或用户访问时才会被加载，从而提高性能。

jsx 复制代码

import React, { lazy, Suspense } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

保护代理 (Protection Proxy)

保护代理可以用于控制对组件或资源的访问权限。例如，你可以创建一个高阶组件 (HOC) 来检查用户是否有足够的权限来访问某个组件或页面。

jsx 复制代码

import React from "react";

function withAuthorization(WrappedComponent) {
  return function AuthorizedComponent(props) {
    // 检查用户是否有权限
    const isAuthenticated = checkUserAuthentication();

    if (!isAuthenticated) {
      return <div>Access Denied</div>;
    }

    return <WrappedComponent {...props} />;
  };
}

// 使用保护代理
const ProtectedComponent = withAuthorization(SomeComponent);

function App() {
  return (
    <div>
      <ProtectedComponent />
    </div>
  );
}

缓存代理 (Cache Proxy)

缓存代理可以用于缓存组件的渲染结果，以提高性能。例如，你可以使用 react-query 或 swr 这样的库来缓存组件所需的数据，以减少重复请求。

jsx 复制代码

import { useQuery } from "react-query";

function CachedComponent() {
  const { data } = useQuery("someData", fetchDataFunction);

  return <div>{data}</div>;
}

动态代理 (Dynamic Proxy)

动态代理可用于拦截和处理组件生命周期事件、状态更新或数据传递。例如，你可以使用 Redux 或 Mobx 来创建动态代理，以管理应用程序的状态并触发组件重新渲染。

jsx 复制代码

import { connect } from "react-redux";

function mapStateToProps(state) {
  return {
    // 映射状态到组件的 props
    someData: state.someData,
  };
}

const ConnectedComponent = connect(mapStateToProps)(SomeComponent);

function App() {
  return (
    <div>
      <ConnectedComponent />
    </div>
  );
}

总之，代理模式在 React 中可以用于实现懒加载、权限控制、缓存和状态管理等不同方面的功能。它有助于更好地控制组件的行为，提高应用程序的性能和可维护性。根据具体的应用场景，你可以选择使用不同类型的代理来满足你的需求。

总结

代理模式是一种设计模式，用于控制和管理对对象的访问。它允许代理对象代替实际对象，以控制访问、实现延迟加载、提高性能、增强安全性等。代理模式有不同类型，包括虚拟代理、保护代理、远程代理等，适用于多种应用场景，提供了更好的控制和封装对象行为的方式。

最后分享两个我的两个开源项目,它们分别是:

这两个项目都会一直维护的,如果你也喜欢,欢迎 star 🚗🚗🚗

设计模式之代理模式，以及代理模式在 React 中的应用🐂🐂🐂

什么是代理模式

代理模式的实现思路

保护代理和虚拟代理

保护代理

虚拟代理

虚拟代理合并 HTTP 请求

代理模式在 React 中的应用

虚拟代理 (Virtual Proxy)

保护代理 (Protection Proxy)

缓存代理 (Cache Proxy)

动态代理 (Dynamic Proxy)

总结