前言
相信大部分前端从业者都有过表单需求,特别是在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
})
})
}
总结
最后总结一下临时变量在表单开发的思考
一、优先服务于表单,在接口所需的数据结构之上定义出表单所需的超集。 二、统一临时变量的使用规范,在对应的函数体中完成,临时变量的初始化,及表单数据的提交。