第 14 周：组件化与架构

重点：代码复用的三级台阶——模板、类、组件；组件的四个核心概念（封装/接口/组合/状态）；反应式编程让"状态变→界面自动变"；组件框架的实现路线与架构模式全景。 边界：构建工具链归第 13 周；框架的系统学习超出本课程，本周以概念与原理为主。

概念

1. 模板、类与组件 — 代码复用三级台阶；组件四概念：封装、接口、组合、状态；原生 Web Components 与框架组件
2. 反应式编程 — 从命令式到声明式：数据流、观察者、依赖追踪等术语体系；响应式系统三要素
3. 组件框架 — React/Vue/Svelte/HTMX/Web Components 的实现路线对照：虚拟DOM、细粒度响应式、编译时、hypermedia 各解一题
4. 前端架构 — MVC→MVP→MVVM→状态+组件的演化主线；CSR/SSR/SSG 等六种渲染架构

平台能力

• Service Worker — 独立于页面的后台代理脚本：可编程缓存、离线兜底、PWA 的技术核心

实训

• 把个人项目的一个页面重构为 2-3 个组件（可用原生 Web Components），梳理每个组件的 props 与 events 契约

作业

• 撰写 doc/architecture.md：为自己项目的最终形态选择组件框架、组件划分与渲染架构，并说明理由