JSON生成Form表单(一)

39次阅读

共计 1352 个字符,预计需要花费 4 分钟才能阅读完成。

介绍
JSON 表单是一个基于 React 的抽象组件,它能将 JSON 格式的配置渲染为一个 Form 表单,在实际项目中,通过它可以快速的搭建出一个表单页,这在 B 端项目中,有着很广泛的用途。
JSON 表单的优点有以下几点:

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

在一个前端团队中,组件共用显然是一件很有必要的事,但是对于表单组件来说,由于灵活度很高,如果没有约定俗成的一套规则,抽象出来的表单组件其实用价值不是很高,那么,JSON 表单提供的也就是一套规则,能够使用 JSON 的数据格式去渲染抽象出来的表单组件。
原始表单
在这里,我暂且将不是通过 JSON 表单渲染出来的表单称为原始表单,以此来作为 JSON 表单的对比,在我开发过的大量的表单页里,我经常为以下的缺点所苦恼:

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

表单页的代码量是很庞大的,这是由于表单组件的重复编写和处理表单校验等非主线功能,导致开发表单页的效率很低下,并且由于表单页的数据、逻辑、视图杂糅在一起,后期需要拆分、抽象子功能模块或者维护表单页时,这将是一件很头疼的事,
在 B 端项目中,表单是一个很常用的功能,对于复杂且多个项目中都用到的表单组件,往往都想将该表单组件抽象出来,但是原始表单组件的抽象成本很高,需要考虑在不同项目中的灵活度的问题,且没有一套约定的规则,导致该组件的适用范围很小。
如何使用
JSON 表单的 github 地址为:json_transform_form。
依赖环境

React,基于 React 的抽象组件
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 表单。

正文完
 0