如何避免重复代码，简化点击事件中的DOM类操作？

这问题太常见啦！你说得对，两段代码核心逻辑完全一致，只是调用的类操作方法不同——一个是toggle，一个是remove，完全可以把重复的逻辑抽出来，用DRY原则让代码更简洁好维护。

具体实现步骤： #

1. 先把需要操作的元素和对应的类名整理成一个配置数组，后续要新增/修改元素或类时，只需要改这里就行：

// 定义需要操作的元素与对应类名的映射
const navClassTargets = [
  { element: body, classNames: ['nav-body-is-open', 'bg-overlay'] },
  { element: navigationHamburger, classNames: ['active'] },
  { element: navigationMenu, classNames: ['nav--open'] }
];

2. 写一个通用的工具函数，接受操作类型（toggle/remove），批量处理所有元素的类：

// 通用导航类操作函数
const handleNavClasses = (action) => {
  navClassTargets.forEach(({ element, classNames }) => {
    classNames.forEach(cls => element.classList[action](cls));
  });
};

3. 改造原来的两个事件监听器，直接调用这个通用函数就行：

const onNavOpen = e => {
  e.preventDefault();
  handleNavClasses('toggle');
};

const onNavClose = e => {
  e.preventDefault();
  if (body.classList.contains('nav-body-is-open') && e.keyCode === 27) {
    handleNavClasses('remove');
  }
};

为什么这个方案更好？ #

• 完全符合DRY原则：把重复的类操作逻辑集中到一个函数里，再也不用在两个地方写几乎一样的代码
• 可维护性拉满：以后如果要新增一个需要同步操作的元素/类，或者修改现有类名，只需要更新navClassTargets数组，不用动事件处理函数
• 代码更简洁清晰：事件函数只保留核心逻辑（阻止默认行为、判断关闭条件），类操作的细节都封装到工具函数里，可读性更高

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