知识卡片制作原则

在制作 Anki 卡片时，遵循科学记忆原则能显著提升学习效率。以下是 Anki 卡片制作的黄金原则，结合认知科学与实践经验总结而成：

---

1. 最小信息原则（Minimum Information Principle）

• 核心：每张卡片只测试 一个独立知识点
• 正确示例： Q: JavaScript 中 let 的作用域是什么？ A: 块级作用域（{} 内有效）
• 错误示例： Q: 对比 var、let、const 的区别？（应拆分成 3 张卡）

---

2. 主动回忆测试（Active Recall Testing）

• 核心：问题必须 迫使大脑主动提取记忆

• 正确示例： Q: 这段代码输出什么？

  console.log(typeof null); // ?

  A: "object"（历史遗留问题）

• 错误示例： Q: typeof null 的结果是 "object" 吗？（是/否问题缺乏挑战性）

---

3. 具体而非抽象（Concreteness Principle）

• 核心：用 具体场景/示例 代替抽象描述

• 正确示例： Q: 如何用 Flexbox 实现 水平垂直居中？ A:

  .container {
  display: flex;
  justify-content: center;
  align-items: center;
  }

• 错误示例： Q: Flexbox 有哪些属性？（过于宽泛）

---

4. 上下文关联（Contextual Clues）

• 核心：添加 应用场景 或 常见错误

• 示例优化： Q: 为什么这段代码会内存泄漏？

  function createClosure() {
  const data = new Array(1000).fill('*');
  return () => console.log(data.length);
  }

  A: 闭包长期引用 data 导致无法垃圾回收

---

5. 视觉层次化（Visual Chunking）

• 核心：用 格式/颜色 分解复杂信息

• 示例：

  <b>HTTP 状态码分类：</b>
  <span style="color:#28a745">2xx</span> - 成功 ✔️<br>
  <span style="color:#dc3545">4xx</span> - 客户端错误 ❌<br>
  <span style="color:#fd7e14">5xx</span> - 服务端错误 🔧

---

6. 避免枚举列表（Avoid Lists）

• 核心：将长列表拆分为单点卡片
• 正确做法：
  • 卡 1：CSS 选择器优先级中!important 的作用
  • 卡 2：内联样式（style="…"）的优先级等级
  • 卡 3：ID 选择器的优先级计算规则
• 错误做法： Q: CSS 选择器优先级规则有哪些？（列出 6 条）

---

7. 添加记忆钩子（Memory Hooks）

• 技巧：使用 类比/反例/趣味关联
• 示例： Q: TCP 三次握手类比打电话的过程是？ A:
  1. SYN 👉 ” 喂，听得到吗？”
  2. SYN-ACK 👉 ” 听到，你呢？”
  3. ACK 👉 ” 我也听到 ” → 通话建立

---

8. 适度使用 Cloze 填空

• 适用场景：术语/关键参数记忆
• 示例： React 的 {{c1::useEffect}} 钩子用于执行{{c2::副作用}}操作，依赖项数组写在第{{c2::2}}个参数

---

9. 原子化与连接性平衡

• 策略：
  • 基础概念原子化（如单张卡解释 this 的默认绑定）
  • 复杂知识用 卡片链 关联（如 事件循环 → 微任务 → 宏任务 三张关联卡）

---

10. 持续迭代优化

• 行动指南：
  • 标记复习时吃力的卡片（添加 #难 标签）
  • 定期合并重复卡片
  • 用插件（如 Fastbar）分析卡片效率

---

经典反例对比

问题类型	差示例	好示例
过于宽泛	”HTTP 协议有哪些特点？"	"HTTP 无状态 特性如何通过 Cookie 解决？“
被动确认	”=== 是严格相等运算符对吗？”	=== 在比较 '5' 和 5 时结果分别是？“
信息过载	” 列出 Flexbox 的所有属性 "	" 如何用 flex: 1 实现等分布局？“

---

模板推荐

#separator:tab
#html:true
Front: "<div style='font-family: Arial;'>
  {{问题}}<br>
  {{#代码示例}}<code style='background:#f8f9fa;padding:2px 4px;'>{{代码示例}}</code>{{/代码示例}}
</div>"
 
Back: "<div style='font-family: Arial; line-height:1.5;'>
  {{答案}}<br>
  {{#注意}}<div style='color:red;'>⚠️ {{注意}}</div>{{/注意}}
  {{#扩展}}<details><summary>🔍 深入</summary>{{扩展}}</details>{{/扩展}}
</div>"