替代switch实现CYOA游戏的更高效方案咨询

原代码通过两个独立的switch分支处理左右按钮点击，存在扩展性差、重复逻辑多的问题。可以通过结构化配置+统一逻辑处理的方式重构，让代码更易维护、扩展。

核心优化思路 #

1. 抽离决策规则为结构化配置：把所有选项的跳转关系和结果用对象存储，新增/修改节点只需修改配置，无需改动逻辑代码。
2. 统一点击处理逻辑：不再区分左/右按钮的独立处理函数，用同一个函数根据点击的按钮类型处理逻辑。
3. 状态独立管理：用变量存储当前的选项状态，避免依赖DOM内容判断状态，减少不必要的DOM操作。

重构后的完整代码 #

HTML（优化事件绑定方式）

<div>
  <button class="option optionA">Hot</button>
  <button class="option optionB">Cold</button>
  <button class="reset">Reset</button>
  <p class="result"></p>
</div>

JavaScript

// 获取DOM元素
const optA = document.querySelector(".optionA");
const optB = document.querySelector(".optionB");
const result = document.querySelector(".result");
const resetBtn = document.querySelector(".reset");

// 决策树配置：键是选项文本，值是下一步选项或结果
const decisionConfig = {
  // 初始节点
  Hot: { next: ["Leaf", "Flower"] },
  Cold: { next: ["Alcohol", "Soft"] },
  // 一级分支
  Leaf: { next: ["Pure", "Blend"] },
  Flower: { result: "Sakura" },
  Alcohol: { next: ["Plum", "Rice"] },
  Soft: { next: ["Bacteria", "Soy"] },
  // 二级分支
  Pure: { next: ["Sunlight", "Shade"] },
  Blend: { result: "Genmaicha" },
  Plum: { result: "Umeshu" },
  Rice: { result: "Sake" },
  Bacteria: { next: ["Yeast", "Milk"] },
  Soy: { result: "Soymilk" },
  // 三级分支
  Sunlight: { result: "Sencha" },
  Shade: { result: "Matcha" },
  Yeast: { result: "Kombucha" },
  Milk: { result: "Yakuruto" }
};

// 当前状态：存储左右按钮的文本
let currentState = {
  left: "Hot",
  right: "Cold"
};

// 渲染按钮文本
function renderOptions() {
  optA.textContent = currentState.left;
  optB.textContent = currentState.right;
}

// 处理选项点击
function handleOptionClick(e) {
  // 已有结果时不处理
  if (result.textContent) return;

  const clickedText = e.target.textContent;
  const config = decisionConfig[clickedText];

  if (!config) {
    console.log("无效选项");
    return;
  }

  if (config.result) {
    // 到达结果节点
    result.textContent = config.result;
  } else if (config.next) {
    // 更新状态并渲染新选项
    currentState.left = config.next[0];
    currentState.right = config.next[1];
    renderOptions();
  }
}

// 重置功能
function handleReset() {
  currentState = { left: "Hot", right: "Cold" };
  result.textContent = "";
  renderOptions();
}

// 绑定事件
optA.addEventListener("click", handleOptionClick);
optB.addEventListener("click", handleOptionClick);
resetBtn.addEventListener("click", handleReset);

// 初始化渲染
renderOptions();

代码优势 #

• 扩展性强：新增决策节点只需在decisionConfig里添加对应键值对，不用修改逻辑代码。
• 逻辑统一：所有选项点击用同一个函数处理，消除重复代码。
• 状态清晰：用currentState管理当前选项状态，避免依赖DOM内容判断，逻辑更可靠。
• 维护成本低：决策规则集中存储，修改或排查问题更直观。

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