从单文件到项目结构
把结构、样式和行为拆到不同文件，不是为了形式整齐，而是为了定位、复用和让人与 AI 都更容易理解。
- 能从文件树快速找到应该修改的位置。
- 关注点分离和相对路径引用
- 把单文件页面拆为 index.html、style.css、script.js，并故意改错一次路径来观察现象。
- 完成 3.1「让 HTML、CSS、JavaScript 第一次协作」
FOUNDATION
必须理解
把结构、样式和行为拆到不同文件，不是为了形式整齐，而是为了定位、复用和让人与 AI 都更容易理解。
文件拆分是为了让职责和引用关系清晰，不是为了追求文件数量。项目结构稳定后，人和 AI 才能在不重写全站的情况下找到正确修改点。
厨房不会把调料、餐具和清洁用品堆在同一箱，也不会为每一粒盐单独建仓库。好的目录既分区明确，又避免过度分割。
任务应用把 index.html 作为入口，style.css 负责外观，script.js 负责交互，assets 保存图片；入口通过相对路径连接其它资源。
关注点分离和相对路径引用
把 HTML、CSS 和 JavaScript 分开，是因为它们通常在不同原因下变化：改文案不该碰交互，换颜色也不该重写数据。几行始终一起工作的代码倒不用硬拆。
基础概念
关注点分离是让不同变化原因的代码由不同位置负责。HTML 管结构、CSS 管样式、JavaScript 管行为；相对路径把这些文件重新连接成一个页面。
进一步理解
拆分的价值是定位和替换：改主题颜色时主要查看样式，改交互时主要查看脚本。几行始终一起变化的代码不必为了形式继续拆散。
引用关系是结构的一部分。HTML 的 link 与 script 指向外部文件，路径从当前文档位置解析；移动文件后必须同步调整引用。
任务应用把结构放在 index.html、外观放在 style.css、添加任务逻辑放在 script.js，由入口 HTML 引用后共同工作。
分文件不自动等于关注点分离。如果一个 `utils.js` 同时操作页面、请求接口和保存数据，职责仍然混杂。
这一小节记住：按变化原因分开职责，同时保持引用关系清楚。
入口文件、资源目录和命名约定
浏览器先拿到入口 HTML，再顺着里面的引用去找样式、脚本和图片。只要有一段路径写错，对应资源就不会加载。
基础概念
入口文件是工具或运行环境开始读取项目的位置；资源目录存放图片、字体等非代码材料；命名约定让团队能够预测文件位置与用途。
进一步理解
浏览器静态页常以 HTML 为入口，现代项目则由构建配置与源码入口共同决定。入口会继续导入其他模块，因此它更像地图起点而不是全部代码。
目录层级应服务查找。小项目不需要复制大型架构；当同类文件增多或职责明确时，再建立 components、styles、assets 等分组。
打开 `index.html` 后，浏览器顺着 `./style.css` 与 `./script.js` 获取资源；图片统一放入 `assets`，名称直接说明内容。
“入口”与“首页”可能重合但不等价。应用入口负责启动代码，路由首页只是用户访问 `/` 时看到的页面。
这一小节记住：文件树应该让新人不打开内容也能大致找到入口与职责。
拆分后必须验证结果保持一致
目录和文件名本身也在说明项目。看到 task-list.js 就能猜到它管列表，看到 utils2.js 基本什么也不知道；命名清楚能省掉很多来回打开文件的时间。
基础概念
结构重构是在不改变外部行为的前提下调整内部组织。拆分前后的页面内容、交互和可访问性应保持一致，因此必须用相同用例验证。
进一步理解
先记录基线：页面能否打开、按钮怎样工作、控制台是否干净。每移动一类内容就刷新验证，错误范围会比一次搬完更小。
浏览器 Network 能显示样式或脚本是否 404，Console 会显示语法与运行错误；界面看起来相似仍要亲自走交互。
拆分任务页面后检查标题和列表仍显示、样式仍加载、按钮仍新增任务、刷新行为没有意外改变。
重构与新增功能应分开。边拆文件边改变交互，一旦结果不同就难以判断是引用错误还是需求变化。
这一小节记住：组织方式改变后，用原有行为证明功能没有被悄悄改变。
- index.html、style.css 与 script.js 位于同一目录。
- 浏览器从 index.html 开始加载页面。
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>./ 表示从当前 HTML 所在目录开始查找；defer 让脚本在 HTML 解析完成后执行。
- link 的 rel=stylesheet 告诉浏览器该资源是一张样式表。
- 两个 `./` 都表示从当前 HTML 所在目录开始寻找目标。
- defer 让外部脚本下载时不阻塞 HTML 解析，并在文档解析完成后执行。
Network 中 style.css 和 script.js 都返回成功状态；样式正常生效，脚本可以找到已经解析完成的页面元素。
AI COLLABORATION
AI 如何参与
要求 AI 在拆分前列出文件职责和引用关系，拆分后逐项验证页面外观与行为没有回归。
推荐协作顺序
- 1
把单文件代码交给 AI，让它先圈出结构、样式和行为三块。
- 2
要求它先给文件树和迁移顺序，不要直接输出全部新文件。
- 3
每移动一块就让它告诉你应该检查哪个引用和哪个页面现象。
这是一个零基础静态项目，当前所有 HTML、CSS、JavaScript 都在 index.html。请先给出不超过 5 个文件的拆分方案和引用关系图，再逐步说明迁移顺序。要求每迁移一层就验证页面仍可使用，不引入框架。
简单、可解释的文件树和逐步迁移策略，而不是直接生成复杂企业级目录。
人工检查清单
- 检查 AI 是否过度拆分、改变原有行为，或引用了实际不存在的文件名。
- 让 AI 在拆分前给出文件职责与引用图，并说明每次移动的验证点。
- 逐项检查 Network、Console 和真实交互，不因页面外观大致相同就结束。
COMMON TRAPS
常见误区
错误不是需要隐藏的失败，而是帮助你看清系统边界的证据。下面三类问题在 AI 辅助学习中最常出现。
拆完以后忘了连接
- 你会看到
- style.css 和 script.js 都存在，页面却像没加载一样。
- 为什么发生
- 过度拆分增加跳转和命名成本，当文件没有独立职责时，结构反而比原代码更难理解。
- 怎样纠正
- 回到入口 HTML，检查 link 和 script 的路径、拼写与加载方式。
目录越多越觉得专业
- 你会看到
- 一个小页面出现十几个只有两三行的文件。
- 为什么发生
- 路径是文件关系的一部分，移动内容却忘记更新入口引用会让浏览器直接找不到资源。
- 怎样纠正
- 只有职责清楚、会独立变化的内容才拆；解释不出用途的目录先不要建。
改名只改了一半
- 你会看到
- 文件已经重命名，HTML 还引用旧名字。
- 为什么发生
- 一次性改结构和功能会产生多个变量，失败时无法确定哪类改动破坏了原行为。
- 怎样纠正
- 重命名后搜索旧名称，并在 Network 中确认新资源返回 200。
HANDS-ON
动手任务
把单文件页面拆为 index.html、style.css、script.js，并故意改错一次路径来观察现象。
- 完成 3.1「让 HTML、CSS、JavaScript 第一次协作」
跟着做
- 01
记录当前单文件页面的结构、样式和脚本区域。
- 02
创建 style.css，移动样式并用 link 引用。
- 03
刷新验证外观，再创建 script.js 移动脚本。
- 04
用 script 的 src 引用并验证添加任务功能。
- 05
故意改错一次文件名，通过控制台或 Network 找到并修复。
能从文件树快速找到应该修改的位置。
新增 assets 目录和一张图标，并解释 HTML URL 路径与磁盘路径的区别。
离开本课前，自问四件事
- 关注点分离依据的是什么，而不是简单依据什么？
- 入口文件、首页和资源目录分别扮演什么角色？
- 移动 style.css 后应检查和修改哪些引用？
- 如何用基线证明一次拆分只是重构而没有改变功能？
确认完成后，会同步更新学习中心的课程学习进度。