前端架构设计

369 阅读2分钟

前言

架构设计分2块,一个组件的架构设计,一个是组件内的架构设计。 组件架构设计完后,开发主要的精力全部都在开发组件业务层的代码。 所以做好组件内代码的设计非常重要。

背景

发现目前项目其实没有明确的架构规定,或者说开发中就没有明确的架构,基于大家各自之前的理解,MVC、MVVM、(MVP发现用的比较少)甚至又无脑引入RXSwift。 简单说:

  1. 无架构,使用传统的MVC,导致类代码冗杂在一起,5、 6000行代码等...
  2. 引入函数式编程框架RXSwift,导致项目大量使用,上手成本与定位数据源头比较困难~

架构

其实MVC一定是最简单,团队最容易上手的,对MVC的缺点进行改良升级即可。

针对复杂页面,Controller臃肿的问题,拆分为更独立的ViewModel模块。 ViewModel相当于一个小型的Controller,也相当于细粒度封装的独立组件,可以直接对各个使用方提供服务。可以直接可以继承UIView,或者里面包含UIView。

架构:

Untitled Diagram.drawio (4).png

代码:

截屏2022-03-08 下午10.01.02.png

整体上的架构(ViewModel的作用):

Untitled Diagram.drawio (5).png

对于复杂的界面,需要使用ViewModel,如果页面比较简单,直接使用ViewController作为这个桥梁即可。毕竟DataController返回的已经是处理过的View可以直接使用的model。View也是组装好的View。这个判断标准,可以也可以简单考虑,如果ViewController代码小于200行,就不需要拆分ViewModel。

Model

拆分

如果数据model需要通用,很多地方都使用。可以再拆分出viewState集成model,ViewState包含额外的界面相关的元素,比如cell的高度等界面属性(缓存使用)~

初始化

直接使用dictionary来初始化Model,以便复用。