前言

相信大部分前端从业者都有过表单需求，特别是在b端的场景中表单的使用非常频繁，想问一下大家有没有思考过怎么去实现一个表单会更好呢？

比如，在表单的设计时，通常会将 表单 的formData结构 和 后端给予的详情接口数据格式相吻合，这样子就可以避免减少数据的转换，后面直接基于页面的表单form就可以提交。

虽然想象很美好，但是往往最后后端提供的详情数据和我们页面表单实际所需的 formData 结构相差甚远，因为前端不仅需要考虑后端提供的数据得考虑前端页面的布局。

所以我们需要 基于后端接口数据格式 做修改，将其转换为我们页面表单适配的格式，如何更好的完成这个转换，这就涉及到临时变量了

思考

定义临时变量

那我们应该如何去合理的应用临时变量呢？

首先对于一个表单而言，其前端的表现往往要比后端给予的接口格式要复杂的多，比如某个选项的回显，但是这个选项的值并不会提交给后端，之前就遇到过类似的场景，后端只需要一个cron表达式但是前端的页面却有两种不同的cron配置模式，然后两种cron配置模式配置出来的cron表达式差异很大，只用一个cron处理起来很困难。

所以对于这种情况我们应该要首先服务好表单，在后端提供的接口结构的前提上定义出表单所需的超集。
例：

let formData = {
    name: '',
    cron: '',
    cronType: '',
    _simple_cron: '',
    _advanced_cron: ''
}

对于后端而言对其有意义的只有 name 、 cron 和 cronType ，但是前端还需要其他状态去标识cron配置模式，即_simple_cron 和 _advanced_cron。

因此这里的formData 定义的时候我们应该主动补充上_simple_cron 和 _advanced_cron，后续在页面处理的时候就可以直接通过 临时变量 进行操作。

值得注意的是，当我们使用临时变量的时候应该要注意命名规范，本人的习惯是临时变量都是 _ 开头，这样子不但方便辨识，还有利于后续的过滤

临时变量的使用规范化

上面我们描述了如何去定义临时变量，那我们如何将临时变量的使用规范化呢？

首先我们可以知道临时变量的值都是由真实数据映射过来的，因此我们可以在表单组件导出一个表单临时变量的补全函数，例子：

export function initializeFormTemp (form) {
    form._simple_cron = getSimpleCron(form.cron)
    form._advanced_cron = getAdvancedCron(form.cron)
}

当我们页面基础表单数据加载下来之后就可以调用initializeFormTemp进行临时变量补全。

其次我们在提交表单的时候也可以定义一个过滤函数，帮助生成真实提交的表单数据及过滤临时变量，例子：

function check() {
    return new Promise((resolve, reject) => {
        resolve({
            name,
            cronMode,
            cron: cronMode === ADVANCED ? _advanced_cron : _simple_cron
        })
    })
}

总结

最后总结一下临时变量在表单开发的思考

一、优先服务于表单，在接口所需的数据结构之上定义出表单所需的超集。
二、统一临时变量的使用规范，在对应的函数体中完成，临时变量的初始化，及表单数据的提交。

原文链接：https://juejin.cn/post/7332593229336887311 作者：大盈仙人