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

前言

相信大部分前端从业者都有过表单需求,特别是在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
        })
    })
}

总结

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

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

相关推荐
fruge5 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia14 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫15 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年34 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_35 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891137 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾39 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking39 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu41 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym1 小时前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化