noForm基于 React 的表單解決方案
表單在前端可謂是非常常見(jiàn)的場(chǎng)景，而且通常需要花費(fèi)開(kāi)發(fā)非常多的時(shí)間來(lái)處理各種復(fù)雜的邏輯。特別是在企業(yè)中后臺(tái)的業(yè)務(wù)中，存在著大量的表單，比如客戶(hù)的訂單，投訴的問(wèn)題單，服務(wù)跟進(jìn)過(guò)程每個(gè)流程的流轉(zhuǎn)。凡是存在用戶(hù)輸入的地方都存在著各種各樣的表單，字段或多或少，邏輯或繁或簡(jiǎn)。需求一旦變動(dòng)，造成的代碼變動(dòng)（代碼量或者邏輯分支）可能是非?？植赖摹１热绠?dāng)A字段選擇了x的時(shí)候，增加B,C,D三個(gè)字段。相信這是非常多前端開(kāi)發(fā)非?？鄲赖膯?wèn)題。
NoForm
NoForm是阿里巴巴外綜服前端團(tuán)隊(duì)在外綜服（外貿(mào)綜合服務(wù)）場(chǎng)景下，經(jīng)過(guò)長(zhǎng)期的思考和打磨產(chǎn)出的一款基于React的表單解決方案?？赡苡腥瞬焕斫?，可能會(huì)問(wèn)：表單嘛，能有多復(fù)雜？ 可能你從沒(méi)見(jiàn)過(guò)一個(gè)表單需要填寫(xiě)150+個(gè)字段。可能你也沒(méi)有見(jiàn)過(guò)一個(gè)表單實(shí)際是由10+個(gè)子表單組合出來(lái)的?？赡苣阋矝](méi)見(jiàn)過(guò)一個(gè)表單的字段是后端動(dòng)態(tài)配置的。 NoForm從解決業(yè)務(wù)復(fù)雜性的角度出發(fā)，找到了幾個(gè)抓手，將表單方案進(jìn)行了優(yōu)化和開(kāi)源。
框架特點(diǎn)
-
狀態(tài)管理
-
核心控制
-
組件標(biāo)準(zhǔn)
-
場(chǎng)景定制
-
工具方法
狀態(tài)管理
大家開(kāi)發(fā)過(guò)程中肯定遇到過(guò)一個(gè)實(shí)體，增改查操作，每個(gè)操作都需要一個(gè)頁(yè)面來(lái)實(shí)現(xiàn)功能，可能還各有差異，但差異又不大。這樣的瑣事非常耗費(fèi)精力，新增的表單所有字段都可以展示編輯，修改的表單部分字段不能編輯，而詳情的表單都不可以編輯。 在 NoForm 中，使用了狀態(tài)來(lái)解決這一問(wèn)題，狀態(tài)包括編輯 預(yù)覽 禁用 隱藏。通過(guò)這樣的狀態(tài)可以快速切換表單，使一份表單代碼不僅可以做表單，也可以做詳情，也可以做編輯。寫(xiě)一份代碼相當(dāng)于寫(xiě)多分狀態(tài)頁(yè)。 而狀態(tài)的粒度是可以單獨(dú)控制的，你可以控制整個(gè)表單切換狀態(tài)，也可以控制某個(gè)字段的狀態(tài)。這樣在應(yīng)對(duì) 當(dāng)性別為男性的時(shí)候，三圍字段不展示 這樣的需求時(shí)，就不會(huì)非常棘手了。文檔
核心控制
上面提到了狀態(tài)管理，而核心則是控制狀態(tài)以及其他功能的手段。NoForm 對(duì)外暴露的一切只有一個(gè) formCore 的對(duì)象，所有對(duì)表單進(jìn)行操控的方法都在這個(gè) formCore 對(duì)象上面。表單的核心具體做了哪些事情呢？文檔
-
值 core 對(duì)值的管理主要體現(xiàn)在 onChange 上，當(dāng)有 onChange 時(shí)，拋出一個(gè)事件。其他需要監(jiān)聽(tīng)值變化的組件能能夠收到。value 的默認(rèn)值為 null。
-
狀態(tài) 當(dāng)值變化時(shí)，或直接對(duì)狀態(tài)進(jìn)行操作時(shí)，狀態(tài)會(huì)變化。這個(gè)變化會(huì)傳遞給字段的組件，組件會(huì)根據(jù)不同的狀態(tài)進(jìn)行展示的切換。
-
錯(cuò)誤 當(dāng)手動(dòng)操作校驗(yàn)，或啟用了自動(dòng)校驗(yàn)時(shí)，會(huì)使用配置的校驗(yàn)規(guī)則進(jìn)行校驗(yàn)，把校驗(yàn)結(jié)果放到錯(cuò)誤中
-
屬性 屬性是指需要透?jìng)鞯絉eact組件的其他屬性，比如Select組件，可以通過(guò)props傳遞過(guò)去。props可以寫(xiě)成一個(gè)function，最終的結(jié)果會(huì)傳遞給組件。這對(duì)于動(dòng)態(tài)顯示Select的場(chǎng)景非常有幫助
-
校驗(yàn)規(guī)則 校驗(yàn)規(guī)則使用了開(kāi)源的 async-validator 校驗(yàn)庫(kù)
組件標(biāo)準(zhǔn)
關(guān)于表單組件， 我們常見(jiàn)的 Input Radio Checkbox Select TextArea，那什么是組件標(biāo)準(zhǔn)？這里的組件標(biāo)準(zhǔn)是擁有 value 屬性和 onChange 回調(diào)（當(dāng)值變化時(shí)把值作為第一個(gè)參數(shù)回傳）的組件都可以在NoForm中作為字段組件使用。目前絕大部分的組件庫(kù)也都是這樣設(shè)計(jì)的，所以 NoForm 其實(shí)可以跟絕大部分的組件庫(kù)混合使用。而對(duì)于不兼容的組件庫(kù)或者單個(gè)的組件，可以通過(guò)一個(gè)wrapper來(lái)做一個(gè)簡(jiǎn)單的封裝。最簡(jiǎn)單的封裝是input，input的onChange里面的參數(shù)是event，而 NoForm 實(shí)際期望是 value ，這時(shí)就需要一個(gè)wrapper。文檔
場(chǎng)景定制
表單并不是簡(jiǎn)單的字段的羅列，還有可能是有組織的。這里主要提煉了兩個(gè)表單場(chǎng)景 Repeater，Accordion。 Repeater，拿收貨地址來(lái)舉個(gè)例子，收貨地址能能有多個(gè)，我們需要維護(hù)一個(gè)收貨地址的列表，可以添加，更新，刪除。這就是Repeater大展實(shí)力的場(chǎng)景。參見(jiàn)文檔 Accordion，當(dāng)一個(gè)表單字段非常多時(shí)，Accordion能夠很棒的將表單按照設(shè)定好的類(lèi)別進(jìn)行步驟切分，并且給用戶(hù)一種按步填寫(xiě)就完成的引導(dǎo)。不會(huì)一次將所有字段展示給用戶(hù)（那會(huì)嚇到用戶(hù)），而是分步驟的展示。
工具方法
目前提供的工具方法主要是校驗(yàn)規(guī)則的工具方法，通過(guò)工具方法可以非常方便的編寫(xiě)校驗(yàn)規(guī)則。例如
import rules from 'noform/validate';
const validateConfig={
name: rules.required('name', '名稱(chēng)不能為空')，
email: [rules.required('email', '郵箱不能為空')， rules.email('email', '郵箱格式不正確')]
}
未來(lái)還有更多，敬請(qǐng)期待~