前端大表單的設計思路

巨大的表單，在複雜的管理後臺中最爲常見。

什麼叫大表單呢？

一、字段多

二、結構複雜

三、各類交互

就至關於網頁上的銀行單吧，而且有各種交互（增刪改查）、校驗。

因爲近期作的這類表單較多，做此篇，權當總結與分享。

我相信此時的你使用的前端框架也是基於mvvm思想的框架（如vue、react等）。

因此，還得先簡短髮表一下我對mvvm的理解。

首先，mvvm的推崇不是毫無邏輯的，用的人多，天然說明用的舒服。

拆解：m（model）、v（view）、vm（viewModel）。

m與v是死的，vm是活的。vm就是核心，中樞神經。

因爲框架的處理，vm的變更會直接體如今m與v中。

也就是說，頁面交互邏輯、頁面數據實際上是經過控制vm來實現的。

（react的state、props，vue中的model、props均可以成爲vm角色）

所以，我對大表單的設計會圍繞着vm來進行。

對於大部分狀況，咱們會將vm直接定義成一個對象，將全部的字段都寫進去。

編寫view部分，也就是切圖部分。每個模塊切一片，將vm裏的字段對應的寫進去。

可是我更傾向於頁面可配置化的寫法。

將頁面中全部的字段定義爲一個config對象，這個config對象包含了字段全部的信息（理想狀態）。

{
    key: 'chineseName',
    value: null,
    label: '公司名稱（中文）',
    type: 'input',
    config: {
        isRequested: true,
        validReg: /^[\u4e00-\u9fa5\s]+$/,
        validMsg: '請輸入純中文！'
    }
},
{
    key: 'companyType',
    value: 1,
    label: '公司類型',
    type: 'select',
    config: {
        isRequested: true,
        options: companyTypeArray()
    }
}
複製代碼

好比是input仍是select，或者checkbox，單選或者多選等等。

以及字段的label，校驗規則等。

基於這個config，能夠編寫函數提取出咱們須要的vm對象。

// 獲取數據模型
getModuleObj: arr => {
    return arr.reduce((obj, item) => {
        obj[item.key] = item.value
        return obj
    }, {})
}
複製代碼

我以爲比較重要的是，我從一個config中，就能看出整個頁面的邏輯與數據。

當須要修改、新增、刪除時，只須要操做config就好了。

這是第一步，肯定好config的思路後，進入我認爲大表單最重要的部分。

與接口數據的交互。

vm是咱們頁面展現的數據，傳給api的，是另外一個數據。

二者在層級結構上是相似的。

這裏不該該有太大差別。若是差別太大，說明一開始字段定義的時候前端並無參與。

fn1(vmData) -> apiData

好比這裏我須要將數組轉換爲|分隔的字符串

// 遞歸處理modelData數據 modelData => apiData
const setParam = data => {
    if (data instanceof Array) {
        if (data.length > 0) {
            if (data[0] instanceof Object) {
                for (let i = 0; i < data.length; i++) {
                    data[i] = setParam(data[i])
                }
            } else {
                data = '|' + data.join('|') + '|'
                return data
            }
        } else {
            data = '||'
        }
    } else if (data instanceof Object) {
        for (let k in data) {
            data[k] = setParam(data[k])
        }
    }
    return data
}
複製代碼

fn2(apiData) -> vmData

只須要編寫兩個函數作數據的轉換便可，層級較深可用遞歸處理。

總結一下，我這裏對大表單的處理，其實就兩點。

一、config描述文件（vm、view以此配置）

二、vm、apiData的相互轉換（數據錄入與數據回顯）
複製代碼

能妥善處理好這兩個問題，基本上大表單也就處理好了，剩下的就是細節的打磨。