用函数有效避免低级数据调试漏洞

2024-02-03 13:17:01

在日常的前端开发业务代码中，我们经常都需要调试数据，所以要经常更改某些参数的初始化数据，或者更改过程中的数据。但是很多时候，改了数据调试完之后就忘记改回去了，某个调试的场景是依赖一个参数的修改还好，但是需要依赖几个参数的修改，就很容易漏改回去了。

一、我们有一个按钮来触发弹窗的函数：

function openPopup(popupId) {
  const popup = document.getElementById(popupId);
  popup.style.display = "block";
}

二、现在我们要在某个场景下修改这个函数，需要把弹出层的宽度改为800px：

function openPopup(popupId) {
  const popup = document.getElementById(popupId);
  popup.style.display = "block";
  popup.style.width = "800px";
}

三、业务逻辑跑通后，我们把参数改回去了：

function openPopup(popupId) {
  const popup = document.getElementById(popupId);
  popup.style.display = "block";
}

但是，我们可能已经忘记了之前修改过什么数据，改回去可能只是改回去了其中几个参数的值。

四、我们现在介绍一种通过函数来避免此类低级错误的方法。

// 定义一个函数来存储需要修改的参数
function modifyData(data, key, value) {
  // 复制一份data对象
  const newData = {...data};
  // 修改newData对象的key对应的值
  newData[key] = value;
  // 返回新的对象
  return newData;
}

// 使用该函数来修改数据
const originalData = {
  width: "600px",
  height: "400px",
  color: "red",
};

const modifiedData = modifyData(originalData, "width", "800px");

console.log(originalData); // { width: "600px", height: "400px", color: "red" }
console.log(modifiedData); // { width: "800px", height: "400px", color: "red" }