衡水哪儿做wap网站,广告英语,武夷山景区网站建设特点,企业微信手机片网站制作目录 前端仅传递发生更改的字段
为什么
数据举例
递归对比函数
从回显数据到提交更新接口的模拟操作 前端仅传递发生更改的字段
在实际开发中前端肯定会遇到一个更新需求#xff0c;回显数据 修改数据 请求更新接口这个步骤。
通常建议前端仅传递发生更改的字…目录 前端仅传递发生更改的字段
为什么
数据举例
递归对比函数
从回显数据到提交更新接口的模拟操作 前端仅传递发生更改的字段
在实际开发中前端肯定会遇到一个更新需求回显数据 修改数据 请求更新接口这个步骤。
通常建议前端仅传递发生更改的字段而不是将所有字段都传递给后端。
为什么
减少数据传输量 如果只传递更改了的字段可以减小数据传输的大小降低网络开销特别是在网络条件不理想的情况下更为重要。
提高性能 传递更改了的字段可以减少后端的处理工作。只处理需要更新的字段可以提高性能减少数据库操作的负担。
数据举例
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] 2const formParams findObjectChanges(formData, form) //递归对比修改了哪些字段if(JSON.stringify(formParams) {}) { //判断是否修改了字段alert(您还未修改任何数据)
} else {fetchUpdateApi(formParams) // 请求更新接口alert(数据已提交)
}
