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表單（二）。