探索六边形与整洁架构，以构建可维护、可扩展且可测试的前端应用。了解其原则、优点和实践策略。
前端架构：用于可扩展应用的六边形与整洁架构
随着前端应用日益复杂，一个明确定义的架构对于可维护性、可测试性和可扩展性变得至关重要。六边形架构（又称端口与适配器）和整洁架构是解决这些问题的两种流行架构模式。虽然源于后端领域，但这些原则可以有效地应用于前端开发，以创建健壮且适应性强的用户界面。
什么是前端架构？
前端架构定义了前端应用中不同组件的结构、组织和交互方式。它为应用的构建、维护和扩展提供了蓝图。一个好的前端架构能促进：
- 可维护性： 更易于理解、修改和调试代码。
- 可测试性： 便于编写单元测试和集成测试。
- 可扩展性： 允许应用处理不断增加的复杂性和用户负载。
- 可复用性： 促进代码在应用不同部分之间的复用。
- 灵活性： 适应不断变化的需求和新技术。
没有清晰的架构，前端项目会迅速变得庞大而难以管理，导致开发成本增加和敏捷性降低。
六边形架构简介
六边形架构由 Alistair Cockburn 提出，旨在将应用的核心业务逻辑与外部依赖（如数据库、UI 框架和第三方 API）解耦。它通过端口与适配器的概念实现这一目标。
六边形架构的关键概念：
- 核心（领域）： 包含应用的业务逻辑和用例。它独立于任何外部框架或技术。
- 端口： 定义核心如何与外部世界交互的接口。它们代表了核心的输入和输出边界。
- 适配器： 实现端口并将核心连接到特定外部系统的具体实现。适配器分为两种类型：
- 驱动适配器（主要适配器）： 发起与核心的交互。例如 UI 组件、命令行界面或其他应用。
- 被驱动适配器（次要适配器）： 由核心调用以与外部系统交互。例如数据库、API 或文件系统。
核心对具体的适配器一无所知，它只通过端口与它们交互。这种解耦允许你轻松替换不同的适配器，而不会影响核心逻辑。例如，你只需替换驱动适配器，就可以从一个 UI 框架（如 React）切换到另一个（如 Vue.js）。
六边形架构的优点：
- 提高可测试性： 核心业务逻辑可以轻松地进行隔离测试，无需依赖外部系统。你可以使用模拟适配器来模拟外部系统的行为。
- 增强可维护性： 对外部系统的更改对核心逻辑的影响最小。这使得应用的长期维护和演进更加容易。
- 更强的灵活性： 你可以通过添加或替换适配器，轻松地使应用适应新技术和新需求。
- 提升可复用性： 核心业务逻辑可以通过连接到不同的适配器，在不同的上下文中复用。
整洁架构简介
整洁架构由 Robert C. Martin（鲍勃大叔）推广，是另一种强调关注点分离和解耦的架构模式。它专注于创建一个独立于框架、数据库、UI 和任何外部机构的系统。
整洁架构的关键概念：
整洁架构将应用组织成同心圆分层结构，最抽象和可复用的代码位于中心，而最具体和与技术相关的代码位于外层。
- 实体（Entities）： 代表应用的核心业务对象和规则。它们独立于任何外部系统。
- 用例（Use Cases）： 定义应用的业务逻辑以及用户如何与系统交互。它们协调实体以执行特定任务。
- 接口适配器（Interface Adapters）： 在用例和外部系统之间转换数据。该层包括展示器（Presenters）、控制器（Controllers）和网关（Gateways）。
- 框架与驱动（Frameworks and Drivers）： 最外层，包含 UI 框架、数据库和其他外部技术。
整洁架构中的依赖规则规定，外层可以依赖内层，但内层不能依赖外层。这确保了核心业务逻辑独立于任何外部框架或技术。
整洁架构的优点：
- 独立于框架： 该架构不依赖于任何功能丰富的软件库。这使你可以将框架作为工具使用，而不是被迫将系统置于其有限的约束中。
- 可测试： 业务规则可以在没有 UI、数据库、Web 服务器或任何其他外部元素的情况下进行测试。
- 独立于 UI： UI 可以轻松更改，而无需改变系统的其余部分。Web UI 可以替换为控制台 UI，而无需更改任何业务规则。
- 独立于数据库： 你可以将 Oracle 或 SQL Server 替换为 Mongo、BigTable、CouchDB 或其他数据库。你的业务规则不与数据库绑定。
- 独立于任何外部机构： 事实上，你的业务规则根本不知道任何关于外部世界的事情。
将六边形与整洁架构应用于前端开发
虽然六边形架构和整洁架构通常与后端开发相关，但它们的原则可以有效地应用于前端应用，以改善其架构和可维护性。方法如下：
1. 识别核心（领域）
第一步是识别前端应用的核心业务逻辑。这包括独立于 UI 框架或任何外部 API 的实体、用例和业务规则。例如，在电子商务应用中，核心可能包括管理产品、购物车和订单的逻辑。
示例： 在一个任务管理应用中，核心领域可能包括：
- 实体： 任务、项目、用户
- 用例： 创建任务、更新任务、分配任务、完成任务、列出任务
- 业务规则： 任务必须有标题，任务不能分配给非项目成员的用户。
2. 定义端口与适配器（六边形架构）或分层（整洁架构）
接下来，定义用于将核心与外部系统分离的端口与适配器（六边形架构）或分层（整洁架构）。在前端应用中，这些可能包括：
- UI 组件（驱动适配器/框架与驱动）： 与用户交互的 React、Vue.js、Angular 组件。
- API 客户端（被驱动适配器/接口适配器）： 向后端 API 发出请求的服务。
- 数据存储（被驱动适配器/接口适配器）： 本地存储、IndexedDB 或其他数据存储机制。
- 状态管理（接口适配器）： Redux、Vuex 或其他状态管理库。
使用六边形架构的示例：
- 核心： 任务管理逻辑（实体、用例、业务规则）。
- 端口：
TaskService（定义创建、更新和检索任务的方法）。 - 驱动适配器： 使用
TaskService与核心交互的 React 组件。 - 被驱动适配器： 实现
TaskService并向后端 API 发出请求的 API 客户端。
使用整洁架构的示例：
- 实体： 任务、项目、用户（纯 JavaScript 对象）。
- 用例： CreateTaskUseCase, UpdateTaskUseCase（协调实体）。
- 接口适配器：
- 控制器：处理来自 UI 的用户输入。
- 展示器：格式化数据以在 UI 中显示。
- 网关：与 API 客户端交互。
- 框架与驱动： React 组件、API 客户端（axios、fetch）。
3. 实现适配器（六边形架构）或分层（整洁架构）
现在，实现连接核心与外部系统的适配器或分层。确保适配器或分层独立于核心，并且核心只通过端口或接口与它们交互。这使你可以轻松替换不同的适配器或分层，而不会影响核心逻辑。
示例（六边形架构）：
// TaskService 端口
interface TaskService {
createTask(taskData: TaskData): Promise;
updateTask(taskId: string, taskData: TaskData): Promise;
getTask(taskId: string): Promise;
}
// API 客户端适配器
class ApiTaskService implements TaskService {
async createTask(taskData: TaskData): Promise {
// 发起 API 请求创建任务
}
async updateTask(taskId: string, taskData: TaskData): Promise {
// 发起 API 请求更新任务
}
async getTask(taskId: string): Promise {
// 发起 API 请求获取任务
}
}
// React 组件适配器
function TaskList() {
const taskService: TaskService = new ApiTaskService();
const handleCreateTask = async (taskData: TaskData) => {
await taskService.createTask(taskData);
// 更新任务列表
};
// ...
}
示例（整洁架构）：
// 实体
class Task {
constructor(public id: string, public title: string, public description: string) {}
}
// 用例
class CreateTaskUseCase {
constructor(private taskGateway: TaskGateway) {}
async execute(title: string, description: string): Promise {
const task = new Task(generateId(), title, description);
await this.taskGateway.create(task);
return task;
}
}
// 接口适配器 - 网关
interface TaskGateway {
create(task: Task): Promise;
}
class ApiTaskGateway implements TaskGateway {
async create(task: Task): Promise {
// 发起 API 请求创建任务
}
}
// 接口适配器 - 控制器
class TaskController {
constructor(private createTaskUseCase: CreateTaskUseCase) {}
async createTask(req: Request, res: Response) {
const { title, description } = req.body;
const task = await this.createTaskUseCase.execute(title, description);
res.json(task);
}
}
// 框架与驱动 - React 组件
function TaskForm() {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const apiTaskGateway = new ApiTaskGateway();
const createTaskUseCase = new CreateTaskUseCase(apiTaskGateway);
const taskController = new TaskController(createTaskUseCase);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
await taskController.createTask({ body: { title, description } } as Request, { json: (data: any) => console.log(data) } as Response);
};
return (