JSON生成Form表单（一）

介绍

JSON表单是一个基于React的抽象组件，它能将JSON格式的配置渲染为一个Form表单，在实际项目中，经过它能够快速的搭建出一个表单页，这在B端项目中，有着很普遍的用途。

JSON表单的优势有如下几点：

1. 能够快速的构建出一个表单
2. 将表单的数据、逻辑、视图分离，结构简单，进一步抽象和维护也就比较容易
3. 提供校验、自动缓存等额外功能，提高录入体验
4. 能够跨项目共用复杂的表单组件

在一个前端团队中，组件共用显然是一件颇有必要的事，可是对于表单组件来讲，因为灵活度很高，若是没有约定俗成的一套规则，抽象出来的表单组件其实用价值不是很高，那么，JSON表单提供的也就是一套规则，可以使用JSON的数据格式去渲染抽象出来的表单组件。

原始表单

在这里，我暂且将不是经过JSON表单渲染出来的表单称为原始表单，以此来做为JSON表单的对比，在我开发过的大量的表单页里，我常常为如下的缺点所苦恼：

1. 代码量庞大，开发效率低
2. 数据、逻辑、视图杂糅，不便功能拆分和抽象
3. 维护成本高
4. 须要额外处理校验和缓存等功能
5. 不一样项目中很难共用表单组件

表单页的代码量是很庞大的，这是因为表单组件的重复编写和处理表单校验等非主线功能，致使开发表单页的效率很低下，而且因为表单页的数据、逻辑、视图杂糅在一块儿，后期须要拆分、抽象子功能模块或者维护表单页时，这将是一件很头疼的事，

在B端项目中，表单是一个很经常使用的功能，对于复杂且多个项目中都用到的表单组件，每每都想将该表单组件抽象出来，可是原始表单组件的抽象成本很高，须要考虑在不一样项目中的灵活度的问题，且没有一套约定的规则，致使该组件的适用范围很小。

如何使用

JSON表单的github地址为：json_transform_form。

依赖环境

1. React，基于React的抽象组件
2. async-validator，基于它作表单校验

安装

npm i json_transform_form --save

一个栗子

import Form from 'json_transform_form'

const config = {
    formKey: 'example-form',
    data: {
        name: '',
        descr: '',
        typeName: ''
    },
    config: [
        {
            type: 'input',
            dataKey: 'name',
            label: 'param',
            style: {
                wrap: {
                    display: 'inline-block',
                    width: 270,
                }
            },
        },
        {
            type: 'select',
            dataKey: 'typeName',
            options: ['string', 'integer', 'float'],
            style: {
                wrap: {
                    display: 'inline-block',
                    width: 100,
                    margin: '0 15px'
                }
                
            },
        },
        {
            type: 'textarea',
            dataKey: 'descr',
            placeholder: '请输入param含义',
            label: 'param含义',
            style: {
                wrap: {
                    width: 385,
                }
            }
        },
    ]
}

<From ref={ref => this.FormWrap = ref} config={config}></From>

上面的代码描述了三个经常使用表单组件组成的简单表单，其效果以下图所示：

JSON表单的详细配置请看下节的JSON生成Form表单（二）。