交互里程碑

checkpoint-interactivity 验证你是否能用 JavaScript 直接操作 DOM：选元素、绑事件、增删节点、改 class、调 fetch、写 localStorage。它是 fsm-frontend 的「交互深度版」——不必上框架，但必须证明浏览器端状态与用户输入闭环。与 react-essentials 的关系：React 把这些模式封装成组件与 state；先 vanilla 再框架，排查 bug 时更从容。

学习目标

• 对照 /roadmaps/full-stack checkpoint-interactivity，完成带 增删改查 + 搜索 的 Todo 或 GitHub 资料页，数据存 localStorage
• 掌握事件委托、表单 submit 阻止默认行为、基础输入校验与错误提示
• 将项目规范与 fsm-collab 对齐：README、截图、许可证，并链接 fullstack-roadmap 节点

路线图技能核对

• 变量、循环、条件、函数；数组与对象访问
• querySelector / querySelectorAll；addEventListener（click、input、submit）
• 创建/删除 DOM；classList.add/remove/toggle
• fetch + async/await；localStorage.setItem/getItem

推荐练习：Todo + 搜索

const STORAGE_KEY = "todos";

function loadTodos() {
  return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "[]");
}

function saveTodos(items) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const title = input.value.trim();
  if (!title) return showError("标题不能为空");
  // push, save, render
});

搜索：监听 input 事件，过滤内存数组后重绘列表，而非隐藏 DOM 节点（便于以后接 API 分页）。

推荐练习：GitHub 用户卡片

输入 username → fetch('https://api.github.com/users/' + name) → 渲染 avatar、bio、public_repos。需处理 404（用户不存在）与 rate limit（未认证 60 次/小时）。可加简单 debounce 避免连击请求。

与后端/API 里程碑的桥梁

localStorage Todo 的下一迭代：把 saveTodos 换成 POST spring-boot-essentials REST API，即 fsm-complete 的前奏。Fetch 错误处理模式（try/catch、HTTP status）与后端联调时完全一致。

可访问性与 UX 最低线

• 按钮用 <button type="button">，表单控件有 <label>
• 删除前 confirm 或 inline 二次确认
• 空状态文案：「暂无待办，添加一条吧」

练习

• 实现 Todo 或 GitHub 查询页，满足 Checkpoint 功能列表，数据或远程 API 二选一
• 至少三种事件类型（如 click、input、submit）有实际用途
• 在 /roadmaps/full-stack 勾选 checkpoint-interactivity，README 说明如何运行

小结

交互里程碑 = DOM + 事件 + 存储/API。 它是 React 之前的必修课，也是全栈产品「手感」的来源。下一课 自动化里程碑 用 Ansible 把部署从 SSH 手工解放出来。