如何结合整洁架构和MVP模式提升前端开发体验 - 整体架构篇

本文不详细介绍什么是整洁架构以及 MVP 模式，自行查看文章结尾相关链接文章。

整洁架构粗略介绍

下图为整洁架构最原始的结构图：

1. Entities/Models：实体层，官方说法就是封装了企业里最通用的一部分逻辑，也可以叫 Models, 可能是只包含数据字段的对象，也可能包含方法，具有一部分业务逻辑。更加深入就是领域驱动（DDD）开发相关的内容。
2. Use Case/Service：包含核心业务逻辑。
3. Interface Adapter：适配层/胶水层，负责内圈的 entity 和 use case 同外圈的 external interfaces 之间的数据转化。需要把外层服务的数据转化成内层 entity 和 usecase 可以消费的数据，反之亦然。
4. External Interfaces：依赖的外部服务，第三方框架，以及需要糊的页面 UI 都归属在这一层，这一层完全不感知内圈的任何逻辑，所以无论这一层怎么变( 组件库由 Element UI 改为 Ant Design Vue ，数据库由 MySQL 改为 PostgreSQL )，都不应该影响到内圈。

这不就是后端的 mvc 吗?

好处

1. 更好的做单元测试：业务逻辑可以在没有 UI、数据库、Web 服务器或任何其他外部基础设施的情况下被测试。
2. 减少对UI框架的依赖：跨端开发，业务逻辑层可以直接复用，只需要做 UI 层的适配。
3. 基础设施无关性：内层业务逻辑不需要关心数据来自哪里，提交到哪里，比如 LocalStroage、IndexedDB、Web SQL、JSbridge、HTTP、WebSocket。

转化为适用于前端工程的结构

Service，Model 都为纯 JS 类/对象，与框架无关。

基础服务虚线表示并不是直接调用相应的 API，而是封装在工具库或者函数中。

如何真正的落地？

presenter/controller 创建 model，service 实例，并且将 model 注入 service 中。service 中使用 model 做业务逻辑计算。同时 presenter/controller 内调用 service 方法处理 view 事件，同时将 model 返回到 view 层中做数据绑定

问题：model 是纯 JS 对象，如何让 model 数据变更的时候触发 view 的更新？

mobx，@formily/reactive 将 model 变成响应式的；造轮子 - 发布订阅模式

如何在实际项目中落地

使用 vue composition api 或者 react hooks 构建 model，所以 model 就是一个自定义 hooks。

presenter/controller 也是一个自定义 hooks，内部可以调用我们自己定义的 hooks，以及第三方开源的 hooks 库，比如 ahooks，vueuse

因为 model 是一个自定义 hooks ，当内部的 state 更新的时候，就会促发视图 view 的更新。

参考文章

前端架构 101（六）：整洁（Clean Architecture）架构是归宿 - 知乎 (zhihu.com)

Clean Frontend Architecture：整洁前端架构 | clean-frontend (phodal.github.io)

干货 | 携程机票 React Native 整洁架构实践 (qq.com)

干货 | Trip.com 机票React Native整洁架构2.0实践 - 腾讯云开发者社区-腾讯云 (tencent.com)

Moving away from ReactJs and VueJs on front-end using Clean Architecture - DEV Community ‍‍