引
在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組件的具體表單渲染和數據校驗。