11.3.3 教学材料：案例研究与练习题

一句话破题

把项目经验转化为可教学的材料，是知识传承的最高形式——你不仅记住了，还能让别人也学会。

核心价值

制作教学材料能让你：

• 深化自己对知识的理解
• 形成可复用的培训资源
• 建立技术影响力

案例研究模板

# 案例研究：[问题名称]

## 背景
项目/功能的简要描述，读者需要知道的上下文

## 挑战
我们遇到了什么具体问题？有什么约束条件？

## 探索过程
1. 首先我们尝试了 A 方案...
2. 发现 A 方案的问题是...
3. 然后我们考虑 B 方案...

## 最终方案
详细描述最终采用的解决方案

```代码示例```

## 效果验证
方案实施后的效果数据

## 经验总结
- 关键洞察 1
- 关键洞察 2
- 如果重来会怎么做

## 延伸思考
- 这个方案还能用在哪里？
- 有什么局限性？

案例研究示例

# 案例研究：优化首页加载速度

## 背景
电商首页需要展示推荐商品、Banner、分类导航等多个模块

## 挑战
首页加载时间超过 5 秒，LCP 指标不达标

## 探索过程
1. 首先用 Lighthouse 分析，发现图片是主要瓶颈
2. 尝试压缩图片，效果有限
3. 考虑懒加载，但首屏图片不能懒加载

## 最终方案
采用渐进式图片加载 + 骨架屏：

```tsx
<Image
  src={product.image}
  placeholder="blur"
  blurDataURL={product.thumbnail}
  priority={index < 4}  // 首屏前4张优先加载
/>

效果验证

• LCP 从 5.2s 降到 1.8s
• 跳出率下降 23%

经验总结

• 优化要有数据支撑
• 首屏优化比全局优化更有效

## 练习题设计

### 渐进式练习结构

```markdown
# 练习：实现用户登录功能

## Level 1：基础实现
实现一个简单的登录表单，包含用户名和密码字段

要求：
- [ ] 表单验证
- [ ] 错误提示
- [ ] 提交按钮

## Level 2：进阶功能
在 Level 1 基础上添加：
- [ ] 记住我功能
- [ ] 密码显示/隐藏
- [ ] 登录状态持久化

## Level 3：生产级别
在 Level 2 基础上添加：
- [ ] CSRF 防护
- [ ] 登录频率限制
- [ ] OAuth 第三方登录

## 参考答案
<details>
<summary>点击查看 Level 1 答案</summary>
代码示例...
</details>

教学材料清单

类型	用途	示例
案例研究	展示真实问题解决过程	性能优化案例
练习题	让学习者动手实践	实现登录功能
代码模板	提供起点代码	项目脚手架
Checklist	验证学习成果	安全检查清单

避坑指南

新手最容易犯的错

1. 案例过于简单，没有体现真实复杂度
2. 练习题没有渐进式难度
3. 只给答案不解释为什么
4. 忽略了"踩坑"过程的价值