江苏龙网

  1. 主页 > 生活百科 > >

前端整洁架构，你了解多少？( 三 )

架构


如果你觉得自己在“微调”代码以便其调用搜索 API，那么可能存在问题 。最好在问题扩散之前编写适配器 。
设计商店应用谈完了理论，接下来就可以开始实践了 。下面来设计一个饼干商店的架构 。
商店会出手不同类型的饼干，可能包含不同的成分，用户将选择饼干并进行订购，并通过第三方支付服务支付订单费用 。
我们将在主页上展示可以购买的饼干 。只有通过身份验证，才能购买饼干 。点击登录按钮就会进入登录页面 。

前端整洁架构，你了解多少？

文章插图
商店主页登录成功之后，就可以在购物车中添加一些饼干了 。
前端整洁架构，你了解多少？

文章插图
【前端整洁架构，你了解多少？】装有选定饼干的购物车当我们将饼干放入购物车后，就可以下订单了 。付款后，会在列表中看到一个新的订单以及一个已清空的购物车 。
这里我们将实现结账用例 。
在实现购物车和结算功能之前，我们需要确定在整体上将拥有哪些实体、用例和功能，并决定它们应该属于哪个层次结构 。
设计领域在应用中，最重要的是领域 。领域是应用的主要实体及其数据转换所在的地方 。建议从领域开始，以便在代码中准确表示应用的领域知识 。
商店的领域可以包括以下内容：
  • 每个实体的数据类型：用户（user）、饼干（cookie）、购物车（cart）和订单（order）；
  • 用于创建每个实体的工厂或类（如果使用面向对象编程）；
  • 该数据的转换函数 。
领域中的转换函数应仅依赖于领域规则，不涉及其他内容 。例如，这样的函数可能包括：
  • 计算总费用的函数；
  • 检测用户口味偏好的函数；
  • 确定物品是否在购物车中的函数等 。

前端整洁架构，你了解多少？

文章插图
领域实体图
设计应用层应用程序层包含了用例 。一个用例通常包括一个参与者、一个动作和一个结果 。
在商店中，可以区分以下用例：
  • 产品购买场景；
  • 支付，包括与第三方支付系统的交互 。
  • 与产品和订单的交互：更新、浏览等 。
  • 根据角色访问不同页面 。
用例通常根据主题领域进行描述 。例如，“结帐”场景实际上包含几个步骤：
  • 从购物车中获取商品并创建新订单 。
  • 支付订单 。
  • 如果支付失败，通知用户 。
  • 清空购物车并显示订单信息 。
用例函数将是描述这个场景的代码 。此外，在应用层中还存在端口——与外部进行通信的接口 。这些端口可以用于与数据库、第三方服务、UI 界面等进行交互 。
前端整洁架构，你了解多少？

文章插图
用例和端口图
设计适配层在适配器层中声明与外部服务的适配器 。适配器用于将第三方服务的不兼容API与我们的系统兼容 。
在前端，适配器通常是 UI 框架和 API 服务器请求模块 。在这个案例中，将使用以下内容：
  • UI框架 。
  • API请求模块 。
  • 本地存储适配器 。
  • 将API响应适配到应用层的适配器和转换器 。

前端整洁架构，你了解多少？

文章插图
适配器图，按照驱动和被驱动适配器拆分注意，“类似服务”的功能越多，离图表中心越远 。
使用 MVC 类比有时候很难确定某些数据属于哪一层 。以下是一个简单的MVC类比：
  • 模型（Models）通常是领域实体 。
  • 控制器（Controllers）是领域转换和应用层 。
  • 视图（View）是驱动适配器 。
虽然细节上这些概念是不同的，但它们非常相似，这种类比可以用来定义领域和应用代码 。


推荐阅读


上一篇：Seata Stellar：无缝整合不同框架的分布式事务解决方案

下一篇：RabbitMQ与Spring集成：构建强大的企业级应用