如何设计一个表单引擎？

烟影红痕

表单的实质是业务，没有表单是无奈实现业务零碎的，而静态表单使业务零碎更初级。静态表单是甚么呢？它是如何任务的？运用场景有哪些？一同来看一下吧。

表单在网页中次要担任数据收集功用，是提交数据的所有方式。表单的实质是提交数据，不单单包孕输出框、下拉选择框等这些控件，常见的按钮空间也属于一个表单。
1. 静态表单
静态表单（Dynamic Form），指在前端运转过程当中可依赖某些业务逻辑产生表单项变动的表单，还包罗表单规划、表复数据办理、表单校验、表单交互、表单项联动逻辑等本来由前端编程实现的表单开发，转由后端经过 API 接口输入表单形容自动实现上述一切内容的表单开发方式。

（静态表单原理示用意）
2. 静态表单的特征劣势
表单的实质是业务，而静态表单使业务零碎更初级。
普通表单是一个表单写一份前真个代码，代码整个由前端开发者实现（后端配合接口输入）。而静态表单则是一个表单对应一个 JSON（由后端输入），一切表单由一份代码（静态表单引擎）进行加载和渲染。
所以，静态表单拥有下列劣势：
客户端运转的代码量更少；每个表单的JSON按需加载；表单需要变动时，无需前端修正发版，只需编纂数据库中的JSON。表单控件是提供一组允许用户操作的对象，从而接纳用户输出的数据，用户可操作该对象来履行对表单设计，修正等操作。
1. HTML表单种常见的13个控件
input元素无疑是一个宏大和繁杂的元素，但它并非独一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件。

2. 静态表单控件
静态表单是老厂商天翎中心技术之一，也是天翎公司中心产品MyApps的首要组成部份。经过关于静态表单的运用，能够防止在电子流程零碎中硬编码的数据收集及处置表单，进步零碎的可保护性。

阐明：
Form，静态表单完成的根本入口，形容了DynaForm的最根本属性，好比称号、ID、以及最中心的TemplateContext。TemplateContext中保留的是Form的形容XML，经过此XML形容两类信息：
Form中所拥有的Field以及Field的类型、称号、长度、计算代码等等，XML；Form的格局，好比摆列次第、表格定列化的过程中，零碎自动解析XML的内容并将其转换为Java Object并由此具备Object的行动特性；位等。Form作为一个ValueObject存储在数据库中。FormElement，接口，表现Form中的根本元素；
FormField，静态表单的最根本元素，在myApps/OBPM中被声明为Abstract，详细Object行动依赖于详细的SubClass完成；
TextField，单行文本框，承继FormField；
SelectField，下拉选择框，承继FormField；
TextareaField，多行文本框，承继FormField；
CheckBoxField，复选框，承继FormField；
RadioBoxField，单选框，承继FormField；
Textpart，动态文本段，除各种Field之外的动态文本部份，承继FormElement；
ComponentField，自定义组件，承继FormField；
AttachmentUploadField，附件上传组件，承继FormField；
ImageUploadField，图片上传组件，承继FormField；
ViewDialogField，视图组件，用于完成主从构造的表单，承继FormField；
CalctextField，计算文本组件，用于完成需求计算的文本，承继FormField；
IncludeField，完成SubForm的包孕，承继FormField；
WordField，Word组件，承继FormField；
OcrField，为未来预留的接口，零碎暂未完成；
三、表单引擎
表单引擎是为疾速实行名目研发的轻量级表单设计工具。采取表单引擎工具可在不开发和新减少代码的状况下设计出新表单款式，同比顺序开发可省掉顺序员差未几70%的开发任务量，而且前期保护相对于简略，办理便利。
1. 任务原理
在理解了表单的根本机构后，进一步看看表单引擎是如何任务的。
从客户端（Client）输出数据（Document），好比一个excel文件，表单（Form）结合excel文件自动生成HTML，如下图：

（表单结合文档生成HTML进程）

（XML解析为表单对象的进程）

（表单转为HTML进程）

（表单生成数据库）
2. 运用场景
天翎Myapps低代码开发平台的表单引擎是基于Web界面上可视化编纂的表单设计零碎，同时反对印刷模式和拖拽模式两种设计形式，形象可见，操作便利。印刷模式能够做一些繁杂的表单配置，同时还反对word表格的导入；拖拽模式：基于Vue的表单设计器，采取可视化迁延拽的模式进行表单的设计。

（表单前台）

（表单后盾）
本文由 @周志军Jarod 原创公布于人人都是产品经理，未经作者许可，阻止转载。
题图来自Unsplash，基于CC0协定
该文观念仅代表作者自己，人人都是产品经理平台仅提供信息存储空间办事。

华人澳洲中文论坛

热图推荐

如何设计一个表单引擎？

发表回复

烟影红痕
关注TA

图文推荐

华人澳洲中文论坛

热图推荐

如何设计一个表单引擎？

发表回复

烟影红痕 关注TA

图文推荐

烟影红痕
关注TA