目录

前端仅传递发生更改的字段

为什么

数据举例

递归对比函数

从回显数据到提交更新接口的模拟操作

---

前端仅传递发生更改的字段

在实际开发中前端肯定会遇到一个更新需求，回显数据 => 修改数据 => 请求更新接口这个步骤。

通常建议前端仅传递发生更改的字段，而不是将所有字段都传递给后端。

为什么

减少数据传输量： 如果只传递更改了的字段，可以减小数据传输的大小，降低网络开销，特别是在网络条件不理想的情况下更为重要。

提高性能： 传递更改了的字段可以减少后端的处理工作。只处理需要更新的字段可以提高性能，减少数据库操作的负担。

数据举例

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('数据已提交')
}