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

2,318 阅读3分钟

如果你无法接受 TypeScript,不建议继续阅读此系列文章

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

整洁架构粗略介绍

下图为整洁架构最原始的结构图: image.png

  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。

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

image.png

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 变成响应式的;造轮子 - 发布订阅模式

如何在实际项目中落地

image.png

使用 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 👩‍💻👨‍💻