章节总结与工程实训评价

【章节核心知识重构与工程启示】

本章标志着学习者从“单页面代码切图仔”向“具备全局视野的前端架构师”的重要跨越。在现代前端工程体系中，必须将以下三大架构思维内化于心：

一、 物理文件结构的工程化

我们彻底摒弃了初学者极易陷入的“单文件大杂烩”反模式，建立了包含 styles、scripts、images 等标准资产库的工程化目录拓扑。这种基于“关注点分离（Separation of Concerns）”的资产分类法则，不仅让底层代码库清晰易读，更是未来敏捷团队协同与 Git 版本控制的绝对基石。

二、 相对路径路由的寻址法则

在解耦多页面架构与分离静态资源时，我们深度实操了基于相对路径（Relative Path）的系统寻址机制。无论是通过 <link> 挂载外部 CSS、通过 <script> 注入 JS 行为，还是在 <nav> 导航栏中串联不同的 HTML 路由节点，精准掌握跨物理层级的路径映射关系（如 ./ 与 ../ 的灵活运用），是前端工程师必须跨越的核心门槛。

三、 组件化思维的萌芽

在处理多页面站点时，全站通常共享一致的全局头部（header）与页脚（footer）。将这些复用度极高的 UI 区块及其对应的 CSS 样式独立剥离并统一管理，正是现代前端框架（如 Vue、React）中“组件化开发”的核心理念雏形。通过收拢公共作用域代码，我们能以指数级降低系统后期的迭代与维护成本。

【课程思政内化指标】

• 工程基准与协同契约：在团队开发中，文件命名与目录归档不仅仅是个人习惯，更是研发团队内部的“最高法律契约”。遵守规范，不制造命名污染与死链接，是对协同战友最基本的职业尊重。
• 温故知新与技术沉淀：技术的学习永远不是割裂的。能够将前几章零散的历史代码资产进行重构与再利用，体现了工程师对待数字资产的敬畏心与系统化的知识管理能力。

【综合实训任务】

多页面静态门户与历史资产重构

为了验收本章工程化多页面架构的落地能力，请依托现代 IDE（如 VS Code）独立完成以下综合实训项目：

任务一：AI 驱动的多页面个人门户构建

1. A/B 测试与高保真原型演进：运用提示词工程，驱动通义灵码等 AI 助手为你生成不少于 5 个不同设计风格的网站首页 HTML+CSS 代码版本（即进行方案的 A/B 测试）。评估其 DOM 结构规范性与视觉表现力，择优选取一款作为基准工程。
2. 核心业务功能注入：该主页必须清晰呈现个人履历、技术栈图谱及联系方式矩阵。
3. 多路由节点分发：
   • 建立全局导航，必须包含“首页”、“技术笔记”、“项目演练”、“关于”、“联系”五大一级锚点。
   • 为“项目演练”节点开发 CSS :hover 伪类驱动的二级下拉面板（包含演示 1、2、3）。
   • 再次利用 AI 协同，基于首页风格衍生出“技术笔记列表页”与“笔记正文详情页”。
4. 资产严格解耦交付：最终产出的工程包必须严格遵循以下物理结构，绝对禁止内联样式表：
   • 路由文件：index.html、list.html、single.html
   • 静态资产：styles/styles.css、scripts/scripts.js、images/

任务二：跨周期工程资产大整合

打破知识孤岛，将第二、三、四章产出的单页面实验成品，作为子模块无缝集成至本次任务一的主门户中。请执行方案 B（扁平化物理架构与静态资源池化，强烈推荐）：

1. 在系统根目录下构建名为 web-portfolio 的总工程文件夹。
2. 将前三章的历史首页源文件，运用连字符法则重命名为 task-02.html、task-03.html 等，平铺部署于该根目录下。
3. 建立统一的静态资源池（styles/、scripts/、images/），将历史项目中的散落资产强制剥离、重命名并集中归档。
4. 【核心考验】 全局排查并重构所有 HTML 文档中的相对寻址路径，确保无任何 404 Not Found 死链产生。
5. 在主页的“项目演练”下拉菜单中，通过 <a href="..."> 建立通往这些历史产物的有效路由链路。

任务三：公共视图组件抽离与架构统一（进阶挑战）

借助 AI 代码审查工具，将最新门户首页中 header 与 footer 对应的 DOM 结构及其关联的 CSS 规则精准切片并单独抽离。随后，利用这套现代化的头尾组件，全局覆盖并替换掉前三章历史作业中陈旧的头尾代码。实现整个异构站点的 UI 视觉交互一致性。

【OBE 成果评价量表】

本章实训考核总分 100 分。要求提交包含所有物理层级与静态资产的 ZIP 格式工程归档压缩包。

评价维度	考核指标与得分标准	分值占比
物理架构与解耦规范	严格遵循了 HTML根路由、styles/、scripts/、images/ 的目录拓扑；命名规范无中文字符、无大写/下划线违规；做到了结构与表现的 100% 物理隔离。	30%
多级路由与寻址准确性	主页导航菜单功能完善（含下拉交互）；所有挂载的内页（list.html、single.html）以及被整合的历史作业（task-0x.html）均能通过相对路径正常跳转；CSS与图片无 404 加载失败。	30%
AI 驱动设计与代码质量	基于 AI 生成的视图具备良好的现代审美与语义化 DOM 结构；代码中无冗余残留；针对任务一生成的网页质量极高。	20%
组件化重构（进阶考核）	成功完成了任务三，实现了跨页面的 header 与 footer 组件级复用，全站视觉风格高度统一，未引发次级页面的布局崩溃。	20%