常規(guī)開發(fā)-》json配置式頁(yè)面開發(fā)-> 可視化搭建
可視化搭建可先只涉及頁(yè)面布局跟頁(yè)面交互奴紧,暫不涉及業(yè)務(wù)邏輯處理禁荸,因?yàn)橹泻笈_(tái)產(chǎn)品的業(yè)務(wù)邏輯處理一般比較復(fù)雜次和;
實(shí)現(xiàn)方式:
1, 自定義組件 方式 (目前第三方開源多為這種方式)
2. 框架源碼注入浦妄。這種方式對(duì)代碼侵入最小厨喂,在框架生命周期內(nèi)將配置轉(zhuǎn)換為真實(shí)組件曾雕,不影響性能奴烙,針對(duì)不同框架vue和react需要分別實(shí)現(xiàn),
3. webpack 打包工具
第三方開源 ncform 基于vue 實(shí)現(xiàn)了基于element ui的自定義組件 實(shí)現(xiàn)配置form表單以及簡(jiǎn)單table,表單的校驗(yàn)切诀,也支持自定義組件以及自定義校驗(yàn)規(guī)則揩环,5分鐘實(shí)現(xiàn)一個(gè)頁(yè)面不再是夢(mèng)想
缺點(diǎn):配置數(shù)據(jù)全部掛載在data上面,感覺對(duì)性能是一個(gè)負(fù)擔(dān)幅虑,經(jīng)實(shí)際驗(yàn)證丰滑,配置數(shù)據(jù)10000條,會(huì)產(chǎn)生400-500ms左右延遲(結(jié)果還是可以接受)倒庵。
另外褒墨,對(duì)第三方ui支持不太好,雖然可以使用自定義組件去封裝一下擎宝,但這樣對(duì)代碼的侵入性較大
ams 基于vue 可以看做是ncform 高級(jí)版郁妈,同是唯品會(huì)前端團(tuán)隊(duì)開源出來的,但這玩意經(jīng)實(shí)際測(cè)試有嚴(yán)重的性能問題绍申,不推薦 JSON Schema
基于react amis 基于react 目前體驗(yàn)最好噩咪,周邊還有提供有一個(gè)可視化搭建的編輯器(設(shè)計(jì)得不太好用),可以一鍵生成配置文件极阅。