好久不寫博客了,手都生了,趁着最近老大讓我研究動態表單生成的時機,擼一發博客~~
開源項目比較
老大丟給我了兩個比較不錯的開源的動態表單生成工具,這兩個項目在github上的star數量基本持平:
https://github.com/udos86/ng-dynamic-forms
form.io
其中from.io本身是一個商業項目,只是開源了其中動態表單生成的部分。他的功能有點強大,從官方簡介的視頻來看看,支持拖拽、驗證、設置各種默認值等等,商業版本甚至可以支持數據的動態存儲。想要研究它,需要了解三個開源項目:
https://github.com/formio/formio.git
https://github.com/formio/formio.js.git
https://github.com/formio/angular-formio.git
其中formio這個項目里面是一些邊緣化的東西,我沒有深究,formio.js這個項目是整個項目的核心,他里面有各種組件的封裝,各種拖拽效果等等,剩下一個angular-formio其實就是給formio.js包了一層angular的皮。
優勢:
form.io非常的強大,你能想到的東西基本上都有,甚至都考慮到了授權~~
劣勢:
- 凡是強大的東西,都有一個共性,就是重,form.io是非常重的,想要把他吃透可不是一個簡單的事情
- form.io基本上都是圍繞bootstrap作為核心來生成表單的(各種樣式之類的定義在formio項目中),不過應該是可以自己修改定義的
- 組件只有HTML的組件(或者說是bootstrap的組件),擴展起來並沒有那么容易
- 基於javascript開發而不是typescript,這個算劣勢嗎?
ng-dynamic-forms
這個項目是原生就基於angular2開發的一個項目,支持原生HTML、bootstrap、foundation、ionic、kendo for angualr、material、primeng等Angular的UI框架,並支持數據驗證。
優勢:
- 這個組件相較於form.io,量級比較輕,源碼也比較容易讀懂,如果是想自己定制一些東西的話,會比較容易
- 對於第三方UI庫支持比較好,方便與項目中的其他控件統一
劣勢:
- 功能沒有form.io強大,不過基本夠用
- 組件較少,不過常用的基本都有,夠用
- 布局和控件是分開的,用起來略有繁瑣
- 對於第三方控件庫的依賴比較強