32

JavaScript 交互与状态

⏱️ 22分钟

JavaScript 交互：给页面加上行为

模块目标

让静态页面具备真实交互能力，并能稳定维护。

交互开发三步法

明确触发点（谁触发）
明确状态变化（改了什么）
明确反馈输出（用户看到什么）

常见交互场景

按钮点击反馈
表单校验与提示
列表筛选与排序
弹窗开关与状态同步

避免“事件地狱”的建议

每个事件处理器只做一件事
把重复逻辑抽成函数
用清晰命名表达行为意图

本模块 Lab 练习建议

做 JavaScript Lab 时，不只看“通过验证”，还要回答：

这段逻辑是否可复用？
状态是否单一来源？
出错时用户是否能理解？

迁移任务

用原生 JS 完成一个小交互组件（如待办列表）：

新增
删除
状态切换

并写 3 条你自己的“可维护性规则”。