网页文件 语雀社区「WPSJS项插件开发技术交流」可加入团队成员

在现代语言的开发中，很多需要做的其实只是一些配置信息，然后各种框架和类库帮我们解决了大部分逻辑上可行的部分。

对于web开发，笔者也想一路实现一个效果，只需配置即可完成web表单的自动创建。 功夫不负有心人，终于找到了这个愿景需要的轮子库，现在基本达到了我想要的效果。

阅读体验和社区 WPSJS系列文章在语雀文档上有更好的阅读体验（历史文章+全文搜索+附件下载）。

关于WPSJS的技术讨论，作者建立了一个非官方的讨论社区，欢迎加入，

QQ群：

语雀社区《WPSJS插件插件开发技术交流》

加入团队成员一起创建内容：

#

1、很久以前，Excel其实也提供了类似的技术

上古1999年，Excel就已经支持数据绑定，使用外部xml文件来控制Excel单元格的内容规范或列表数据列的规范。 其中使用了 XPath 属性和 Xml (XSD)。

下图中的XPath文档说明

关于Excel的Xml数据操作和绑定的更多知识可以参考很久以前翻译的书【VBA参考百科全书】，里面有专门的章节。

在XSD文件中，可以定义很多约束条件，比如字段类型是文本还是数字，字段的文本长度，数字的大小范围，是否必填，默认值是多少等。在微软，曾经有一个组件就是做这件事的，通过接口配置对应的XSD规范文件。 让表单的填写最终控制生成数据的质量。

2、Json在互联网时代取代了Xml的历史地位

作为一种数据交换技术，目前有两个阵营，xml和json，而现代的Web API大多已经转向了Json阵营，所以目前有大量的Json使用场景，数据映射也有专门的Json来以前的 XSD。

本文提到的使用Json配置来完成表单设计，准确的说是使用Json文件来完成。

另外，要了解更多关于 Json 的知识，可以访问这个网址，其中介绍了多种语言和实现它的工具：

至于WebUI的创建过程，有几个对应的类库。 笔者能力有限，对JSON Form类库有了更深入的了解和学习。 本文的以下部分也将重点介绍此类库的实现。 有兴趣的朋友也可以了解和了解一下其他几项，或许能得到更好的解决办法。

三、利用Json自动生成网页表单页面的原理

先上效果图，下图红圈部分是笔者打算在网页图表中开启的属性修改部分。 使用上面提到的JSON Form库，直接写Json渲染，不用写相应的html和css代码（需要美化后期效果，再用css细化布局，比如下图，默认单行一列显示现在处理成单行多列显示）。

学习这个库是有一定的成本的，更多的细节需要你自己去了解。 这篇非详解教学文章，只是率先向大家展示了这种可能性。 如下图所示，其官方详细的示例演示和文档说明，仔细查看可以掌握到足够的程度。

详细文档地址：

4.使用Json配置生成web form表单的开发优势

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

1.字段约束根据配置文件定义自动生效

如上图所示，在每个Web表单控件中，根据我们定义的字段类型和其他规范要求，在Web控件渲染后，这些约束已经生效。 比如在枚举字段时，会呈现一个下拉选择框，用户不能输入选中项以外的内容。

类似于必填哪个字段，数值字段类型的范围是多少，输入范围限制为最大值和最小值等，这些都不需要我们额外编写脚本。

2.用户在form表单中填写的数据，可以轻松采集到位

下图中，点击提交后，整个表单会以json对象数据的形式返回，不需要一个一个去查找用户输入的值。

3.表单初始化可以一次性赋初值

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

它的初始值甚至可以是一个数组，多条记录将相应地出现在用户界面中。

4.将返回的json对象与源对象合并

我们手头先有一个初始的json对象，通过用户界面交互得到一个新的json对象（注意当非必填项为空时，新的对象不会有这个节点数据），如何快速转换新的json to 将对象合并到原来的初始化对象中怎么办？

比如笔者在开发Vega图表时，有一个初始化的json属性供Vega库调用配置相关的属性。 用户交互更新这些属性后，如何快速将它们映射到原来的json对象，让代码读取原来的结构，从而达到更新的效果。

当有规则的东西时，请考虑轮子。 也许在世界的某个角落有人已经为我们实现了相应的功能。 我们只需要用它来避免思考解决方案。

这个轮子就是只要一个方法merge就可以完成我们需要的效果。

详情请参考文档：

5.自动生成Json

作为一个合格的开发者，总是需要找一些现成的工具来完成一些有规律的重复操作，比如生成这个json文件。 如果能直接给一个json对象，就可以生成这个json。 这不是一件好事吗？

方向是对的，但寻找的过程是短暂的。 最后笔者为大家找了一个插件JSON Utils，可以一键生成json原型。 只需一个命令即可。

由于JSON Form库没有使用完全标准的Json，尤其是数组结构的json节点，上面生成的json文件可能需要稍作修改，具体可以参考官方文档。

6.xpath对应的读写库

做过网页采集相关工作的应该都熟悉xpath，它是快速定位网页节点内容的利器。 同样，在处理json文件时，也有类似的选择定位语法。

在环境中，笔者为大家找了一个库-Plus，非常不错，值得学习和掌握。 有了这个库在手，大大增强了我们访问json对象的能力，尤其是一些层次结构很深的复杂json对象。 具体使用方法请参考官方文档：

七、结论

本文与大家分享最近一路探索的关于json、json、web表单自动渲染的话题。 文中看到的几个库，都是作者自己在同类题材中经过比较、试错后，自己尝试发现其可行性。 和价值点。

在知识的学习中，需要有引导。 希望作者的分享能给大家一些好的思路和启发，让大家更方便快捷的开发WPSJS。

也希望更多的人加入分享的行列，让社区更加繁荣。 技术的魅力之一就是：分享越多，收获越多，学得越多，进步越大。

对于本文提到的几个库，请务必使用官方文档进行学习。 任何其他零碎的文章分享方式只会让你更加沮丧。 这也是作者自己的亲身经历。 没有人比作者更了解他。 关于自己制作的轮子的更多使用细节只能在官方文档中找到。