本文主要講解后臺(tái)系統(tǒng)與表單相關(guān)的頁(yè)面開(kāi)發(fā)，并分析如何才能更好地、高效地開(kāi)發(fā)。

技術(shù)棧

• React
• Antd

背景

Antd

以下我都將Ant Design 簡(jiǎn)稱(chēng)為 Antd

Ant Design是個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的UI框架，主要可以用于中后臺(tái)系統(tǒng),它有基于React、Vue和Angular的實(shí)現(xiàn)。個(gè)人感覺(jué)Antd還是很強(qiáng)大的,API相當(dāng)完善、全面，基本能實(shí)現(xiàn)你想要的各種功能。

表單
在開(kāi)發(fā)普通的后臺(tái)系統(tǒng)時(shí),開(kāi)發(fā)得最多的就是實(shí)體的 新建、編輯和詳情頁(yè)面，這三個(gè)頁(yè)面有共通之處，也有不同之處，感覺(jué)有可以復(fù)用的地方，但是有些地方又需要特殊處理。

表單頁(yè)如圖:

詳情頁(yè)如圖:

新建、編輯、詳情頁(yè)與Form表單組件的關(guān)系

從上面的幾個(gè)圖中我們看出:

• 新建和編輯可以復(fù)用一個(gè)Form組件
• 新建時(shí)不傳給Form組件數(shù)據(jù)
• 編輯時(shí)會(huì)請(qǐng)求后端實(shí)體的數(shù)據(jù)，傳給Form組件,進(jìn)行數(shù)據(jù)初始化
• 詳情頁(yè)照理說(shuō)也可以用Form組件，但是，UI視圖上面Form組件和詳情頁(yè)面會(huì)不一致，比如：詳情頁(yè)只是純粹展示的div,而非各種表單控件了。

思考并進(jìn)行實(shí)現(xiàn)

通過(guò)上面的調(diào)研，我們可以考慮把詳情頁(yè)、新建和編輯做成單獨(dú)的頁(yè)面，但是新建和編輯復(fù)用同一個(gè)Form組件，Form組件進(jìn)行數(shù)據(jù)收集、展示、表單校驗(yàn)，額外的邏輯處理(比如新建、編輯的提交動(dòng)作、跳轉(zhuǎn)頁(yè)面和數(shù)據(jù)過(guò)濾)可能會(huì)有不同，所以在新建、編輯頁(yè)面進(jìn)行分別的處理。
ok,我們看看Form表單代碼實(shí)現(xiàn): 更多詳情看這里

<Form onSubmit={this.handleSubmit}><FormItem{...formItemLayout}label="E-mail">{getFieldDecorator('email', {rules: [{type: 'email', message: 'The input is not valid E-mail!',}, {required: true, message: 'Please input your E-mail!',}],})(<Input />)}</FormItem><FormItem{...formItemLayout}label="Password">{getFieldDecorator('password', {rules: [{required: true, message: 'Please input your password!',}, {validator: this.validateToNextPassword,}],})(<Input type="password" />)}</FormItem> ...

上面的代碼是利用Antd表單實(shí)現(xiàn)的，這里會(huì)有一些問(wèn)題:

• 平均一個(gè)表單控件用平均12~17行代碼(不包含復(fù)雜邏輯和回調(diào)函數(shù)),在大型系統(tǒng)中，一個(gè)復(fù)雜的表單可能會(huì)有30~40個(gè)控件，怎么辦? 寫(xiě)一個(gè)2000 行的Form.js文件嗎？
• 如下寫(xiě)法，會(huì)出現(xiàn)冗余代碼:

每個(gè)控件都要寫(xiě)

FormItem 和 getFieldDecorator ,會(huì)出現(xiàn)多次，而且格式一致

<FormItem{...formItemLayout}label="E-mail">{getFieldDecorator('email', {rules: [{type: 'email', message: 'The input is not valid E-mail!',}, {required: true, message: 'Please input your E-mail!',}],})(<Input />)}</FormItem>

• 詳情頁(yè)需要重寫(xiě)一套完全不一樣的邏輯和UI，無(wú)法復(fù)用Form組件中的邏輯
• 如果有動(dòng)態(tài)標(biāo)簽怎么辦? 比如我遇到一個(gè)場(chǎng)景：頁(yè)面中有一些字段是前端寫(xiě)死的，比如 用戶名，密碼等，還有一些字段，是用戶上傳一個(gè)模板文件，后端解析模板并返回給前端的，結(jié)構(gòu)可能是這樣:

{"name":"標(biāo)簽名1","type":1, // 1：文本框, 2：百分比，3:數(shù)字，4:金額，5:單選按鈕，6:單選下拉框，7:多選按鈕，8:多選下拉框,9:日期-單日，10:日期-區(qū)間"commonUse":true, //是否常用標(biāo)簽"requiredTag":true, //是否必填"placeholder":"這個(gè)是描述","option":[ //選擇項(xiàng)會(huì)用到此字段{"id":1,"name":"名字","defaultOption":true, // 是否默認(rèn)選中}] }

更好的解決方案

• 為了避免一個(gè)Form超過(guò)1000行這種情況出現(xiàn),我們應(yīng)該把大型Form表單進(jìn)行拆分

如下圖，有個(gè)合同的Form表單，我們按照類(lèi)型做如下拆分:

• 針對(duì)上面的其余問(wèn)題，我們計(jì)劃提取出這樣一個(gè)公共組件:
  • 組件接收：需要渲染表單的字段、初始數(shù)據(jù)、字段的控件類(lèi)型等
  • 能根據(jù)字段的不同的控件類(lèi)型渲染不同的表單控件
    • Select
    • Input
    • ...
  • 詳情頁(yè)也能復(fù)用這個(gè)組件
  • 具有可擴(kuò)展性(比如Antd的API的方法在此組件中均能使用)

總結(jié)

后臺(tái)系統(tǒng)中我們開(kāi)發(fā)的大部分頁(yè)面都是表單頁(yè)（新建、編輯、詳情），少部分是列表頁(yè)，我們應(yīng)該多考慮路由劃分、數(shù)據(jù)層設(shè)計(jì)、業(yè)務(wù)組件拆分、公用組件設(shè)計(jì)與實(shí)現(xiàn)，如果這些方面做好了，積累一定的經(jīng)驗(yàn)，以后開(kāi)發(fā)后臺(tái)系統(tǒng)一定會(huì)事半功倍。
Tip: 我準(zhǔn)備在下期再詳細(xì)講解上面提到的表單公用組件的設(shè)計(jì)與實(shí)現(xiàn)。
下一期: => 基于React的表單開(kāi)發(fā)的分析(下)

相關(guān)鏈接

https://ant.design/components/form-cn/

總結(jié)

以上是生活随笔為你收集整理的基于React的表单开发的分析(上)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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