noForm 詳細介紹

類別: IT

表單在前端可謂是非常常見的場景,而且通常需要花費開發非常多的時間來處理各種複雜的邏輯。特別是在企業中後臺的業務中,存在著大量的表單,比如客戶的訂單,投訴的問題單,服務跟進過程每個流程的流轉。凡是存在使用者輸入的地方都存在著各種各樣的表單,欄位或多或少,邏輯或繁或簡。需求一旦變動,造成的程式碼變動(程式碼量或者邏輯分支)可能是非常恐怖的。比如當A欄位選擇了x的時候,增加B,C,D三個欄位。相信這是非常多前端開發非常苦惱的問題。

NoForm

NoForm是阿里巴巴外綜服前端團隊在外綜服(外貿綜合服務)場景下,經過長期的思考和打磨產出的一款基於React的表單解決方案。可能有人不理解,可能會問:表單嘛,能有多複雜? 可能你從沒見過一個表單需要填寫150+個欄位。可能你也沒有見過一個表單實際是由10+個子表單組合出來的。可能你也沒見過一個表單的欄位是後端動態配置的。 NoForm從解決業務複雜性的角度出發,找到了幾個抓手,將表單方案進行了優化和開源。 

官網連結官方文件

框架特點

  • 狀態管理

  • 核心控制

  • 元件標準

  • 場景定製

  • 工具方法

狀態管理

大家開發過程中肯定遇到過一個實體,增改查操作,每個操作都需要一個頁面來實現功能,可能還各有差異,但差異又不大。這樣的瑣事非常耗費精力,新增的表單所有欄位都可以展示編輯,修改的表單部分欄位不能編輯,而詳情的表單都不可以編輯。 在 NoForm 中,使用了狀態來解決這一問題,狀態包括編輯 預覽 禁用 隱藏。通過這樣的狀態可以快速切換表單,使一份表單程式碼不僅可以做表單,也可以做詳情,也可以做編輯。寫一份程式碼相當於寫多分狀態頁。 而狀態的粒度是可以單獨控制的,你可以控制整個表單切換狀態,也可以控制某個欄位的狀態。這樣在應對 當性別為男性的時候,三圍欄位不展示 這樣的需求時,就不會非常棘手了。文件

核心控制

上面提到了狀態管理,而核心則是控制狀態以及其他功能的手段。NoForm 對外暴露的一切只有一個 formCore 的物件,所有對錶單進行操控的方法都在這個 formCore 物件上面。表單的核心具體做了哪些事情呢?文件

  • core 對值的管理主要體現在 onChange 上,當有 onChange 時,丟擲一個事件。其他需要監聽值變化的元件能能夠收到。value 的預設值為 null。

  • 狀態 當值變化時,或直接對狀態進行操作時,狀態會變化。這個變化會傳遞給欄位的元件,元件會根據不同的狀態進行展示的切換。

  • 錯誤 當手動操作校驗,或啟用了自動校驗時,會使用配置的校驗規則進行校驗,把校驗結果放到錯誤

  • 屬性 屬性是指需要透傳到React元件的其他屬性,比如Select元件,可以通過props傳遞過去。props可以寫成一個function,最終的結果會傳遞給元件。這對於動態顯示Select的場景非常有幫助

  • 校驗規則 校驗規則使用了開源的 async-validator 校驗庫

元件標準

關於表單元件, 我們常見的 Input Radio Checkbox Select TextArea,那什麼是元件標準?這裡的元件標準是擁有 value 屬性和 onChange 回撥(當值變化時把值作為第一個引數回傳)的元件都可以在NoForm中作為欄位元件使用。目前絕大部分的元件庫也都是這樣設計的,所以 NoForm 其實可以跟絕大部分的元件庫混合使用。而對於不相容的元件庫或者單個的元件,可以通過一個wrapper來做一個簡單的封裝。最簡單的封裝是input,input的onChange裡面的引數是event,而 NoForm 實際期望是 value ,這時就需要一個wrapper。文件

場景定製

表單並不是簡單的欄位的羅列,還有可能是有組織的。這裡主要提煉了兩個表單場景 Repeater,Accordion。 Repeater,拿收貨地址來舉個例子,收貨地址能能有多個,我們需要維護一個收貨地址的列表,可以新增,更新,刪除。這就是Repeater大展實力的場景。參見文件 Accordion,當一個表單欄位非常多時,Accordion能夠很棒的將表單按照設定好的類別進行步驟切分,並且給使用者一種按步填寫就完成的引導。不會一次將所有欄位展示給使用者(那會嚇到使用者),而是分步驟的展示。

工具方法

目前提供的工具方法主要是校驗規則的工具方法,通過工具方法可以非常方便的編寫校驗規則。例如

import rules from 'noform/validate';const validateConfig={    name: rules.required('name', '名稱不能為空'),    email: [rules.required('email', '郵箱不能為空'), rules.email('email', '郵箱格式不正確')]}

未來還有更多,敬請期待~

noForm 詳細介紹原文請看這裡