JavaScript基础选择题常见的几种写法有什么区别

深入解析单选题组件在实现机制、数据流向、状态收集与工程维护上的四种主流范式。

一、为什么选择题写法会有不同的技术路线？

在许多初学者的认知中，选择题无非就是一组选项被点击后改变背景颜色，最后弹出一个提示框告知对错。然而在实际工程开发中，需求场景有着本质的不同：

• 问卷与表单提交场景：页面上有多道题，用户一次性答完后随着普通表单一起提交到后端数据库，要求极高的无障碍兼容性与简单性。
• 交互练习与即时答题场景：用户点击选项的瞬间，系统就要给出红绿高亮反馈与解析，甚至记录错题本。
• 大型题库与在线考试系统：题目数据全部来自异步接口（JSON），需要频繁上下翻题、倒计时、打乱选项顺序并暂存答题状态。

不同的目标决定了代码从哪一层组织逻辑：究竟是由 HTML 结构主导状态，还是由 JavaScript 内存数据驱动界面。下面我们逐一剖析这四种写法的完整代码与运行机理。

二、写法一：原生表单与单选框绑定（Form + Radio）

原生表单写法直接依托 HTML5 规范中的 <form>、<fieldset> 以及 <input type="radio"> 元素。所有选项按相同的 name 属性分组，由浏览器底层维护单选互斥逻辑。

代码实现示例

<!-- HTML 结构 -->
<form id="quizForm">
  <p>1. typeof null 的返回值是什么？</p>
  <label><input type="radio" name="q1" value="null"> null</label><br>
  <label><input type="radio" name="q1" value="object"> object</label><br>
  <label><input type="radio" name="q1" value="undefined"> undefined</label><br>
  <button type="submit">提交判定</button>
</form>

<script>
  const form = document.getElementById('quizForm');
  const correctAnswer = 'object';

  form.addEventListener('submit', (event) => {
    event.preventDefault(); // 阻止表单整页刷新
    
    // 利用 FormData 接口直接提取选中的 name 字段值
    const formData = new FormData(form);
    const userAnswer = formData.get('q1');

    if (!userAnswer) {
      alert('请先选择一个答案！');
      return;
    }

    if (userAnswer === correctAnswer) {
      alert('回答正确！');
    } else {
      alert('回答错误，正确答案是 object');
    }
  });
</script>

运作机制与核心优缺点

该写法的核心是将“单选互斥”与“选中态记录”全部转交给浏览器原生控件。开发者无需编写任何切换选中样式的 JavaScript 代码，只需在 submit 事件触发时通过 new FormData(form) 批量获取表单数据。

• 优势：代码量极少；天生支持键盘导航（Tab 键切换、方向键选择）和屏幕阅读器等无障碍特性；容错率高。
• 局限：HTML 结构硬编码，题目数量增多时维护困难；难以实现现代 UI 中常见的卡片式平滑动效；不支持题库动态切换与异步加载。

三、写法二：数据驱动与动态渲染（Data-driven State & Template）

现代前端工程（如 React、Vue 或现代原生 JS）最推崇的即是数据驱动模式。页面的 HTML 结构仅仅保留一个空的挂载容器（例如 #quiz-container），题干、选项文本、正确答案与得分状态全部抽离为 JavaScript 纯对象数组。

代码实现示例

<div id="quiz-app"></div>

<script>
// 1. 结构化题目数据集
const quizData = [
  {
    id: 1,
    question: "在 JavaScript 中，声明块级作用域变量应使用哪个关键字？",
    options: ["var", "let", "function", "define"],
    correct: 1
  },
  {
    id: 2,
    question: "下列哪个方法不能用来遍历数组？",
    options: ["forEach", "map", "filter", "push"],
    correct: 3
  }
];

// 2. 状态机管理
let state = {
  currentIndex: 0,
  selectedAnswers: {},
  score: 0
};

const container = document.getElementById('quiz-app');

// 3. 纯函数式视图渲染
function render() {
  const currentQ = quizData[state.currentIndex];
  
  // 检查是否已经答完全部题目
  if (!currentQ) {
    container.innerHTML = `<h3>测验结束！最终得分：${state.score} / ${quizData.length}</h3>`;
    return;
  }

  const selectedIdx = state.selectedAnswers[state.currentIndex];

  container.innerHTML = `
    <div class="question-card">
      <p class="progress">第 ${state.currentIndex + 1} 题 / 共 ${quizData.length} 题</p>
      <h3>${currentQ.question}</h3>
      <div class="options-group">
        ${currentQ.options.map((opt, idx) => `
          <button class="option-btn ${selectedIdx === idx ? 'active' : ''}" 
                  onclick="handleSelect(${idx})">
            ${opt}
          </button>
        `).join('')}
      </div>
      <button class="next-btn" onclick="handleNext()" ${selectedIdx === undefined ? 'disabled' : ''}>
        ${state.currentIndex === quizData.length - 1 ? '完成交卷' : '下一题'}
      </button>
    </div>
  `;
}

// 4. 用户动作分发
window.handleSelect = function(optionIndex) {
  state.selectedAnswers[state.currentIndex] = optionIndex;
  render(); // 状态改变，重新渲染
};

window.handleNext = function() {
  const currentQ = quizData[state.currentIndex];
  if (state.selectedAnswers[state.currentIndex] === currentQ.correct) {
    state.score += 1;
  }
  state.currentIndex += 1;
  render();
};

// 初始化首题
render();
</script>

运作机制与核心优缺点

数据驱动写法的本质是 View = f(State)。当用户选择答案或点击下一题时，代码只更新内存中的 state 变量，然后调用 render() 方法重新生成视图。

• 优势：业务逻辑与 DOM 彻底解耦；无论题库有 10 道还是 1000 道题，页面结构始终保持简洁；天然支持题目乱序（Shuffle）、题库远程拉取与历史状态回退。
• 局限：对于简单的单个选择题而言，配置状态和重绘模板的代码结构稍显冗长；若频繁全量更新 innerHTML，可能引起轻微闪烁或需要进行局部 DOM Diff 优化。

四、写法三：容器事件委托即时反馈（Event Delegation & Instant Feedback）

在很多在线刷题或博客知识卡片中，读者希望“一点选项立刻知道对错”，并不需要繁琐的提交表单或跳转下一题。此时，采用事件委托（Event Delegation）是极其轻巧高效的写法。

代码实现示例

<!-- 静态预置结构，借助 HTML5 data-* 自定义属性标明答案 -->
<div class="quiz-box" data-correct="2">
  <p class="title">NaN === NaN 的比较结果是：</p>
  <ul class="option-list">
    <li class="item" data-index="0">A. true</li>
    <li class="item" data-index="1">B. undefined</li>
    <li class="item" data-index="2">C. false</li>
    <li class="item" data-index="3">D. 抛出 TypeError</li>
  </ul>
  <div class="feedback"></div>
</div>

<script>
const quizBox = document.querySelector('.quiz-box');
const optionList = quizBox.querySelector('.option-list');
const feedback = quizBox.querySelector('.feedback');
const correctIndex = Number(quizBox.dataset.correct);
let answered = false;

// 仅在父容器绑定单个 click 监听器
optionList.addEventListener('click', (event) => {
  if (answered) return; // 已答题则锁定

  // 寻找被点击的 li 选项节点
  const targetItem = event.target.closest('.item');
  if (!targetItem || !optionList.contains(targetItem)) return;

  const chosenIndex = Number(targetItem.dataset.index);
  answered = true;

  if (chosenIndex === correctIndex) {
    targetItem.classList.add('status-correct');
    feedback.textContent = '回答正确！在 JS 中 NaN 与任何值都不相等，包括自身。';
    feedback.style.color = '#586B59';
  } else {
    targetItem.classList.add('status-wrong');
    // 高亮出正确选项
    const correctItem = optionList.querySelector(`[data-index="${correctIndex}"]`);
    if (correctItem) correctItem.classList.add('status-correct');
    feedback.textContent = '回答错误。NaN 与任何值比较均为 false。';
    feedback.style.color = '#B94A48';
  }
});
</script>

运作机制与核心优缺点

该写法利用了 DOM 事件的冒泡机制（Bubbling）。我们不需要给每个选项 <li> 单独 addEventListener，而是把事件监听器收敛在父级 <ul> 上，通过 event.target.closest('.item') 获取被点节点与 dataset.index。

• 优势：内存占用极低；若列表项动态增删，无需重新绑定事件；即时反馈极度顺畅，非常适合单题随堂检测。
• 局限：答案索引通常暴露在 DOM 的 data-correct 或脚本变量中，前端易被审查查看；跨题状态汇总结算较为别扭。

五、写法四：面向对象与模块化封装（Class / OOP Encapsulation）

当选择题需要作为可复用组件发布到企业组件库，或者需要支持倒计时、多选切换、计分权重等复杂策略时，基于 ES6 class 或闭包模块化封装是标准答案。

代码实现示例

class MultipleChoiceQuiz {
  // 私有字段，防止外部直接篡改当前题目内部状态
  #container;
  #questionData;
  #userSelection = null;
  #onComplete;

  constructor({ containerId, data, onComplete }) {
    this.#container = document.getElementById(containerId);
    this.#questionData = data;
    this.#onComplete = onComplete;
    this.render();
  }

  // 渲染组件骨架
  render() {
    this.#container.innerHTML = `
      <div class="quiz-component-card">
        <h4>${this.#questionData.title}</h4>
        <div class="comp-options">
          ${this.#questionData.options.map((opt, i) => `
            <div class="comp-opt-item" data-idx="${i}">${opt}</div>
          `).join('')}
        </div>
        <button class="comp-confirm-btn" disabled>确认答案</button>
      </div>
    `;
    this.bindEvents();
  }

  // 绑定内部交互事件
  bindEvents() {
    const optionsWrap = this.#container.querySelector('.comp-options');
    const confirmBtn = this.#container.querySelector('.comp-confirm-btn');

    optionsWrap.addEventListener('click', (e) => {
      const item = e.target.closest('.comp-opt-item');
      if (!item) return;

      // 切换选中高亮
      optionsWrap.querySelectorAll('.comp-opt-item').forEach(el => el.classList.remove('selected'));
      item.classList.add('selected');

      this.#userSelection = Number(item.dataset.idx);
      confirmBtn.disabled = false;
    });

    confirmBtn.addEventListener('click', () => {
      const isCorrect = this.#userSelection === this.#questionData.correctIndex;
      confirmBtn.disabled = true;
      if (typeof this.#onComplete === 'function') {
        this.#onComplete({
          questionId: this.#questionData.id,
          userSelection: this.#userSelection,
          isCorrect
        });
      }
    });
  }

  // 组件销毁机制，防范内存泄露
  destroy() {
    this.#container.innerHTML = '';
    this.#userSelection = null;
  }
}

// 使用实例
const questionInstance = new MultipleChoiceQuiz({
  containerId: 'quiz-slot',
  data: {
    id: 'js-001',
    title: '以下哪项属于 JavaScript 的基本原始类型（Primitive）？',
    options: ['Object', 'Symbol', 'Array', 'Date'],
    correctIndex: 1
  },
  onComplete: (result) => {
    console.log('用户答题结果通知：', result);
  }
});

运作机制与核心优缺点

面向对象写法将“数据挂载”、“交互绑定”、“答案判决”与“生命周期销毁”高度封装在单个类内部。通过 # 私有字段确保外部无法直接篡改数据，同时通过回调函数（onComplete）与外部宿主系统解耦。

• 优势：封装性与内聚性最高；具备完整的生命周期（构造与销毁）；方便多实例并存与单元测试（Unit Test）。
• 局限：对于简单的教学演示而言较为冗长，存在一定的概念理解成本。

六、四种写法的核心差异多维对比

理解这些写法之间的区别，不仅要看代码长短，更要看它们在系统架构上的取舍。下方的矩阵图详细列出了四者在 DOM 耦合度、状态追踪、动态题库适配与维护成本等核心指标上的区别。

从以上对比可以清晰得出以下四项关键差异机制：

1. 数据与表现层的耦合程度：表单原生写法与事件委托写法严重依赖既有的 HTML 标签与属性，一旦页面 DOM 结构变更，脚本往往需要同步调整。而数据驱动与面向对象写法以 JavaScript 数据结构为中心，视图只是数据的渲染产物，表现层与数据层解耦极其彻底。
2. 状态的存放地点：表单写法把状态存在 DOM 的 checked 属性上；事件委托常把状态记录在标签的 class 上；而数据驱动和类封装将状态记录在内存中的 JavaScript 变量和私有字段中，避免了“先从 DOM 读取、再转换类型、再判定”的繁琐步骤。
3. 多题批量切换与题库扩展：表单和事件委托写单题非常快，但在实现“上一题 / 下一题 / 答题卡卡片跳转”时极其笨拙；数据驱动只需改变一个整型索引 currentIndex，即可瞬间无感换题。
4. 事件监听与内存开销：事件委托和类封装能精简监听器数量；如果在长列表中为每个单选按钮都挂载单独的事件监听器，在题量较大时容易带来不必要的内存开销。

七、如何根据实际场景进行选型？

技术选型没有绝对的优劣，只有与业务需求的契合度。根据具体的开发场景，可以依照下方的决策路径图快速锁定最合理的写法。

八、实践中的高频易错点与注意事项

在开发或重构选择题交互时，初学者经常会陷入以下几个技术陷阱：

• 类型转换隐患：使用 data-index 自定义属性时，从 element.dataset.index 取出的值永远是字符串（string）。如果在与数字类型的正确答案比较时误用了全等号（===），会导致如 "0" === 0 判定为 false 的致命 Bug。务必使用 Number() 或正号（+）先行转为数字。
• 事件监听器的重复绑定与内存泄漏：在数据驱动渲染中，如果每次 render() 都在内部给外部 DOM 节点添加 addEventListener，切题多次后同一个按钮会被重复触发多次，造成逻辑混乱和内存占用激增。务必采用内联事件驱动、委托监听或在组件重新挂载时做好清理。
• 前端校验的防篡改边界：如果题目涉及正式考试、资格认证或积分奖励，切忌把正确答案明文写在前端 DOM 的 data-correct 属性中。前端应仅负责收集用户的选择标识（例如 optionId），最终判卷必须在受信的后端服务器完成。

结语

JavaScript 基础选择题的几种常见写法，实质上体现了前端技术从“早期直接操作 DOM”向“现代数据驱动与组件封装”的思维进阶。表单模式胜在原生与稳定，委托模式胜在轻便与直观，数据驱动胜在通用与灵活，而模块封装胜在严密与工程化。在开发时厘清这几种写法的区别，能够帮助我们在面对不同体量、不同交互深度的业务需求时，写出更高效、更具维护性的高质量代码。