如何将多段重复的JavaScript函数改写为单个函数？

你可以把重复的逻辑抽成一个接受目标编号作为参数的通用函数，彻底替代原来的6个重复函数：

基础通用函数写法 #

function updateDemo(targetNumber) {
  // 先获取目标元素，避免重复调用querySelector
  const demoElement = document.querySelector("#demo");
  const sourceElement = document.querySelector(`#demo${targetNumber}`);
  
  // 加个判断，防止找不到元素时出现报错
  if (sourceElement) {
    demoElement.innerHTML = sourceElement.innerHTML;
  }
}

使用方式 #

原来调用myFunction1()的地方直接改成updateDemo(1)，调用myFunction2()改成updateDemo(2)，以此类推，完全兼容原有逻辑。

更优雅的事件绑定写法（推荐） #

如果这些函数是绑定在按钮等触发元素上的，可以用事件委托进一步简化，不用单独给每个元素绑定函数：

1. 先给触发按钮添加自定义属性，标记对应的目标编号：

<button data-demo-target="1">加载demo1内容</button>
<button data-demo-target="2">加载demo2内容</button>
<button data-demo-target="3">加载demo3内容</button>
<!-- ... 其余按钮同理 -->

2. 写一个全局事件监听函数：

document.addEventListener('click', function(e) {
  // 从点击元素上获取目标编号
  const targetNum = e.target.dataset.demoTarget;
  if (!targetNum) return; // 不是目标按钮就直接返回

  const demoElement = document.querySelector("#demo");
  const sourceElement = document.querySelector(`#demo${targetNum}`);
  
  if (sourceElement) {
    demoElement.innerHTML = sourceElement.innerHTML;
  }
});

这种写法不管你有多少个目标元素，都只需要这一段代码，后续新增元素也不用改JS，只需要加对应属性的按钮即可。

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