开源库form-render探索（一）

梦里梦外; 2023-06-15 15:25 13阅读 0赞

## 引 ##

在2019年10月19号，看到一则新闻：

> 阿里巴巴可跨组件体系的表单配置生成方案 form-render 开源了：[https://github.com/alibaba/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这样通用的数据结构来驱动校验。~~对于一个通用的表单规范，某些复杂的字段校验可能只能使用本身使用的编程语言去实现它。

1.  因为该组件的schema基于JSON Schema，这样虽然有更好的表单通用描述，比如python，java这样的语言就可以通过同一份JSON Schema来生成相应的表单，但是从js语言本身来讲，会降低表单schema描述的更多可能性。
2.  目前还没有看到基于`Vue`框架的版本出现，等待官方吧。

### 优点 ###

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

1.  可以通过简单的JSON Schema就可以生成表单，颇合当下流行的\*\*数据驱动【编程/业务】\*\*的思想，很酷。
2.  支持无限嵌套，只要你的schema表述正确。
3.  实现了组件间的联动功能，参考[这里][Link 1]
4.  schema属性支持函数表达式，前提是：使用 js 对象作为 schema 时，这么做的代价是丢失了该份schema数据的通用性。这加大了开发的自由度。schema 里大部分的属性都支持使用函数表达式，也许【缺点2】可以用函数表达式解决掉。但有新的问题是：作为一个生产环境的工程，必然会用到`Redux`，`Vuex`这样的状态库，对于JSON Schema这样的数据大多会存储在状态库中，而比如填充`Select`枚举类型，页面校验字段的流程的上下文比如是在具体的组件中，这样会导致上下文环境不一致，开发体验不*流畅*。简单解决方法是将该Schema放到页面组件的`data`中，需要做一个取舍。

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

## 续 ##

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

## 链 ##

1.  [FormRender Github仓库][https_github.com_alibaba_form-render]
2.  [JSON Schema][]
3.  [FormRender文档][FormRender]

[https_github.com_alibaba_form-render]: https://github.com/alibaba/form-render
[propSchema]: http://groups.alidemo.cn/hive/form-render/#/docs/prop-schema?type=html
[Link 1]: https://alibaba.github.io/form-render/#/docs/function
[JSON Schema]: https://json-schema.org/understanding-json-schema/
[FormRender]: https://alibaba.github.io/form-render/#/README