DEEPEXI 大前端

常人道，一入開發(fā)深似海，技術(shù)學習無止境。在新技術(shù)層出不窮的前端開發(fā)領(lǐng)域，有一群身懷絕技的開發(fā)，他們在鉆研前沿技術(shù)的同時，也不忘分享他們的成果，回饋社區(qū)。下面，就由小水滴帶大家看一下滴普大前端對新版 el-form-renderer 表單渲染器的硬核解析吧~

DEEPEXI 官方：產(chǎn)品介紹與技術(shù)分享

https://www.zhihu.com/org/deepexi

DEEPEXI 大前端：前端技術(shù)成果的分享

https://zhuanlan.zhihu.com/deepexi-frontend

開源地址（歡迎點擊github來貢獻你的star哦 ?）

https://github.com/deepexihttps://github.com/FEMessage

el-form-renderer與表單

表單面臨的難題

表單本質(zhì)上是什么？表單用來承載業(yè)務(wù)需求的交互邏輯，表單的最終目的是提交一些特定格式的數(shù)據(jù)。

但在日常工作中，公司的業(yè)務(wù)不會停下，需求必然要跟著業(yè)務(wù)而不斷演化，一個看似簡單的頁面表單也會變得越來越臃腫。

表單變得難以維護

拿項目交接舉例子。項目交接了N手，各人都按各自的風格寫代碼；產(chǎn)品也交接了好幾手，各按各的套路提需求。根本原因是代碼的維護成本與業(yè)務(wù)不斷變化之間的矛盾。

當表單中出現(xiàn)聯(lián)動的需求，或者跨行之間發(fā)生制約關(guān)系時，表單代碼的復(fù)雜度就會上升。隨著業(yè)務(wù)需求的演變，如果代碼處理的不好，會變得越來越難維護。

為什么要用el-form-renderer

el-form-renderer是基于 element-ui 封裝的表單渲染器，但不局限于 element-ui 組件。

在完整繼承了 element 的form表單屬性的基礎(chǔ)上進行了簡單擴展，一些非表單組件或者封裝的自定義組件，如圖片上傳、富文本等也可進行整合，從而用戶能夠通過使用一段預(yù)設(shè)的數(shù)據(jù)渲染出一個完整的表單。

用一句話來概括，el-form-renderer 讓表單的構(gòu)建與維護變得更簡單了。

el-form-renderer（表單渲染組件）

issues:

el-form-renderer 1.14.0 重磅發(fā)布

el-form-renderer 1.14.0 : 支持 v-model

版本更新主要帶來了 v-model 功能，并加入了 cypress 做 e2e 測試來護航。下面一起來看看開發(fā)小哥此時版本迭代的心路歷程吧~

功能：v-model

這次 feature 版本更新，主要是為了 v-model 功能開展的。其可以解決以下問題：

• 不再需要對 ref 操作 updateForm、getFormValue 來與數(shù)據(jù)交互。
• 可以直接觀察當前的表單數(shù)據(jù)變更，來進行特定操作。

后續(xù)對 valid 狀態(tài)，也通過 prop + sync 的形式管理，基本就可以脫離對 ref 的依賴。

提升代碼質(zhì)量

由于 el-form-renderer 已經(jīng)是歷時兩年多的開源項目，許多代碼經(jīng)多人轉(zhuǎn)手，已經(jīng)存在以下問題：

• 不合適的寫法。比如大量使用 render 函數(shù)；
• 大量使用 mixin 和字符串拼接來調(diào)用功能，開發(fā)者難以定位調(diào)用鏈條。比如在生成 option 數(shù)組時；
• 廢棄的功能。比如不太好用的 enableWhen 等等；
• 沒有注釋的 hack。比如嘗試兼容 select, radio & checkbox 用法的代碼（在1.14.1版本修復(fù)）。

所以提高維護性也是本次迭代的重中之重。開發(fā)從此開始。

測試

第一步，加入自動化測試。先前，項目中已經(jīng)引入了 jest 做單元測試。單元測試可以保證一些核心邏輯的穩(wěn)定性，比如一些數(shù)據(jù)處理、轉(zhuǎn)換函數(shù)的輸入輸出意圖。

但是其沒有辦法測試真實示例使用起來時的穩(wěn)定性，比如用戶真正在表單中輸入值、點擊重置按鈕的行為。

此前，行為的穩(wěn)定性只能依賴開發(fā)者和 review 人員手動對示例進行測試。

現(xiàn)在，項目使用 cypress 來對每個示例的行為進行自動化測試。這樣開發(fā)者可以放心重構(gòu)和添加功能，同時輕松維護過往表現(xiàn)的一致性。

如何寫行為測試

重點應(yīng)當關(guān)注用戶行為層面，而不是代碼輸出層面。

比如，應(yīng)當測試：

• 用戶輸入文本。
• 確認文本框中有該內(nèi)容。
• 用戶點擊提交按鈕。
• 確認窗口內(nèi)顯示成功信息。

而不是：

• 用戶點擊按鈕。
• 等待某個接口有返回內(nèi)容（測試按鈕有沒綁定到函數(shù)，和接口是否正常）。

重構(gòu)

重構(gòu)的主要成果是：

• 用 template 重構(gòu)了所以 render 函數(shù)。代碼更符合 vue 規(guī)范寫法。
• 移除了 mixin。將相關(guān)功能轉(zhuǎn)化成純函數(shù)，并補充單元測試用例。
• 層級調(diào)整。vue 組件移到 components 目錄下；js 文件移到 util 目錄下。
• 優(yōu)化函數(shù)命名。比如使用具體的 removeDollarInKey 替代 transformItem。
• 梳理了關(guān)鍵復(fù)雜點的邏輯，并提取成純函數(shù)，補充單元測試。
• 補全了所有關(guān)鍵示例的端測試。

其中補充的單元測試包括：transformInputFormat(用 inputFormat 處理初始和 updateForm 的值)；transformOutputFormat (用 outputFormat 處理 getFormValue 的值)；collect （從 content 中搜集 options 和初始 value。

inputFormat & outputFormat

這次重構(gòu)的最大難點，就是處理 inputFormat、 outputFormat、group 與表單值 value 的邏輯。直接給出定義的話：

• 每個表單項的 inputFormat 接受當前 這一層（group） 的值，返回 當前項的值。
• 每個表單項的 outputFormat 接受 當前項的值 ，返回的值先判斷是不是對象：
  • 如果不是，返回值視作 當前項的值。
  • 如果是，返回值將整體覆蓋到 這一層（group） 的值。

具體看如下示例。使用到的同學請務(wù)必注意其用法。

inputFormat

重構(gòu)前：

/ content 配置 {id: 'a',inputFormat: v => v + 1 // 接受傳入值，返回新值 } // this.$refs.form.updateForm({a: 1}) this.$refs.form.getFormValue() // {a: 2}

重構(gòu)后：

// content 配置 {id: 'a',inputFormat: formValue => formValue.notA // 接受整個 formValue 來處理！ } // this.$refs.form.updateForm({notA: 1}) this.$refs.form.getFormValue() // {a: 1}

outputFormat

重構(gòu)前：

// content 配置 [{id: 'a',default: 1,outputFormat: a => a + 1 // 接受內(nèi)部值，返回處理過的值},{id: 'b',default: {c: 2},outputFormat: b => (b.c += 1, b)}, ] // this.$refs.form.getFormValue() // {a: 2, b: {c: 3}}

重構(gòu)后：

// content 配置 [{id: 'a',default: 1,outputFormat: a => a + 1 // 這個的理解是對的},{id: 'b',default: {c: 2},outputFormat: b => (b.c += 1, b) // 當返回值是對象時，會整體覆蓋到上一層！}, ] // this.$refs.form.getFormValue() // {a: 2, c: 3}

開發(fā)功能：v-model

開發(fā)過程

• 新增屬性 form，作為對外 v-model 的屬性。
• 在 watch 里對接數(shù)據(jù)流水線：
  • 監(jiān)聽 form、content 的變更 -> 搜集初始值 --inputFormat--> value
  • 監(jiān)聽 value 的變更 --outputFormat--> form
• 寫新的示例 v-model.md 和測試 v-model.spec.js（參考 basic 即可）。

測試流程

• 輸入各種 input、select、radio。
• 檢查輸入后 v-model 的狀態(tài)。
• 點擊 reset 按鈕，v-model 回到初始狀態(tài)。

發(fā)現(xiàn)問題

• 在模擬點擊 reset 按鈕時，當 cypress 測試里點擊重置按鈕， reset 未生效。
• 手動在 cypress 的調(diào)試瀏覽器中點擊按鈕，reset 生效。
• 在普通瀏覽器中點擊按鈕，reset 生效 。
• 在 reset 函數(shù)里打點，此時 reset 函數(shù)在以上情況中 都有被正常調(diào)用。
• 嘗試在 cypress 代碼中先等待1秒再點擊按鈕，reset 未生效。
• 嘗試在 cypress 代碼中連續(xù)寫兩次 click 按鈕操作，reset 生效。

發(fā)現(xiàn)有可能是 cypress 的問題，標明注釋說明手動測試成功，連點兩次是 hack 寫法。

解決問題

review 了下原本的 resetFields 邏輯，發(fā)現(xiàn)了如下問題：

• reset 后 el-select 報錯的 bug。
• reset 后，value 監(jiān)聽器監(jiān)聽不到改變，因為 el-form 的實現(xiàn)機制中改了 value 后沒有 emit input 事件。
• 如果在監(jiān)聽器上加 deep: true，則會發(fā)現(xiàn)新值和舊值相同。原因暫時不明。

在發(fā)現(xiàn)以上問題基礎(chǔ)上，對代碼進行如下修改：

• 在 form、value 監(jiān)聽器中用 lodash 的 isequal 判斷前后的值，有變更時才 emit input 事件。
• 參考 el-form 機制在內(nèi)部實現(xiàn)了 resetFields：用的是 mounted 時傳入的值，然后清除校驗錯誤信息。

解決了用例異常的問題，有如下總結(jié)：

• 仍沒有弄清楚為什么 cypress 的模擬操作代碼調(diào)用的 resetFields 沒有正常運作。
• 疑似 cypress 的問題導致 resetFields 的其他問題被發(fā)現(xiàn)。
• 重視測試的心以一種特別的方式讓組件得到了回報。

關(guān)于初始狀態(tài)

值得一提的是，目前 resetFields 所認定的 初始狀態(tài)，是在組件 mounted 階段時 v-model 的值。這點與 element 一致，因為一些 element 表單組件，會在 created 階段，在傳入的 value 值不合法時會重新 emit 一個正確的初始值給到 v-model。比如：

• 開啟了 multiple 的 el-select，會修正初始值為 [] 。
• el-checkbox，會修正初始值為 [] （由 el-form-renderer 實現(xiàn)，原生是沒有的）。

更新文檔

此次更新順帶修復(fù)了一些老示例的錯誤用法。可能不少 el-form-renderer 的用戶還不了解，el-form-renderer 的 disabled 屬性，統(tǒng)一在配置最上層級設(shè)置：

// content 定義 [{disabled: true, // 在這里設(shè)置el: {disabled: true // 無效}} ]

意外之喜

文檔：https://femessage.github.io/el-form-renderer/#/Demo/content

在寫 v-model 數(shù)據(jù)流水線時，因為把 content 也融入在其中，所以現(xiàn)在可以在運行時修改 content，并觀測表單變化。

快速咨詢

登陸下方鏈接申請售前咨詢，聯(lián)系人姓名中加上推薦碼 deepexi@zhihu 將有專人聯(lián)系開通。

全場景數(shù)據(jù)智能引擎?cloud.deepexi.com

往期推薦

全渠道數(shù)字化營銷平臺 DEEPEXI DM?mp.weixin.qq.com企業(yè)級研發(fā)效能利器 DEEPEXI DevOps?mp.weixin.qq.com企業(yè)級前端全鏈路開發(fā)服務(wù)平臺：DEEPEXI Serverless（A20）?mp.weixin.qq.com周期購自動派單率不高？可能是你不知道這個解決方案！?mp.weixin.qq.com

更多內(nèi)容

全場景數(shù)據(jù)智能引擎?cloud.deepexi.comDEEPEXI是滴普科技公司面向企業(yè)數(shù)字化領(lǐng)域打造的云原生智能平臺，定位于企業(yè)數(shù)字化引擎，為企業(yè)提供數(shù)字化全棧解決方案。滴普科技致力于互聯(lián)網(wǎng)/大數(shù)據(jù)/人工智能/物聯(lián)網(wǎng)領(lǐng)先技術(shù)產(chǎn)品解決方案的研發(fā)和實施，是領(lǐng)先的全場景數(shù)據(jù)智能服務(wù)商。

總結(jié)

以上是生活随笔為你收集整理的asp.net接受表单验证格式后再提交数据_如何解析 el-form-renderer 表单渲染器1.14.0...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。