D00 JavaScript 实战

本阶段目标：产出三个可复用的实现——组件、表单流程、请求层——每个都附带取舍记录，而不是只能跑一次的示例。

所属：frontend/js / D-实战 ｜ 上一篇：C08-History与前端路由 ｜ 下一篇：D01-组件封装与状态管理 ｜ 返回：科目 README

路线图

三个项目由小到大：单个组件的生命周期与状态 → 表单的校验与异步提交 → 全站共用的请求层。

flowchart TD
    D1["D01 组件封装与状态管理<br/>挂载·更新·销毁"] --> D2["D02 表单校验与异步提交<br/>校验·提交态·错误回填"]
    D2 --> D3["D03 请求层封装<br/>重试·超时·去重·缓存"]

    subgraph P1["单元"]
        D1
    end

    subgraph P2["流程与基础设施"]
        D2
        D3
    end

图 1 实战阶段路线图：D01 建立组件模型，D02 用它承载表单流程，D03 把网络细节收敛到一处

能力对照

能力	对应篇目	自检方式
写出带生命周期的组件	D01	挂载、更新、销毁三个方法齐全，销毁后无残留监听
用订阅机制驱动视图更新	D01	状态变更触发一次渲染，不手工改 DOM
完成可用的表单校验	D02	六类规则均给出字段级提示，焦点落在首个错误字段
处理重复提交与网络失败	D02	连点只提交一次，失败可重试且保留已填内容
封装统一的请求层	D03	超时、重试、去重、错误结构统一，业务代码不碰 fetch
记录并解释技术取舍	全部	每篇附「实施清单 + 决策记录」，能说明两个不选方案的理由

阅读顺序

顺序	篇目	建议时长	必读	产出
1	D01 组件封装与状态管理	80 分钟	是	可挂载与销毁的组件基类
2	D02 表单校验与异步提交	80 分钟	是	校验规则与提交状态机
3	D03 请求层封装	70 分钟	是	统一请求客户端

交付标准

• 三个项目共用一套组件基类，不重复实现挂载与清理。
• 表单错误提示由规则生成，不在提交函数里写分支判断。
• 请求层对外只暴露业务方法，调用方不接触 fetch 与状态码。

阶段出口

• 返回：科目 README
• 术语速查：Z01 术语表
• 下一篇：D01-组件封装与状态管理