第二节工程化目录架构

【任务描述】

在上一节中，AI 辅助模型为我们极速生成了包含完整视图与逻辑的首页产物。然而，将结构（HTML）、表现（CSS）与行为（JavaScript）高度混杂于单一的 index.html 文件中，严重违背了现代软件开发的“关注点分离”原则。

本节任务要求学习者掌握工业级前端项目的文件结构设计规范，学会构建高可维护性的静态资产目录树。通过实施物理资源解耦，将大模型生成的混合面条式代码精准剥离至专属的模块化作用域中，并利用相对路径路由机制重新建立全栈资产的映射关联。

【知识储备与架构设计】

一、工业级标准目录树拓扑

文件结构设计并非简单的“新建文件夹”，它是对项目物理边界的合理规划与组织，直接决定了整个系统在未来演进中的代码清晰度、可扩展性以及版本控制（如 Git）的协同效率。为了保障资产的安全与整洁，业界约定俗成地采用分类隔离的目录拓扑模型。请在本地工作区遵循以下层级模型建立你的工程根目录：

my-website/             (项目物理根目录/Workspace)
├── index.html          (系统默认首页/入口路由文件)
├── list.html           (信息列表页/次级路由文件)
├── single.html         (内容详情页/次级路由文件)
├── styles/             (样式表资产库，或简写为 css/)
│   └── styles.css      (全局或模块核心样式表)
├── images/             (多媒体图像资产库，或简写为 img/)
│   └── logo.png        (矢量或位图静态资源)
└── scripts/            (客户端脚本资产库，或简写为 js/)
    └── scripts.js      (全局或模块交互逻辑脚本)

二、静态资产的语义化命名规范

在计算机底层操作系统与 Web 服务器环境中，严密的命名规范是软件工程师专业素养的直接体现。任何随意的命名都可能导致服务器解析崩溃或路由 404 错误。前端资产命名必须遵循以下 POSIX 及 URL 安全标准：

1. HTML 路由文件规范

必须放置在项目物理根目录或对应的子级路由目录中。强制统一使用小写英文字符，若存在由多个单词组成的复合命名，工业标准要求使用**中划线连字符（Kebab-case，如 -）**进行连接，严禁使用空格或下划线。

合规示例：index.html、list.html、about-us.html。

2. CSS 样式表资产规范

统一剥离并存放于 styles/ 或 css/ 目录中。遵循与 HTML 相同的小写及中划线连接法则。

合规示例：styles.css、main-layout.css。

3. JS 行为脚本资产规范

统一剥离并存放于 scripts/ 或 js/ 目录中。遵循小写字母法则。

合规示例：scripts.js、app-core.js。

4. 图像等二进制静态资产规范

统一存放于 images/ 或 img/ 目录中。根据图像承载的业务语义使用小写英文拼写。

【工程红线警戒】：绝对严禁使用中文字符命名任何物理文件或目录。因为中文在通过 HTTP 协议传输时会被强制进行 UTF-8 URL 编码（如 %E4%B8%AD），极易导致跨操作系统（Windows 至 Linux 服务器）部署时出现乱码、寻址失败或资源级联崩溃。
合规示例：logo.png、hero-banner-01.jpg。

【任务实施：资源路由寻址与代码物理剥离】

当我们将混合在 HTML 中的 <style> 标签与 <script> 代码强行切分为独立的物理文件后，原本的 HTML 入口文件将退化为毫无生机的纯语义骨架。此时，必须通过浏览器可识别的相对路径寻址机制，将分离的资产重新挂载至 DOM 树上。

步骤一：CSS 表现层的外部挂载

在入口文件 index.html 的 <head> 元数据配置区内部，使用专门的 <link> 标签请求外部样式表。其 href 属性中填写的相对路径逻辑为：“由当前所在的 HTML 物理坐标出发，向下潜入 styles 目录，并精准锁定 styles.css 实体文件”。

<link rel="stylesheet" href="styles/styles.css" />

步骤二：JavaScript 行为层的推迟挂载

现代浏览器引擎在自上而下解析 HTML 文档时，若中途遭遇庞大的 JS 脚本请求，会立即阻塞（Block）后续 DOM 树的构建与渲染。为保障首屏渲染性能（FCP），在非异步（Async/Defer）策略下，必须在 index.html 的 <body> 标签最底部（即闭合标签 </body> 的正上方），使用 <script> 标签发起脚本请求。

<script src="scripts/scripts.js"></script>

步骤三：代码资产的物理迁移实操

清空工作区：开启你的 VS Code，在项目根目录下严谨地创建出上述标准目录树（styles/、images/、scripts/）。
执行解耦剥离：打开上一节由 AI 生成的臃肿 index.html。精准剪切其中被 <style> ... </style> 包裹的所有 CSS 规则代码，转录并物理保存至 styles/styles.css 文件内。
资产重定位：将项目所需的全部本地图像迁移至 images/ 目录，并全局排查、修正 HTML 代码中的 <img> 寻址路径（例如修改为 <img src="images/logo.png" />）。
注入连接桥梁：在 HTML 文档的 <head> 与 <body> 底部，分别补全步骤一与步骤二中的 <link> 和 <script> 路由映射标签。

完成以上全套重构流程，标志着你已彻底告别了新手的“混沌单文件编码”状态，真正确立了具备高度可扩展性与团队协同属性的前端架构师工程思维。

步骤四：界面微调与内容个性化

界面样式优化：根据你对CSS的理解，调整颜色搭配、字体大小、间距布局等视觉元素，使页面更加美观协调。
内容信息定制：将页面中的占位文字替换为你自己的个人信息，如姓名、专业背景、兴趣爱好等，确保内容真实且符合个人特色。
功能细节完善：检查所有链接、图片路径和交互功能是否正常工作，修复可能出现的显示问题或功能异常。
响应式适配：测试页面在不同设备和屏幕尺寸下的显示效果，必要时添加媒体查询确保良好的用户体验。

通过这一步骤，你不仅能巩固所学的前端知识，还能将项目真正转化为展示个人特色的专属作品，体现你的技术能力和创意思维。

【课程思政】

系统性思维与团队契约精神

从“单文件编码”跨入“工程化目录分类”与“静态资产物理隔离”，不仅是技术栈的跃升，更是开发者“系统性宏观思维”的觉醒。在多人协作的企业级开发流中，严格遵守全小写、中划线连接的物理文件命名红线，不制造由于编码规范缺失引发的系统级崩溃，这是现代工程师最底层的团队契约精神与职业操守。

【在线演示】

您可以直接访问我们的在线演示页面查看本节内容的成品效果：在线演示

【任务描述】​

【知识储备与架构设计】​

一、 工业级标准目录树拓扑​

二、 静态资产的语义化命名规范​

【任务实施：资源路由寻址与代码物理剥离】​

步骤一：CSS 表现层的外部挂载​

步骤二：JavaScript 行为层的推迟挂载​

步骤三：代码资产的物理迁移实操​

步骤四：界面微调与内容个性化​

【课程思政】​

【在线演示】​