多函数代码重复如何精简？三个生命值条函数优化求助

我完全懂你的感受——写三段几乎一模一样的代码不仅冗余，后期维护起来也麻烦，把它们整合成一个通用函数绝对是正确的思路！

先理清楚核心问题 #

你的三个函数逻辑完全一致，唯一的区别肯定是它们对应的目标生命值条（比如不同的DOM元素、不同的实例对象），我们只需要把这个「差异化的部分」作为参数传入通用函数，就能让它适配所有情况。

举个具体例子（假设你用的是前端场景） #

先模拟一下你原来的重复代码：

// 玩家1的生命值条更新
function updatePlayer1Health(health) {
  const bar = document.getElementById('player1-health');
  bar.style.width = `${health}%`;
  bar.textContent = `${health}/100`;
  health < 30 ? bar.classList.add('danger') : bar.classList.remove('danger');
}

// 玩家2的生命值条更新
function updatePlayer2Health(health) {
  const bar = document.getElementById('player2-health');
  bar.style.width = `${health}%`;
  bar.textContent = `${health}/100`;
  health < 30 ? bar.classList.add('danger') : bar.classList.remove('danger');
}

// 玩家3的生命值条更新
function updatePlayer3Health(health) {
  const bar = document.getElementById('player3-health');
  bar.style.width = `${health}%`;
  bar.textContent = `${health}/100`;
  health < 30 ? bar.classList.add('danger') : bar.classList.remove('danger');
}

改造为通用函数 #

我们把「生命值条的标识（比如ID）」作为参数传进去，核心逻辑完全保留：

// 通用生命值条更新函数
function updateHealthBar(targetId, currentHealth) {
  // 先获取目标元素，避免找不到元素报错
  const healthBar = document.getElementById(targetId);
  if (!healthBar) return;

  // 以下是你原来的核心逻辑，完全不用改
  healthBar.style.width = `${currentHealth}%`;
  healthBar.textContent = `${currentHealth}/100`;
  if (currentHealth < 30) {
    healthBar.classList.add('danger');
  } else {
    healthBar.classList.remove('danger');
  }
}

调用方式 #

现在要更新哪个生命值条，只需要传入对应的ID和生命值就行：

• 更新玩家1：updateHealthBar('player1-health', 85)
• 更新玩家2：updateHealthBar('player2-health', 20)
• 更新玩家3：updateHealthBar('player3-health', 100)

如果有更多差异化需求？ #

如果你的三个生命值条还有其他不同（比如有的低于20才变红，有的用不同的样式类），可以把这些也做成可选参数，让函数更灵活：

function updateHealthBar(targetId, currentHealth, lowThreshold = 30, dangerClass = 'danger') {
  const healthBar = document.getElementById(targetId);
  if (!healthBar) return;

  healthBar.style.width = `${currentHealth}%`;
  healthBar.textContent = `${currentHealth}/100`;
  if (currentHealth < lowThreshold) {
    healthBar.classList.add(dangerClass);
  } else {
    healthBar.classList.remove(dangerClass);
  }
}

// 调用时自定义参数
updateHealthBar('player3-health', 25, 20, 'critical');

核心思路总结 #

通用函数的本质就是把所有「不一样的东西」抽成参数，把「一样的逻辑」留在函数里。你只需要仔细对比三个原函数，找出它们的差异点（比如目标元素、阈值、样式、甚至是数据源），把这些差异做成参数传入，就能完美替代原来的三个函数啦！

内容的提问来源于stack exchange，提问作者13695432