JavaScript 代码重构：实现简洁高效的表单验证逻辑

本教程旨在指导开发者如何通过代码重构，将重复的表单验证逻辑转化为简洁、可维护且可扩展的模式。我们将利用数据驱动的设计思想和事件委托机制，消除冗余代码，并通过将配置信息抽象为数据结构，以及封装通用操作为独立函数，大幅提升代码的可读性和复用性，从而优化前端交互体验。

在前端开发中，处理表单交互是常见的任务。然而，当页面中存在多个相似的交互元素时，如果不加以优化，很容易导致代码重复、难以维护和扩展。本教程将以一个具体的表单验证场景为例，演示如何通过一系列重构技术，将冗余的JavaScript代码转化为高效、简洁且易于管理的代码结构。

初始代码分析与问题识别

考虑以下场景：页面上有多个输入框和对应的提交按钮，每个按钮点击后都需要验证其对应输入框的值，并根据验证结果更新页面元素的显示状态或文本内容。

原始的JavaScript代码可能如下所示：

const an1 = document.getElementById("an1");
const bt1 = document.getElementById("bt1");

bt1.addEventListener("click", () => {
  if (an1.value.toLowerCase() === "test") {
    document.getElementById("bt1").style.display = "none";
    document.getElementById("an1").style.display = "none";
    document.getElementById("wo1").style.display = "initial";
  } else {
    bt1.innerText = "Wrong!";
    document.getElementById("bt1").style.background = "red";
  }
});

const an2 = document.getElementById("an2");
const bt2 = document.getElementById("bt2");

bt2.addEventListener("click", () => {
  if (an2.value.toLowerCase() === "test1") {
    document.getElementById("bt2").style.display = "none";
    document.getElementById("an2").style.display = "none";
    document.getElementById("wo2").style.display = "initial";
  } else {
    bt2.innerText = "Wrong!";
    document.getElementById("bt2").style.background = "red";
  }
});

对应的HTML结构：

立即学习“Java免费学习笔记（深入）”；

  testSubmit
  test


  test1Submit
  test1

这段代码存在以下主要问题：

1. 代码重复（DRY原则违背）: 针对每个输入框和按钮，几乎完全相同的逻辑被复制粘贴。
2. 难以维护: 如果需要修改验证逻辑或UI更新方式，必须在多处进行修改。
3. 可扩展性差: 每增加一个验证对，都需要手动添加新的JavaScript代码块。
4. 效率问题: 为每个按钮单独添加事件监听器，可能在元素数量多时影响性能。

重构策略与实现步骤

为了解决上述问题，我们将采用以下重构策略：

1. 数据驱动设计: 将验证规则和UI更新配置抽象为数据结构。
2. 事件委托: 利用事件冒泡机制，在父元素上统一处理子元素的事件。
3. 函数封装: 将重复的操作封装成独立的、可复用的函数。

1. 优化HTML结构以支持事件委托

首先，我们需要一个共同的父元素来承载所有相关的交互组件，并为其赋予一个ID，以便于进行事件委托。例如，将所有行包裹在一个

2. 抽象配置数据

将每个验证对的预期答案和成功验证后需要改变显示状态的元素列表抽象为JavaScript数组对象。

MagicArena

字节跳动推出的视觉大模型对战平台

下载

// 定义每个输入框的预期答案
const expectedElementAnswer = [
  { id: 'an1', expectAns: 'test' },
  { id: 'an2', expectAns: 'test1' }
];

// 定义成功验证后需要改变显示状态的元素及其目标状态
const btnElementList = [
  [{ id: 'bt1', displayValue: 'none' },{ id: 'an1', displayValue: 'none' }, { id: 'wo1', displayValue: 'initial' }],
  [{ id: 'bt2', displayValue: 'none' }, { id: 'an2', displayValue: 'none' }, { id: 'wo2', displayValue: 'initial' }]
];

通过这种方式，我们可以轻松地添加或修改验证字段，而无需修改核心逻辑。

3. 封装通用操作为辅助函数

将获取元素值、设置元素显示样式和设置错误警告等操作封装为独立的函数，提高代码复用性。

/**
 * 获取指定ID元素的value属性值。
 * @param {string} id - 元素的ID。
 * @returns {string} 元素的value值，如果元素不存在则返回空字符串。
 */
function getElementValue(id) {
  const value = document.getElementById(id)?.value || '';
  return value;
}

/**
 * 设置指定ID元素的display样式。
 * @param {string} displayId - 元素的ID。
 * @param {string} value - display样式的值（如 'none', 'initial', 'block'）。
 */
function setDisplayStyle(displayId, value) {
  const element = document.getElementById(displayId);
  if (element) {
    element.style.display = value;
  }
}

/**
 * 根据配置列表改变一组元素的display样式。
 * @param {number} idx - btnElementList 数组的索引。
 */
function changeDisplayStyles(idx) {
  if (btnElementList[idx]) {
    btnElementList[idx].forEach(({ id, displayValue }) => {
      setDisplayStyle(id, displayValue);
    });
  }
}

/**
 * 设置指定ID元素的错误警告样式和文本。
 * @param {string} displayId - 元素的ID。
 * @param {string} [bgColor='red'] - 背景颜色。
 * @param {string} [text='Wrong!'] - 警告文本。
 */
function setErrorWarning(displayId, bgColor = 'red', text = 'Wrong!') {
  const element = document.getElementById(displayId);
  if (element) {
    element.innerText = text;
    element.style.background = bgColor;
  }
}

4. 实现事件委托与核心逻辑

在父元素上添加一个事件监听器，通过判断事件目标（event.target）的ID来执行相应的验证逻辑。

document.getElementById('myTable').addEventListener('click', (event) => {
  const curElemetId = event.target.id;
  let btnIndex = -1; // 用于标识是哪个按钮被点击

  // 根据点击的按钮ID确定其对应的配置索引
  if (curElemetId === 'bt1') {
    btnIndex = 0; // 对应 expectedElementAnswer[0] 和 btnElementList[0]
  } else if (curElemetId === 'bt2') {
    btnIndex = 1; // 对应 expectedElementAnswer[1] 和 btnElementList[1]
  }

  // 如果是预期的按钮被点击
  if (btnIndex !== -1) {
    const { id: inputId, expectAns } = expectedElementAnswer[btnIndex];

    // 获取输入框的值并进行验证
    if (getElementValue(inputId).toLowerCase() === expectAns) {
      changeDisplayStyles(btnIndex); // 验证成功，改变相关元素的显示状态
    } else {
      setErrorWarning(curElemetId); // 验证失败，显示错误警告
    }
  }
});

请注意，在原始的答案中 btnIndex 是 1 和 2，但在 JavaScript 数组中索引是从 0 开始的，因此在实际使用时需要进行调整，或者直接将 btnIndex 设置为数组的实际索引（0 或 1）。这里已修正为 0 和 1。

完整重构代码

整合上述所有部分，得到最终的重构代码：

// 定义每个输入框的预期答案及其对应的ID
const expectedElementAnswer = [
  { id: 'an1', expectAns: 'test' },
  { id: 'an2', expectAns: 'test1' }
];

// 定义成功验证后需要改变显示状态的元素及其目标状态
// 每个子数组对应一个验证对，包含需要操作的元素ID和目标display值
const btnElementList = [
  [{ id: 'bt1', displayValue: 'none' },{ id: 'an1', displayValue: 'none' }, { id: 'wo1', displayValue: 'initial' }],
  [{ id: 'bt2', displayValue: 'none' }, { id: 'an2', displayValue: 'none' }, { id: 'wo2', displayValue: 'initial' }]
];

/**
 * 获取指定ID元素的value属性值。
 * @param {string} id - 元素的ID。
 * @returns {string} 元素的value值，如果元素不存在则返回空字符串。
 */
function getElementValue(id) {
  const element = document.getElementById(id);
  return element ? element.value || '' : '';
}

/**
 * 设置指定ID元素的display样式。
 * @param {string} displayId - 元素的ID。
 * @param {string} value - display样式的值（如 'none', 'initial', 'block'）。
 */
function setDisplayStyle(displayId, value) {
  const element = document.getElementById(displayId);
  if (element) {
    element.style.display = value;
  }
}

/**
 * 根据配置列表改变一组元素的display样式。
 * @param {number} idx - btnElementList 数组的索引，对应要操作的元素组。
 */
function changeDisplayStyles(idx) {
  if (btnElementList[idx]) {
    btnElementList[idx].forEach(({ id, displayValue }) => {
      setDisplayStyle(id, displayValue);
    });
  }
}

/**
 * 设置指定ID元素的错误警告样式和文本。
 * @param {string} displayId - 元素的ID。
 * @param {string} [bgColor='red'] - 背景颜色。
 * @param {string} [text='Wrong!'] - 警告文本。
 */
function setErrorWarning(displayId, bgColor = 'red', text = 'Wrong!') {
  const element = document.getElementById(displayId);
  if (element) {
    element.innerText = text;
    element.style.background = bgColor;
  }
}

// 使用事件委托，在父元素上监听点击事件
document.getElementById('myTable').addEventListener('click', (event) => {
  const clickedElementId = event.target.id;
  let configIndex = -1; // 用于确定点击的按钮对应哪个配置项

  // 根据点击的按钮ID，查找其在配置数组中的索引
  // 这里的逻辑可以进一步优化，例如使用一个映射对象
  if (clickedElementId === 'bt1') {
    configIndex = 0;
  } else if (clickedElementId === 'bt2') {
    configIndex = 1;
  }

  // 如果点击的是我们关注的按钮
  if (configIndex !== -1) {
    const { id: inputId, expectAns } = expectedElementAnswer[configIndex];

    // 获取输入框的值并进行验证
    if (getElementValue(inputId).toLowerCase() === expectAns) {
      changeDisplayStyles(configIndex); // 验证成功，根据配置改变元素样式
    } else {
      setErrorWarning(clickedElementId); // 验证失败，显示错误警告
    }
  }
});

注意事项与最佳实践

1. 错误处理: 在 getElementById 后进行空值检查 (element ? ... : '') 是一个好习惯，可以避免在元素不存在时抛出错误。
2. 更灵活的配置: 对于 btnIndex 的确定，可以使用一个映射对象 { 'bt1': 0, 'bt2': 1 } 来替代 if-else if 链，使代码更简洁，也更易于扩展。
3. 数据属性: 对于更复杂的场景，可以考虑在HTML元素上使用 data-* 属性来存储配置信息，例如 data-target-input="an1"，这样JavaScript代码可以直接从DOM读取配置，无需维护单独的JavaScript配置数组。
4. 可访问性 (Accessibility): 在隐藏或显示元素时，除了改变 display 样式，还应考虑使用 aria-hidden 属性或改变焦点管理，以确保屏幕阅读器用户也能获得良好的体验。
5. 性能: 事件委托在处理大量相似元素时表现优异，因为它只需要一个事件监听器。
6. 通用性: 上述重构模式可以推广到任何具有重复交互逻辑的场景，例如列表项的删除、编辑操作等。

总结

通过本教程的实践，我们成功地将一段重复且难以维护的JavaScript代码重构为简洁、高效且可扩展的模式。核心思想在于：

• 将变化的部分抽象为数据：利用数组和对象存储配置信息。
• 将重复的操作封装为函数：提高代码复用性。
• 利用事件委托处理事件：提高性能和代码的集中性。

这种数据驱动和模块化的开发方式不仅提升了代码质量，也为未来的功能扩展和维护奠定了坚实的基础。