开源库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。

缺点：

1. 关于表单校验，文档有说：

• 简单的长度校验推荐使用 propSchema 中的属性
• pattern 是存在于 propSchema 中属性的一个字段，长用在当长度限制还不满足要求的场景，可通过正则的方式来对用户输入项进行校验

~~~但是对于深入业务层的组件来说，这些校验就有点不够了。比如说，一个输入框，输入值，丢失掉焦点后，需要和服务端校验填入的值是否在数据库中唯一，这是一个很普通的需求，但我们并不能通过JSON Schema这样通用的数据结构来驱动校验。~~对于一个通用的表单规范，某些复杂的字段校验可能只能使用本身使用的编程语言去实现它。

2. 因为该组件的schema基于JSON Schema，这样虽然有更好的表单通用描述，比如python，java这样的语言就可以通过同一份JSON Schema来生成相应的表单，但是从js语言本身来讲，会降低表单schema描述的更多可能性。

3. 目前还没有看到基于Vue框架的版本出现，等待官方吧。

优点

说了缺点，我们再来说说优点，

1. 可以通过简单的JSON Schema就可以生成表单，颇合当下流行的**数据驱动【编程/业务】**的思想，很酷。

2. 支持无限嵌套，只要你的schema表述正确。

3. 实现了组件间的联动功能，参考这里

4. schema属性支持函数表达式，前提是：使用 js 对象作为 schema 时，这么做的代价是丢失了该份schema数据的通用性。这加大了开发的自由度。schema 里大部分的属性都支持使用函数表达式，也许【缺点2】可以用函数表达式解决掉。但有新的问题是：作为一个生产环境的工程，必然会用到Redux，Vuex这样的状态库，对于JSON Schema这样的数据大多会存储在状态库中，而比如填充Select枚举类型，页面校验字段的流程的上下文比如是在具体的组件中，这样会导致上下文环境不一致，开发体验不流畅。简单解决方法是将该Schema放到页面组件的data中，需要做一个取舍。

总的来说，该组件确实在具体JavaScript语言层面满足了各式的表单需求。

续

下一篇可能会讲下FormRender组件的具体表单渲染和数据校验。

链

1. FormRender Github仓库

2. JSON Schema

3. FormRender文档