如果你无法接受 TypeScript，不建议继续阅读此系列文章
本文不详细介绍什么是整洁架构以及 MVP 模式，自行查看文章结尾相关链接文章。
整洁架构粗略介绍
下图为整洁架构最原始的结构图：
- Entities/Models：实体层，官方说法就是封装了企业里最通用的一部分逻辑，也可以叫 Models, 可能是只包含数据字段的对象，也可能包含方法，具有一部分业务逻辑。更加深入就是领域驱动（DDD）开发相关的内容。
- Use Case/Service：包含核心业务逻辑。
- Interface Adapter：适配层/胶水层，负责内圈的 entity 和 use case 同外圈的 external interfaces 之间的数据转化。需要把外层服务的数据转化成内层 entity 和 usecase 可以消费的数据，反之亦然。
- External Interfaces：依赖的外部服务，第三方框架，以及需要糊的页面 UI 都归属在这一层，这一层完全不感知内圈的任何逻辑，所以无论这一层怎么变( 组件库由 Element UI 改为 Ant Design Vue ，数据库由 MySQL 改为 PostgreSQL )，都不应该影响到内圈。
这不就是后端的 mvc 吗?
好处
- 更好的做单元测试：业务逻辑可以在没有 UI、数据库、Web 服务器或任何其他外部基础设施的情况下被测试。
- 减少对UI框架的依赖：跨端开发，业务逻辑层可以直接复用，只需要做 UI 层的适配。
- 基础设施无关性：内层业务逻辑不需要关心数据来自哪里，提交到哪里，比如 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 👩💻👨💻
相关文章
