前端大表单的设计思路

巨大的表单，在复杂的管理后台中最为常见。

什么叫大表单呢？

一、字段多

二、结构复杂

三、各类交互

就至关于网页上的银行单吧，而且有各种交互（增删改查）、校验。

因为近期作的这类表单较多，做此篇，权当总结与分享。

我相信此时的你使用的前端框架也是基于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的相互转换（数据录入与数据回显）
复制代码

能妥善处理好这两个问题，基本上大表单也就处理好了，剩下的就是细节的打磨。