使用json配置文件自动生成网页表单控件页面，让面向业务的开发开归本质。腾讯云开发者社区

在现代语言的开发中，大量要做的其实仅仅是一些配置信息，然后由各种框架、类库帮我们解决大部分有逻辑可行的部分。对网页开发来说，笔者也一路想实现一种效果，只需配置就可以完成网页表单的自动创建。攻夫不付有心人，终于找齐了这一愿景所需的轮子库，现在基本实现自己所要的效果。

在1999年的远古时代里，Excel已经支持数据绑定的方式，用外部的xml文件来控制Excel单元格的内容规范或ListObject的列表数据列规范。其中用到的是Xpath属性和Xml Schema Description(XSD)。

如下图中的Xpath文档描述

更多Excel的Xml数据操作和绑定的知识介绍可以参看ExcelHome很久之前翻译的著作【Excel2007 VBA参考大全】，有专门一个章节介绍。

在XSD文件中，可以定义许多约束关系，如字段类型属于文本还是数字，字段的文本长度，数字大小范围，是否必需项，默认值是什么等等，微软OFFICE中，曾经有一个组件infoPath，就是干这件事，通过界面的方式来配置出相应的XSD规范文件。让表单的填写最终可以对产生的数据质量可控。

作为数据交换技术，现有xml和json两大阵营，而多数现代Web Api已经转到Json的阵营，所以当下有大量的Json使用场景，其中数据映射也出现了专门的Json Schema Description对标以前的XSD。

而本篇所提及的使用Json配置来完成窗体表单的设计，准确来说，是使用Json Schema文件来完成。

同样地关于Json Schema的更多了解，可访问此网址，有介绍到对其实现的许多语言和工具：

而对于WebUI创建环节，有好几个相应的JavaScript类库，笔者有限的能力下，对其中JSON Form这一个类库有了更深入的了解和学习，本篇下面也是着重讲此类库的实现，有兴趣的朋友也可以对其他几项进行了解和学习，可能可以得到更好的解决方案。

先上效果图，下方红圈部分，为笔者打算在网页图表中，所开放出来的部分属性修改，使用上述提到的JSON Form库，直接通过写Json Schema后，直接渲染出来的，没有作相应的html和css代码编写（需要对后期效果美化，会用到css再精细化布局一下，例如下图中，默认单行一列显示，现处理成单行多列显示）。

除了上述展示的，使用纯配置的方式，仅需使用Json Schema文件，即可完成了整个网页表单的自动生成外，还有其他几点的优势，这里简单罗列下。

如上图中说到，每个网页表单控件中，根据我们定义的字段类型和其他规范要求，相应地在网页控件渲染出来后，这些约束已经在生效了，例如是枚举字段时，会渲染出一个下拉选择框，用户不能输入选择项以外的内容。

类似还有哪个字段是必填、数字字段类型它的范围是多少，限定其输入范围在最大最小值内等等。这些都不需要我们再进行其他的脚本编写。

以下图中，点击提交后，整个表单将以一个json对象数据的方式返回，不用再一个个表单控件去查找用户输入的值。

因其使用json作为数据交互的媒介，所以初始值和返回值都是一个json数组。只需在其配置中对初始值进行配置即可。

其初始值甚至可以是数组，用户界面相应地出现多条记录。

我们首先手头上有一个初始化时的json对象，而用户界面交互操作后得到了一个新的json对象（注意非必填项为空时，新对象会没有这个节点数据），如何快速将新的json对象合并到原来的初始化对象呢？

例如笔者在开发Vega图表时，本身就有一个初始化的json属性供Vega库来调用配置相关的属性，用户交互更新了这些属性，如何快速将其映射到原来的json对象中，让代码读取原结构即可实现更新效果。

当有规律的东西，请多多想想轮子，或许世界某个角落已经有人专门为我们实现了相应的功能，我们只需拿来主义就可以用上避免自己烧脑再想解决方案。

此轮子就是lodash，只需一个方法merge，即可完成我们需要效果。

作为一名合格的开发者，总需要找寻一些现成的工具来完成一些规律化的重复操作，例如生成这个json Schema文件，如果可以直接给一个json对象，就可以生成此json schema，岂不是美事么？

方向对了，就差寻找的过程，最终笔者为大家找到了一款VSCode插件 JSON Utils，可以一键生成json schema雏形。一条命令即可完成。

因JSON Form库使用的不是完全标准规范的Json Schema，特别是对数组结构的json Schema节点，所以上述生成的json Schema文件，可能还需要作一些小幅修改，具体细节自行去翻阅官方文档。

本文提及的几个库，请务必使用官方文档的方式来学习，任何其他零碎的文章分享方式学习，只会让自己更沮丧，这也是笔者自己亲身经历的感受，没有谁比作者更懂他自己所造的轮子的使用，更多细节只能在官方文档里找寻得到。