本文不详细介绍什么是整洁架构以及 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 ‍‍

如何结合整洁架构和MVP模式提升前端开发体验 - 整体架构篇的更多相关文章

  1. 如何结合整洁架构和MVP模式提升前端开发体验(二) - 代码实现篇

    上一篇文章介绍了整体架构,接下来说说怎么按照上图的分层结构实现下面的增删改查的功能. 代码结构 vue userManage └── List ├── api.ts ├── EditModal │ ├ ...

  2. 如何结合整洁架构和MVP模式提升前端开发体验(三) - 项目工程化配置、规范篇

    工程化配置 还是开发体验的问题,跟开发体验有关的项目配置无非就是使用 eslint.prettier.stylelint 统一代码风格. formatting and lint eslint.pret ...

  3. MVP模式在Android开发中的应用

    一.MVP介绍      随着UI创建技术的功能日益增强,UI层也履行着越来越多的职责.为了更好地细分视图(View)与模型(Model)的功能,让View专注于处理数据的可视化以及与用户的交互.同一 ...

  4. [译]Google官方关于Android架构中MVP模式的示例

    概述 该示例(TODO-MVP)是后续各种示例演变的基础,它主要演示了在不带架构性框架的情况下实现M-V-P模式.其采用手动依赖注入的方式来提供本地数据源和远程数据源仓库.异步任务通过回调处理. 注意 ...

  5. 扯一扯前端css的整体架构设计:(2)base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  6. 【项目总结】扯一扯电商网站前端css的整体架构设计(1)

    最近半忙不忙的写了一个外包网站,网站主要功能是艺术品竞拍和艺术衍生品的销售.工程已经完成了80%左右,现在前后端代码量已经50W行左右,我主要负责的是前端设计和前端布局.下面就先放一个网站的设计图吧, ...

  7. Google官方关于Android架构中MVP模式的示例续-DataBinding

    基于前面的TODO示例,使用Data Binding库来显示数据并绑定UI元素的响应动作. 这个示例并未严格遵循 Model-View-ViewModel 或 Model-View-Presenter ...

  8. 使用命令行工具提升cocos2d-x开发效率 之CocosBuilder篇

    http://www.cnblogs.com/flyFreeZn/p/3617983.html 假设你正在使用CocosBuilder或者是其它基于CocosBuilder源代码改装而成的工具为你的游 ...

  9. 通过Swagger文档生成前端service文件,提升前端开发效率

    在企业级的项目开发过程中,一般会采用前后端分离的开发方式,前后端通过api接口进行通信,所以接口文档就显得十分的重要. 目前大多数的公司都会引入Swagger来自动生成文档,大大提高了前后端分离开发的 ...

随机推荐

  1. 网络协议之:memcached binary protocol详解

    目录 简介 memcached的协议包 memcached命令举例 总结 简介 前面讲到了memcached的文本协议,虽然文本协议看起来非常简单,但是对于客户端来说一般还是会选择效率更高的二进制协议 ...

  2. 从 CPU 讲起,深入理解 Java 内存模型!

    Java 内存模型,许多人会错误地理解成 JVM 的内存模型.但实际上,这两者是完全不同的东西.Java 内存模型定义了 Java 语言如何与内存进行交互,具体地说是 Java 语言运行时的变量,如何 ...

  3. RPA应用场景-海关报关

    场景概述海关报关 所涉系统名称海关页面,业务核心系统 人工操作(时间/次) 10 分钟 所涉人工数量 3 操作频率实时 场景流程 1.每日接收报关申请邮件: 2.根据邮件信息进入业务核心系统查询相关数 ...

  4. MYSQL的事务和索引

    事务 什么是事务 事务就是将一组SQL语句放在同一批次内去执行 如果一个SQL语句出错,则该批次内的所有SQL都将被取消执行 MySQL事务处理只支持InnoDB和BDB数据表类型 事务的ACID原则 ...

  5. StarGAN论文及代码理解

    StarGAN的引入是为了解决多领域间的转换问题的,之前的CycleGAN等只能解决两个领域之间的转换,那么对于含有C个领域转换而言,需要学习C*(C-1)个模型,但StarGAN仅需要学习一个,而且 ...

  6. CSS进阶内容——布局技巧和细节修饰

    CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...

  7. Hbase学习(三)过滤器 java API

    Hbase学习(三)过滤器 HBase 的基本 API,包括增.删.改.查等. 增.删都是相对简单的操作,与传统的 RDBMS 相比,这里的查询操作略显苍白,只能根据特性的行键进行查询(Get)或者根 ...

  8. idea引入fastjson的jar包:ClassNotFound

    idea 手动添加fastjson的jar包时,既在项目依赖里添加了,又在WEB-INF下的lib库里添加了 但是启动后就是加载不到,报错:ClassNotFound 尝试了好久,也参考了网上的许多建 ...

  9. Java-类与对象-多态

    Java类与对象-多态 多态:类与对象三大特征之一 什么是多态? 同类型的对象,执行同一个行为,会表现出不同的行为特征. 多态的形式 1.父类类型 对象名称 = new 子类构造器(); 2.接口 对 ...

  10. SpringCloud微服务实战——搭建企业级开发框架(四十四):【微服务监控告警实现方式一】使用Actuator + Spring Boot Admin实现简单的微服务监控告警系统

      业务系统正常运行的稳定性十分重要,作为SpringBoot的四大核心之一,Actuator让你时刻探知SpringBoot服务运行状态信息,是保障系统正常运行必不可少的组件.   spring-b ...