美文网首页
项目页面创建优化过程

项目页面创建优化过程

作者: 小豆子__ | 来源:发表于2019-03-28 14:09 被阅读0次

项目页面创建优化过程

180320

1.0版本

我们的项目在最早的版本1.0时候,页面比较简单,当时工期紧张,急着上线,

180320001

创建页面

所有需要显示的数据均为后台返回的数组集合,最初的时候,界面样式来回变动,我们采用了最简单的方式,循环显示数组,用UILable创建标题,用UITextField创建填写框,其他特殊的全部单独处理。这样页面代码很多,也较为顺利的做出第一个版本。

数据处理

这个阶段后台数据还没有全部固定成型,我们直接解析返回的JSON,转换为字典并直接取值,这种方式很容易出现返回错误,但是上线后后台更容易修复问题。

数据校验

初期版本较为原始,采用的是循环创建数组,对比对应的控件取值进行非空判断,由于前期字段并不是特别多,处理好每一个控件也能基本完成需求。

表单提交

再次循环创建数组,遍历控件将控件值拼接成字典转换为JSON传给后台。

1.0版本的时候,所有的方法都用的很基础。当版本出来后有了使用者,这个时候就开始迭代更新,在进行了四次版本迭代后,基本的数据样式得到了固定,这个时候准备2.0版本的开发。

2.0版本

180320002

在2.0版本的时候,新的界面样式风格较为统一,且数据返回已经固定格式,所以我们在开发的时候进行了一些优化。

创建页面

此时数据样式已经基本统一,我们拆分存在差异的样式,将不同样式的单行进行封装,只需要传入创建Model,选择对应的样式,就可以直接返回单行View。这个时候用Masonry做整个表单的自动布局,虽然字段更多,但显示已经没有问题。

数据处理

这个阶段返回数据格式已经基本固定,将展示数组内字典转为Model,返回的其他内容均转换为Model。

数据校验

这个时候由于提交格式已经固定,先创建提交字典,在对提交字典进行校验。省去一次拼接过程。

表单提交

创建提交字典,先把所有的key添加进去,在循环创建数组添加Value,经过校验后转换为Model提交。

2.0版本主要优化的页面创建,数据的交互,后面重心均放在版本迭代,小功能的增加中。

3.0版本

180320003

当2.0版本更新了52个版本后,迎来了3.0版本。3.0版本新增了多个表单流程,这个时候整个页面的数据格式,样式已经完全固定下来,可以开始模块化开发了。

180320004

创建页面

到3.0版本的时候,所有表单样式已经完全固定,数据格式也已经固定下来,这个时候,将页面拆分为四个模块。

  1. 个人信息模块,所有的个人信息均在这一个模块内显示,模块可以自行校验数据,区别显示与不显示内容,内部自动布局。
  2. 表单内容模块,将数据Model跟当前单行View封装在一起,当前Model所有内容均在当前模块内完成。
  3. 自定义模块,只需要传入创建Model,取出结果Model,其他的都是模块处理。
  4. 按钮模块,只需要传入当前表单状态,自动创建对应的表单按钮并进行自动布局。

这个时候创建表单变得简单起来。

数据处理

这个时候直接将数据拆分为对应的模块数据。表单内容直接创建模型,包含数据Model,视图View等信息。预留校验数组。

数据校验

拿到提交Model,循环校验数组校验Model值,做到最小数据量校验。

表单提交

创建提交Model,创建的时候进行赋值,进行校验后转Json提交。

相关文章

  • 项目页面创建优化过程

    项目页面创建优化过程 1.0版本 我们的项目在最早的版本1.0时候,页面比较简单,当时工期紧张,急着上线, 创建页...

  • MocOs:Django(模板优化)

    下载Bootstrap3 使用Bootstrap3优化页面 1.下载完成以后解压 2.在项目目录下创建static...

  • webpack4优化

    下面是我对一个庞大的多页面项目优化的总结,有些评论仅代表我在优化过程遇到的。优化方法、用法我都列举了,望君自行斟酌...

  • 项目优化过程

    前段时间从其他团队接过来一个级别很高的项目,就把代码给到手里,相关的其它资料为0,其它调用端还催着超时问题,问题一...

  • Beego Login

    使用bee new命令创建新项目,项目名称为gmms。 登录页面 创建登录路由 创建登录控制器与登录页面访问函数 ...

  • Java入门系列14 -- 用户登录案例实现

    案例用户登录 创建项目LoginProject; 项目的整体思路如下:数据库创建用户表;前台页面:包括登录页面,首...

  • express+vue3项目

    创建vue项目 1.创建项目 启动项目 可以访问项目了。目前这个项目自由一个页面app.vue这个页面是引入了he...

  • tinyHeart

    一、项目描述使用画布canvas绘制二、项目过程1、准备工作html布局,创建画布,页面加载初始化,绘制背景bac...

  • 零基础安卓开发起步(三)

    本文是学习过程记录,包含页面跳转功能的实现,以及项目结构的初步理解。 创建新的Activity 我们假设有两个页面...

  • 项目优化

    一,本文分为两部分1.普通项目优化2.vue项目优化防止XSS与XSRF(安全性)二,普通项目优化:1.页面加载阶...

网友评论

      本文标题:项目页面创建优化过程

      本文链接:https://www.haomeiwen.com/subject/wtuqbqtx.html