如何精简重复的JavaScript代码以提升可读性？

针对你这段重复率很高的代码，我们可以通过提取通用逻辑的方式彻底精简，完全符合DRY（Don't Repeat Yourself）原则：

第一步：提取通用方法 #

先把重复的hide/show和load逻辑单独抽出来：

// 根据目标元素名称，生成包含hide/show的基础控制对象
const createBaseControls = (targetName) => ({
  hide: () => {
    this[targetName].style.display = 'none';
  },
  show: () => {
    this[targetName].style.display = 'block';
  }
});

// 通用的load方法，只写一次
const loadRes = (res) => {
  this.dataset.res = res;
};

第二步：构建精简后的ctrl对象 #

用上面的通用方法来组装最终的ctrl，避免重复代码：

ctrl = {
  dataHolder: createBaseControls('dataHolderTarget'),
  dataBtnHolder: createBaseControls('dataBtnHolderTarget'),
  playerOneBtn: {
    ...createBaseControls('playerOneBtnTarget'),
    load: loadRes
  },
  playerTwoBtn: {
    ...createBaseControls('playerTwoBtnTarget'),
    load: loadRes
  }
};

进阶优化：用配置批量生成（可选） #

如果后续还要新增更多类似控件，可以用配置数组批量生成，维护起来更省心：

// 配置列表：每个项定义控件的key、目标元素名，以及是否需要load方法
const controlsConfig = [
  { key: 'dataHolder', target: 'dataHolderTarget' },
  { key: 'dataBtnHolder', target: 'dataBtnHolderTarget' },
  { key: 'playerOneBtn', target: 'playerOneBtnTarget', hasLoad: true },
  { key: 'playerTwoBtn', target: 'playerTwoBtnTarget', hasLoad: true }
];

// 批量生成ctrl对象
const ctrl = {};
controlsConfig.forEach(item => {
  ctrl[item.key] = createBaseControls(item.target);
  if (item.hasLoad) {
    ctrl[item.key].load = loadRes;
  }
});

这样改造后，所有重复的逻辑都只写一次，代码量大大减少，后续修改或新增控件也只需要调整配置或通用方法，不用重复复制粘贴代码。

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