aform的诞生已经有些年头了,当时起源于团队有时会承载一些表单的开发,比如一些数据列表录入界面,一些开关的配置,另外还有一些场合需要动态表单,发现当时市面上表单引擎非常少,一些工作流系统自带表单引擎,但功能有限,相反,表单的皮肤库、控件库、校验库倒是很多,但在表单开发模式上并没有一套比较简便和完整的框架。
因此我打算自己做1个表单引擎,作为一个懒人,我首先想到的就是不用再写html了,只要有一份json数据,我自动生成表单,比如发现是字符串,我生成text field,数字生成number控件,对象生成fieldset,数组生成table,而且是需要支持嵌套;
另外一点就是表单的取数,当时大部分表单取数还是需要自己编写代码的,比如要取checkbox的选中态,你需要自己去遍历被勾选的checkbox,jquery尽管提供了一个serializeForm的方法,然而它不支持层级的嵌套以及组件的封装,所有的input会打平成一个kv对象,这仅适合非常简单的场景,我希望这个表单框架能实现用什么结构来渲染,那么也可以自动取到其表单数据,且结构也和渲染时数据保持一致。
因此,aform的最初版本就是这样1个东西,即根据json生成表单,再调用取数方法获取一致的json结构,如图所示:
可别小看这么一个小功能,单就表单嵌套和数组自动生成这一块已经超越大部分专业的工作流系统使用的表单引擎了,而且它没依赖任何库,且支持各种ie浏览器。
但是对于真正商业使用的表单来说,仅支持表单生成和取数这块的自动化是远远不够的,aform在后续的发展过程中,逐渐支持了根据schema生成表单、基于model的校验、自定义输入控件、自定义指令、数据适配、数据监听等各种机制,那么接下来,就对aform做一个完整的介绍。
aform对表单生命周期的涵盖
尽管表单通常是一次性的渲染,但也可以从成千上万的表单中抽出一些公共逻辑,这就是表单的生命周期,通常涵盖渲染前的一些数据获取、渲染中、用户交互(通常是数据录入,会有一些表单联动和校验的逻辑),最后是表单的提交(即数据的获取)
渲染一个aform及获取表单数据
正如前文所述,aform会根据数据生成符合语义化的标签,比如object生成fieldset、数组生成table,基本字段生成一个行容器及label+input组合。
aform有一套自己的schema描述表单结构,和jsonschema类似,但又有很多差异最大的差别是对type
的意义不同,aform认为type是html的input的ty