共计 1478 个字符，预计需要花费 4 分钟才能阅读完成。
如果你无奈承受 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 👩💻👨💻
