如何优化我的JavaScript重复代码使其符合DRY原则？

嘿，我完全懂你从PHP转JavaScript时的那种别扭感——动态变量在JS里确实不是PHP那套玩法，但咱们可以用更符合JS风格的方式来干掉这些重复代码，完美贴合DRY（Don't Repeat Yourself）原则！

先看看你原来的代码（确实重复得让人头大😂）：

document.getElementById("colorpicker01").onchange = function() {myFunction01()}; 
function myFunction01() { hexinput01.value = colorpicker01.value;} 
document.getElementById("colorpicker02").onchange = function() {myFunction02()}; 
function myFunction02() { hexinput02.value = colorpicker02.value;} 
document.getElementById("colorpicker03").onchange = function() {myFunction03()}; 
function myFunction03() { hexinput03.value = colorpicker03.value;} 
document.getElementById("colorpicker04").onchange = function() {myFunction04()}; 
function myFunction04() { hexinput04.value = colorpicker04.value;} 
document.getElementById("colorpicker05").onchange = function() {myFunction05()}; 
function myFunction05() { hexinput05.value = colorpicker05.value;} 
document.getElementById("colorpicker06").onchange = function() {myFunction06()}; 
function myFunction06() { hexinput06.value = colorpicker06.value;} 
document.getElementById("colorpicker07").onchange = function() {myFunction07()}; 
function myFunction07() { hexinput07.value = colorpicker07.value;} 
document.getElementById("colorpicker08").onchange = function() {myFunction08()}; 
function myFunction08() { hexinput08.value = colorpicker08.value;} 
document.getElementById("colorpicker09").onchange = function() {myFunction09()}; 
function myFunction09() { hexinput09.value = colorpicker09.value;} 
document.getElementById("colorpicker10").onchange = function() {myFunction10()}; 
function myFunction10() { hexinput10.value = colorpicker10.value;} 

下面给你两种优化方案，按需选择：

方案一：利用循环批量绑定事件 #

这种方式和你PHP里用for循环的思路最接近，通过遍历编号来批量处理所有元素：

// 循环遍历1到10的编号
for (let i = 1; i <= 10; i++) {
  // 把数字格式化成两位数（比如1变成"01"），匹配你的元素ID规则
  const num = i.toString().padStart(2, '0');
  // 获取对应的颜色选择器和输入框
  const colorPicker = document.getElementById(`colorpicker${num}`);
  const hexInput = document.getElementById(`hexinput${num}`);
  
  // 直接绑定change事件，回调里完成赋值逻辑，不用单独定义一堆函数
  colorPicker.addEventListener('change', function() {
    hexInput.value = this.value;
  });
}

这里用addEventListener代替直接赋值onchange，比原来的写法更灵活，还能避免不小心覆盖元素上已有的其他事件绑定。

方案二：事件委托（更适合动态场景） #

如果以后你可能会动态新增颜色选择器（比如用JS添加colorpicker11、colorpicker12），事件委托会是更省心的选择——不用给每个新元素单独绑定事件，把事件绑定到它们的父容器即可：

首先假设所有colorpicker和hexinput都放在同一个父容器里，比如<div id="color-container">，然后代码可以写成：

// 获取父容器元素
const colorContainer = document.getElementById('color-container');

// 给父容器绑定change事件
colorContainer.addEventListener('change', function(e) {
  // 判断触发事件的是不是我们的colorpicker元素
  if (e.target.id.startsWith('colorpicker')) {
    // 从colorpicker的ID里提取编号部分
    const num = e.target.id.replace('colorpicker', '');
    // 找到对应的hex输入框
    const hexInput = document.getElementById(`hexinput${num}`);
    // 把颜色值赋值给输入框
    hexInput.value = e.target.value;
  }
});

这种方式的优势在于，后续新增的colorpicker元素会自动继承这个事件处理逻辑，不用再修改绑定代码，维护成本更低。

核心思路 #

两种方案都是把重复的逻辑（事件绑定、值同步）抽成了通用代码，只写一次就能处理所有元素，彻底告别复制粘贴的重复代码，完美符合DRY原则。

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