本文将讨论一般的干净/整洁Clean架构是什么，并熟悉域、用例和应用程序层等概念。然后我们将讨论这如何应用于前端以及它是否值得。
接下来，我们将按照简洁架构的规则设计 cookie 存储的前端。这家商店将使用 React 作为其 UI 框架。然后我们将从头开始实现其中一个用例，看看它是否可用。
代码中会有一点TypeScript，但只是为了展示如何使用类型和接口来描述实体。我们今天将看到的所有内容都可以在没有 TypeScript 的情况下使用，只是代码不会那么具有表现力。
我们今天几乎不会谈论 OOP，所以这篇文章应该不会引起任何严重的过敏。我们在最后只会提到一次 OOP，但这不会阻止我们设计应用程序。
....详细点击标题
设计应用程序
讲完了理论，我们就可以开始实践了。让我们设计一个 cookie 存储的架构。
这家商店会出售不同种类的饼干，它们可能有不同的成分。用户将选择饼干并订购它们，并在第三方支付服务中为订单付款。
将有一个我们可以在主页上购买的饼干展示。只有经过身份验证，我们才能购买饼干。登录按钮会将我们带到一个登录页面，我们可以在那里登录。
成功登录后，我们将能够将一些饼干放入购物车。
当我们将饼干放入购物车后，我们就可以下订单了。付款后，我们会在列表中收到一个新订单和一个已清空的购物车。
我们将实现结帐用例。您可以在源代码中找到其余的用例。
设计领域
应用程序中最重要的是域。它是应用程序的主要实体及其数据转换所在的位置。我建议您从域开始，以便在您的代码中准确表示应用程序的域知识。
商店域可能包括：
- 每个实体的数据类型：用户、cookie、购物车和订单；
- 用于创建每个实体或类的工厂（如果您在 OOP 中编写）；
- 和该数据的转换函数。
域中的转换函数应该只依赖于域的规则而不是其他任何东西。例如，此类功能将是：
- 计算总成本的函数；
- 用户口味偏好检测
- 确定商品是否在购物车中等。
设计应用层
应用层包含用例。一个用例总是有一个参与者、一个动作和一个结果。
在店里，我们可以区分：
- 一个产品购买场景；
- 支付，调用第三方支付系统；
- 与产品和订单的交互：更新、浏览；
- 根据角色访问页面。
用例通常根据主题领域进行描述。例如，“结账”场景实际上包括几个步骤：
- 从购物车中检索商品并创建新订单；
- 支付订单；
- 如果支付失败通知用户；
- 清空购物车并显示订单。
用例函数将是描述此场景的代码。
此外，在应用层有端口——用于与外界通信的接口。
设计适配器层
在适配器层，我们为外部服务声明适配器。适配器使第三方服务的不兼容 API 与我们的系统兼容。
在前端，适配器通常是 UI 框架和 API 服务器请求模块。在我们的例子中，我们将使用：
- 用户界面框架；
- API请求模块；
- 本地存储适配器；
- API 的适配器和转换器响应应用层。
使用 MVC模式 类比作为判断依据
有时很难知道某些数据属于哪一层。与MVC 的一个小的（且不完整的！）类比在这里可能会有所帮助：
- 模型通常是领域实体，
- 控制器是域转换和应用层，
- 视图是驱动适配器。
这些概念在细节上不同但非常相似，这个类比可以用来定义领域和应用程序代码。
点击标题，源代码