从单文件到清楚的项目结构
文件拆分的目的，是让结构、样式和行为各有清楚入口。拆分前先记录当前结果，拆分后逐项确认功能没有变化。
- 能从文件树快速找到结构、样式和交互代码，并修复一次故意制造的引用路径错误。
- 关注点分离和相对路径引用
- 检查从单文件到清楚的项目结构后，应当能从文件树快速找到结构、样式和交互代码，并修复一次故意制造的引用路径错误，并保留页面结构、不同宽度截图、控制台和元素状态作为可重复检查的依据。
- 完成 3.4「DOM、事件与表单交互」
FOUNDATION
必须理解
文件拆分是为了让职责和引用关系清晰，不是为了追求文件数量。项目结构稳定后，人和 AI 才能在不重写全站的情况下找到正确修改点。
本课依次讲清关注点分离和相对路径引用、入口文件、资源目录和命名约定和拆分后必须验证结果保持一致，最后通过“故意改错一次文件名，通过控制台或 Network 找到并修复”检查学习结果。
厨房不会把调料、餐具和清洁用品堆在同一箱，也不会为每一粒盐单独建仓库。好的目录既分区明确，又避免过度分割。
任务应用把 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
每移动一块就让它告诉你应该检查哪个引用和哪个页面现象。
这是当前单文件页面和目标文件树。请先列出每段代码应移动到哪里，以及文件间的相对引用。不要改功能。完成后给我一份比较清单，包含页面结构、样式加载、表单提交和控制台错误。
简单、可解释的文件树和逐步迁移策略，而不是直接生成复杂企业级目录；从单文件到清楚的项目结构的人工验收必须回到真实页面、请求、终端、测试或数据结果，不能用 AI 的文字说明代替。
人工检查清单
- 检查 AI 是否过度拆分、改变原有行为，或引用了实际不存在的文件名。
- 让 AI 在拆分前给出文件职责与引用图，并说明每次移动的验证点。
- 逐项检查 Network、Console 和真实交互，不因页面外观大致相同就结束。
COMMON TRAPS
常见误区
下面三类问题会让任务看似完成，却经不起刷新、错误输入或真实环境检查。先看现象，再找原因和修正方法。
按行数机械拆文件
- 你会看到
- 产生很多名字含糊的小文件，查找更困难
- 为什么发生
- 行数不能说明职责，强行切分会把同一件事拆散到多个位置。
- 怎样纠正
- 按职责与变化原因决定边界
移动文件后忘记更新路径
- 你会看到
- 页面无样式或交互失效
- 为什么发生
- 相对路径从引用文件的位置计算，文件一移动，原来的起点就变了。
- 怎样纠正
- 从发起引用的文件位置重新计算相对路径
拆完只看首页外观
- 你会看到
- 表单和边缘状态已经回归却没被发现
- 为什么发生
- 结构调整可能破坏事件、导入和失败状态，静态外观覆盖不到这些行为。
- 怎样纠正
- 重复拆分前的完整操作清单
HANDS-ON
动手任务
能从文件树快速找到结构、样式和交互代码，并修复一次故意制造的引用路径错误。
- 完成 3.4「DOM、事件与表单交互」
跟着做
- 01
记录当前单文件页面的结构、样式和脚本区域。
- 02
创建 style.css，移动样式并用 link 引用。
- 03
刷新验证外观，再创建 script.js 移动脚本。
- 04
用 script 的 src 引用并验证添加任务功能。
- 05
故意改错一次文件名，通过控制台或 Network 找到并修复。
能从文件树快速找到结构、样式和交互代码，并修复一次故意制造的引用路径错误。
新增 assets 目录和一张图标，并解释 HTML URL 路径与磁盘路径的区别。
离开本课前，自问四件事
- 关注点分离依据的是什么，而不是简单依据什么？
- 入口文件、首页和资源目录分别扮演什么角色？
- 移动 style.css 后应检查和修改哪些引用？
- 如何用基线证明一次拆分只是重构而没有改变功能？
确认完成后，会同步更新学习中心的课程学习进度。