好处

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 ?‍??‍?