关于临时变量在表单开发中的思考

前言

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

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

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

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

思考

定义临时变量

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

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

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

js 复制代码
let formData = {
    name: '',
    cron: '',
    cronType: '',
    _simple_cron: '',
    _advanced_cron: ''
}

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

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

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

临时变量的使用规范化

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

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

js 复制代码
export function initializeFormTemp (form) {
    form._simple_cron = getSimpleCron(form.cron)
    form._advanced_cron = getAdvancedCron(form.cron)
}

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

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

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

总结

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

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

相关推荐
dr李四维3 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_17 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~24 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ27 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z32 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式