表单（form）是用户填写（输入）信息的重要交互UI元素，所有需要收集信息的页面均会使用到表单。
表单在桌面应用、app、web应用、小程序等均被广泛应用，各个平台上开发表单相关的功能在实现上也会有些不同，而对于表单的配置、联动也是很多开发者需要面临并尝试解决的难题。
在微保小程序的年金产品投保模块，也涉及到表单的相关处理，有些自己理解，抛出来大家一起讨论。
preview状态截图
笔者认为要解决表单模块的配置化、表单联动需要解决下列问题
- 表单描述
- 联动机制
- 表单更新
- 数据维护
围绕上述4个问题，笔者将会介绍在小程序环境下如何实现投保模块表单的配置、更新、数据维护、联动。
表单数据与视图
整个表单的配置化与显示是数据到视图的映射，因此数据、模板是表单的重要组成部分
表单组成
表单对应的配置数据笔者使用
json格式，在对表单进行配置之前，将表单模块进行分层。表单可以拆解到表单项，进而再进一步拆解到控件，先一起看看下图的拆解。
表单项
从图中可以看出，一个完整的表单模块可能是有N(N >= 1)个表单项，很多复杂的表单模块甚至有多层嵌套；同时，每个表单项有自己清晰的标题用以说明此项的业务含义、有明确的表单项状态（编辑态、预览态、隐藏或显示）、有自封闭的控件完成用户相关的信息输入。
进一步抽象出相应的配置如下
表单数据抽象结构
对上述的脑图进行一些说明
- 配置参数&业务数据，一份是自身转换为视图的配置数据，通常会由外部设置；一份是业务数据，初始化时由外部传入，后续表单项自己根据自身控件的变化或其他表单项的控件变化触发，修改相应的数据。
-
控件参数，外部传入配置数据时，将表单项的控件数据抽象为
json对象的格式，这样做有个很大的好处就是从表单项层面，是可以完全统一的，不用具体关注表单项内部的控件具体是张三还是李四。 - 触发器，后续为实现表单联动设计的属性，是个字符串数组，值为配置参数的name子集。
-
行为，同样为表单联动设计新增的属性，实际是一段
js脚本，设计为监听到触发条件达到时动态执行，脚本的目标是完成联动时对自身的更新。
鉴于整个实现比较复杂，在下一篇文章会对小程序环境下具体的实现方案做介绍，敬请持续关注。
网友评论