JavaScript如何精简冗余重复代码 符合前端开发最佳实践

你这段代码的核心冗余问题来自三个方面：重复执行DOM查询、硬编码重复的赋值逻辑、业务规则和DOM操作耦合在一起，后续修改需要改多处重复代码。下面的优化方案完全保留原有业务逻辑：初始化所有复选框为未选中状态，按照normal > disabled > blind > evacuation的优先级匹配第一个真值属性，将对应复选框设为选中状态。

优化后代码 #

// 分类配置映射：属性名 和 对应复选框DOM的id一一对应，后续增删分类只需要修改这里
const CATEGORY_CONFIG = [
  { propKey: 'normal', domId: 'categoryCheckNormal' },
  { propKey: 'disabled', domId: 'categoryCheckDisabled' },
  { propKey: 'blind', domId: 'categoryCheckBlind' },
  { propKey: 'evacuation', domId: 'categoryCheckEvacuation' }
]

// 一次性缓存所有DOM元素，避免重复调用querySelector产生不必要的性能开销
const categoryCheckEls = CATEGORY_CONFIG.map(config => ({
  element: document.querySelector(`#${config.domId}`),
  propKey: config.propKey
}))

// 统一初始化：所有复选框设为未选中
categoryCheckEls.forEach(item => item.element.checked = false)

// 按优先级匹配第一个命中的分类，设置选中状态
const eventProperty = res.eventData.property
const matchedCategory = categoryCheckEls.find(item => eventProperty[item.propKey])
if (matchedCategory) {
  matchedCategory.element.checked = true
}

优化说明 #

• 减少DOM查询开销：原代码最多会执行8次document.querySelector（初始化4次、分支判断最多4次），优化后仅在初始化时执行4次DOM查询，后续操作全部使用缓存的DOM引用，分类数量越多性能优势越明显。
• 配置与逻辑分离：把分类属性和DOM的对应关系抽成独立配置表，后续新增、删除、修改分类时，只需要改动CATEGORY_CONFIG的内容，不需要重复写DOM查询、赋值、条件判断的冗余代码，维护成本大幅降低。
• 逻辑更清晰：去掉了堆叠的if/else if分支，用数组方法find实现优先级匹配，代码意图一目了然，不会出现改漏分支的问题。

适配多选场景的调整 #

如果你的实际业务需求不是「单选互斥、按优先级选第一个」，而是「哪个属性为真就勾选对应复选框、支持多选」，只需要把后面的匹配逻辑替换成下面的代码即可，连初始化步骤都可以合并：

// 多选场景：直接根据属性值设置选中状态，不需要互斥判断
const eventProperty = res.eventData.property
categoryCheckEls.forEach(item => {
  item.element.checked = !!eventProperty[item.propKey]
})

内容的提问来源于stack exchange，提问作者rickbcol_sanalgos.club