开源库form-render探索（一）
引
在2019年10月19号，看到一则新闻：
阿里巴巴可跨组件体系的表单配置生成方案 form-render 开源了：https://github.com/alibaba/form-render
正好这几天一直在研究表单生成器相关内容，遂一探究竟。
正
从GitHub的工程仓库中可看到package.json部分内容如下：
{
"dependencies": {
"moment": "^2.22.2",
"pope": "^2.0.2",
"prop-types": "^15.x",
"rc-color-picker": "^1.2.6",
"react-sortable-hoc": "^1.6.1",
"validator": "^10.7.1",
"antd": "^3.x",
"@alifd/next": "^1.x"
},
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0",
"react-dom": "^15.0.0 || ^16.0.0",
"babel-polyfill": "^6.13.0"
},
}
从中我们可以了解到：form-render是基于React框架做的一套表单生成引擎。和自家开源的antd-design组件库比较贴近，在src/widgets目录下存放的就是这两套组件主题库。当然，在Readme.md中也明确指出了这一点：
支持 Ant Design 和 Fusion Design 主流的视觉主题
在index.js文件中我们可以看到：该文件导出的是一个对FormRender组件的包裹组件，包裹的目的是为了更灵活的传递相关的schema。class FormRender extends React.Component：表明FormRender确实是基于React框架的，这使得采用Vue框架的应用不能很好的使用该库，
大胆猜测ali应该会再开源一份基于Vue框架的FormRender吧，毕竟ant-design是有过这样操作的：ant-design-vue。
使用该组件需要注意的点：文档很多次提到JSON Schema，有如下说明：
propsSchema遵从和使用了JSON Schema的约定规范。已经接入JSON Schema标准的团队可以几乎无缝接入form-render。JSON Schema是一个约定了可用的结构和字段的特殊 json，作为国际标准，主要应用于校验 JSON 数据
对于某个具体表单组件样式的互动，使用的是ui:className，可通过驱动该属性值的变动驱动该组件的样式，还有一个属性是：ui:options，该属性可用来传递具体表单组件的设定的属性，文档有以下描述：
ui:options里存放特定元素的特定配置。例如textarea的rows，基本上所有antd文档中组件的 props 都可以使用ui:options的方式来直接使用。
因此我们应该可以通过在options中传递style字段来驱动组件具体某些样式的改变，而不是传入一个className。
缺点：
- 关于表单校验，文档有说：
- 简单的长度校验推荐使用 propSchema 中的属性
- pattern 是存在于 propSchema 中属性的一个字段，长用在当长度限制还不满足要求的场景，可通过正则的方式来对用户输入项进行校验
~~~但是对于深入业务层的组件来说，这些校验就有点不够了。比如说，一个输入框，输入值，丢失掉焦点后，需要和服务端校验填入的值是否在数据库中唯一，这是一个很普通的需求，但我们并不能通过JSON Schema这样通用的数据结构来驱动校验。~~对于一个通用的表单规范，某些复杂的字段校验可能只能使用本身使用的编程语言去实现它。
-
因为该组件的schema基于JSON Schema，这样虽然有更好的表单通用描述，比如python，java这样的语言就可以通过同一份JSON Schema来生成相应的表单，但是从js语言本身来讲，会降低表单schema描述的更多可能性。
-
目前还没有看到基于
Vue框架的版本出现，等待官方吧。
优点
说了缺点，我们再来说说优点，
-
可以通过简单的JSON Schema就可以生成表单，颇合当下流行的**数据驱动【编程/业务】**的思想，很酷。
-
支持无限嵌套，只要你的schema表述正确。
-
实现了组件间的联动功能，参考这里
-
schema属性支持函数表达式，前提是：使用 js 对象作为 schema 时，这么做的代价是丢失了该份schema数据的通用性。这加大了开发的自由度。schema 里大部分的属性都支持使用函数表达式，也许【缺点2】可以用函数表达式解决掉。但有新的问题是：作为一个生产环境的工程，必然会用到
Redux，Vuex这样的状态库，对于JSON Schema这样的数据大多会存储在状态库中，而比如填充Select枚举类型，页面校验字段的流程的上下文比如是在具体的组件中，这样会导致上下文环境不一致，开发体验不流畅。简单解决方法是将该Schema放到页面组件的data中，需要做一个取舍。
总的来说，该组件确实在具体JavaScript语言层面满足了各式的表单需求。
续
下一篇可能会讲下FormRender组件的具体表单渲染和数据校验。
链
-
FormRender Github仓库
-
JSON Schema
-
FormRender文档