大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~dvv28資訊網(wǎng)——每日最新資訊28at.com

本文源碼地址：https://github.com/sanxin-lin/use-dspdvv28資訊網(wǎng)——每日最新資訊28at.com

背景

在平時(shí)的開(kāi)發(fā)中，表格數(shù)據(jù)->(增加/編輯/查看)行->(增加/編輯)提交，這是很常見(jiàn)且簡(jiǎn)單的業(yè)務(wù)，但是就是這些業(yè)務(wù)，我也發(fā)現(xiàn)一些問(wèn)題dvv28資訊網(wǎng)——每日最新資訊28at.com

圖片dvv28資訊網(wǎng)——每日最新資訊28at.com

首先我們來(lái)理性一下這些業(yè)務(wù)的邏輯dvv28資訊網(wǎng)——每日最新資訊28at.com

• 第一步：請(qǐng)求回表格的數(shù)據(jù)
• 第二步：點(diǎn)開(kāi)(增加/編輯/查看)彈窗，如果是(編輯/查看)，則需要將表格行的數(shù)據(jù)傳到彈窗中回顯
• 第三部：如果是(編輯)彈窗，則需要把表單數(shù)據(jù)提交請(qǐng)求接口

我用一個(gè)圖來(lái)概括大概就是：dvv28資訊網(wǎng)——每日最新資訊28at.com

圖片dvv28資訊網(wǎng)——每日最新資訊28at.com

問(wèn)題所在

我不知道其他公司怎么樣，但是就拿我自身來(lái)舉例子，公司的后端跟前端的命名規(guī)則是不同的dvv28資訊網(wǎng)——每日最新資訊28at.com

• 后端命名： 請(qǐng)求方法+字段類型+字段含義+下劃線命名(比如 in_name、os_user_id)
• 前端命名： 字段含義+駝峰命名(比如 name、userId)

回到剛剛的業(yè)務(wù)邏輯，還是那張圖，假如我們前端不去管命名的話，那么數(shù)據(jù)的傳輸是這樣的，發(fā)現(xiàn)了很多人都懶得去轉(zhuǎn)換后端返回的字段名，直接拿著后端的字段名去當(dāng)做前端的表單字段名，但這是不符合前端規(guī)范的dvv28資訊網(wǎng)——每日最新資訊28at.com

圖片dvv28資訊網(wǎng)——每日最新資訊28at.com

理想應(yīng)該是表單要用前端的命名，比如這樣dvv28資訊網(wǎng)——每日最新資訊28at.com

圖片dvv28資訊網(wǎng)——每日最新資訊28at.com

但是很多前端就是懶得去轉(zhuǎn)換，原因有多個(gè)：dvv28資訊網(wǎng)——每日最新資訊28at.com

• 開(kāi)發(fā)者自身比較懶，或者沒(méi)有規(guī)范意識(shí)
• 回顯時(shí)要轉(zhuǎn)一次，提交時(shí)還要再轉(zhuǎn)一次，每次總是得寫(xiě)一遍

解決方案

所以能不能寫(xiě)一個(gè)工具，解放開(kāi)發(fā)者的壓力又能達(dá)到期望的效果呢？比如我開(kāi)發(fā)一個(gè)工具，然后像下面這樣在彈窗里用dvv28資訊網(wǎng)——每日最新資訊28at.com

• state： 響應(yīng)式表單數(shù)據(jù)，可以用在彈窗表單中
• resetState： 重置表單
• inputState： 將表格行數(shù)據(jù)轉(zhuǎn)成表單數(shù)據(jù)
• outputState： 將表單數(shù)據(jù)轉(zhuǎn)成提交請(qǐng)求的數(shù)據(jù)

配置的含義如下：dvv28資訊網(wǎng)——每日最新資訊28at.com

• default： 表單字段默認(rèn)值
• input： 轉(zhuǎn)入的字段名
• output： 轉(zhuǎn)出的字段名
• inputStrategy： 轉(zhuǎn)入的轉(zhuǎn)換策略，可以選擇內(nèi)置的，也可以自定義策略函數(shù)
• outputStrategy： 轉(zhuǎn)出的轉(zhuǎn)換策略，可以選擇內(nèi)置的，也可以自定義策略函數(shù)

圖片dvv28資訊網(wǎng)——每日最新資訊28at.com

轉(zhuǎn)入和轉(zhuǎn)出策略，內(nèi)置了一些，你也可以自定義，內(nèi)置的有如下dvv28資訊網(wǎng)——每日最新資訊28at.com

圖片dvv28資訊網(wǎng)——每日最新資訊28at.com

下面是自定義策略函數(shù)的例子，必須要在策略函數(shù)中返回一個(gè)轉(zhuǎn)換值dvv28資訊網(wǎng)——每日最新資訊28at.com

圖片dvv28資訊網(wǎng)——每日最新資訊28at.com

這樣的話，當(dāng)我們執(zhí)行對(duì)應(yīng)的轉(zhuǎn)換函數(shù)之后，會(huì)得到我們想要的結(jié)果dvv28資訊網(wǎng)——每日最新資訊28at.com

圖片dvv28資訊網(wǎng)——每日最新資訊28at.com

use-dsp

所以我開(kāi)發(fā)了一個(gè)工具dvv28資訊網(wǎng)——每日最新資訊28at.com

源碼地址：https://github.com/sanxin-lin/use-dspdvv28資訊網(wǎng)——每日最新資訊28at.com

其實(shí) dsp 意思就是dvv28資訊網(wǎng)——每日最新資訊28at.com

• data
• state
• parameter

npm i use-dspyarn i use-dsppnpm i use-dspimport useDSP from 'use-dsp'

為啥不從一開(kāi)始就轉(zhuǎn)？

有人會(huì)問(wèn)，為啥不從一開(kāi)始請(qǐng)求表格數(shù)據(jù)回來(lái)的時(shí)候，就把數(shù)據(jù)轉(zhuǎn)成前端的命名規(guī)范？dvv28資訊網(wǎng)——每日最新資訊28at.com

其實(shí)這個(gè)問(wèn)題我也想過(guò)，但是設(shè)想一下，有一些表格如果只是單純做展示作用，那么就沒(méi)必要去轉(zhuǎn)字段名了，畢竟不涉及任何的數(shù)據(jù)傳遞。dvv28資訊網(wǎng)——每日最新資訊28at.com

但是需要編輯或者查看彈窗的表格，就涉及到了行數(shù)據(jù)的傳遞，那么就需要轉(zhuǎn)字段名dvv28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-85047-0.html和后端吵架后，我寫(xiě)了個(gè)庫(kù)，讓整個(gè)前端團(tuán)隊(duì)更加規(guī)范！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 美團(tuán)社招一面，比預(yù)想的簡(jiǎn)單。

下一篇： 工作中有沒(méi)有做過(guò)性能調(diào)優(yōu)？一問(wèn)這個(gè)便知！