表单对于企业级应用来说是很重要的一个模块,表单一般都会有增删改查的需求,最简单的实现方式是有新的表单需求就写一份,这样重复劳动就很多了。稍微有点经验的程序员会抽一个公共模块出来,哪里有表单的需求就调用一下这个公共模块,生成一份,省去了很多的重复工作。那么这种公共模块我们会怎么设计呢?首先我们想到的是数据驱动视图思想,只要按照我们规定的格式输入数据,我们就能产生出一份符合需求的表单,这里我们发现还是不够省力,因为每次构建新的表单都需要我们自己去创建一份数据。是否可以让用户去创建这份表单数据供我们渲染呢?当然可以啦!这里我称之为表单可视化,大概实现思路就是用户通过编辑我们提供的可视化界面产出数据,表单解析器解析用户输入的表单数据,表单渲染器使用解析好的数据渲染表单,输出表单的 formdata,时序图如下:

从上述分析可以知道要实现表单可视化,需要有这样一个流水线:表单编辑器产出表单模板数据 => 表单解析器按标准解析模板数据 => 表单渲染器消费数据渲染出表单,这对于一般的基础组件来说是没什么问题的。但是遇上动态增删的组合组件会如何呢?比如用户需要一个可以在表单界面增删项目的组件,这时候上面的设计貌似就不太好用了。要知道模板数据是在产出时就已经生成投入流水线运作了,这时候运作到最后一步准备装箱了,让我们在这批货里新增几个新的产品,而由于产出模板的工人已经下班了,我们又不能回到开头去重新产出新的模板,这时候要怎么做呢?只能在渲染阶段改数据,这个阶段只能交付最终产品(formdata),怎么让用户看到新的产品跟其他商品外观(模板)和内在材料(data)一样呢?

要解决上述问题,我们要思考的是怎么在一份 formdata 数据里面去同时存储到 data 和 template,一个组合组件由很多的基础组件组成,基于此,我的做法是把组合组件的 template 作为 data 去存,同时存储组个组件内每个基础组件的 data 到 formdata,下次渲染界面的时候就可以拿组合组件的 data 渲染出组合组件内的所有基础组件,而每个基础组件的 data 已经被存储到了 formdata 中,可以直接拿来填充。