目录
前端仅传递发生更改的字段
为什么
数据举例
递归对比函数
从回显数据到提交更新接口的模拟操作
在实际开发中前端肯定会遇到一个更新需求,回显数据 => 修改数据 => 请求更新接口这个步骤。
通常建议前端仅传递发生更改的字段,而不是将所有字段都传递给后端。
减少数据传输量: 如果只传递更改了的字段,可以减小数据传输的大小,降低网络开销,特别是在网络条件不理想的情况下更为重要。
提高性能: 传递更改了的字段可以减少后端的处理工作。只处理需要更新的字段可以提高性能,减少数据库操作的负担。
const form = {
a: 1,
b: 2,
c: 3,
d: [1, 2, 3, 4],
e: [{f: 5, g: 6}],
h: {
i: 7,
g: 8
}
}
//修改字段
form.a = 2
form.h.i = 2
form.d[0] = 2
//接口提交params
{
a: 2,
d: [2, 2, 3, 4],
h: {
i: 2
}
}
以下是递归对比原始对象和修改后的对象的函数,返回一个只修改过字段值的对象。
function findObjectChanges(original, modified, path = []) {
if(original instanceof Array && modified instanceof Array) {
if(JSON.stringify(original) !== JSON.stringify(modified)) {
return modified
} else {
return {}
}
}
const changes = {};
for (const key in modified) {
const currentPath = [...path, key];
if (typeof modified[key] === 'object' && modified[key] !== null) {
// 递归比较嵌套对象
const nestedChanges = findObjectChanges(original[key], modified[key], currentPath);
if (Object.keys(nestedChanges).length > 0) {
changes[key] = nestedChanges;
}
} else {
// 比较基本数据类型
if (original[key] !== modified[key]) {
changes[key] = modified[key];
}
}
}
return changes;
}
let form = {} // 定义的form,不管是react的useState定义或者vue的reactive ref定义
const formData = fetchDataApi(...)
//接口数据
{
a: 1,
b: 2,
c: 3,
d: [1, 2, 3, 4],
e: [{f: 5, g: 6}],
h: {
i: 7,
g: 8
}
}
form = JSON.parse(JSON.stringify(formData)) //从接口获取到回显数据,生成新对象
form.a = 2 //模拟vue或者react的form双向绑定更改值的操作
form.h.i = 2
form.d[0] = 2
const formParams = findObjectChanges(formData, form) //递归对比修改了哪些字段
if(JSON.stringify(formParams) === "{}") { //判断是否修改了字段
alert('您还未修改任何数据')
} else {
fetchUpdateApi(formParams) // 请求更新接口
alert('数据已提交')
}