learnNote

主题

从 0 到 1 学习前端 ​

本仓库目标：以"零基础小白"为起点，构建一份系统、可上手、贴近真实工作与面试的前端学习笔记。

一、项目目标 ​

  1. 系统性：覆盖前端从语言基础 → 框架 → 工程化 → 性能与部署的完整链路，章节之间有清晰的依赖与递进关系。
  2. 可落地：每个章节不仅讲"是什么"，更要讲"为什么"和"怎么用"，配套可运行的代码与可打开的 HTML 演示。
  3. 面试导向：每个章节末尾沉淀真实面试高频题，覆盖原理、八股、场景题、手写题。
  4. 零基础友好：用生活类比解释抽象概念（参考 qa/0.md 中的"乐高/宜家""客厅/厨房"等类比风格）。

二、读者画像 ​

  • 完全零基础：从未写过代码，需要从 HTML 标签、变量是什么开始讲。
  • 后端转前端：有编程基础，但不熟悉浏览器、DOM、组件化思维。
  • 面试求职者：需要快速梳理知识盲区，强化原理和手写题。

写作时默认面向"零基础"，对进阶内容用 > 进阶补充：... 的方式追加，避免劝退新手。

三、每章交付物（强约束） ​

每个章节都必须包含以下 4 类内容，缺一不可：

类型文件/形式作用
📖 学习文档README.md概念讲解 + 生活类比 + 关键原理图
💻 实战案例examples/*.{js,ts,jsx,vue}可独立运行的最小代码片段
🌐 HTML 演示页demo/index.html浏览器中可直接打开、可交互的演示
🎯 面试题集qa.md高频面试题 + 标准答案 + 加分回答

章节目录结构示例 ​

chapters/
└── 02-css-basics/
    ├── README.md          # 学习文档
    ├── qa.md              # 面试题集
    ├── examples/          # 代码案例
    │   ├── flexbox.html
    │   └── grid.html
    └── demo/              # 综合演示页
        └── index.html

四、内容写作风格规范 ​

  1. 先类比，后定义：每个新概念先给一个生活类比（厨房、餐厅、乐高、宜家……），再给技术定义。
  2. 代码最小化：示例代码聚焦单一知识点，避免无关复杂度。能用 10 行说清，就不写 50 行。
  3. 图示优先：流程、关系、结构优先用 ASCII 图或 mermaid 图表达，而不是大段文字。
  4. 对比成表：相似技术（如 React vs Vue、npm vs pnpm）一律用表格对比，维度统一。
  5. 常见误区：每章设置 ⚠️ 易踩的坑 小节，列出新手常犯错误。
  6. 一句话总结：每章结尾用一句话概括"这章到底讲了什么"。

五、章节规划（学习路线图） ​

按照"由静到动、由浅入深、由单点到工程"的顺序组织。

第一阶段：网页三剑客（从 0 到看见页面） ​

#章节核心内容
01HTML 基础标签语义化、文档结构、表单、多媒体、SEO 基础
02CSS 基础选择器、盒模型、定位、Flex、Grid、响应式、动画
03JavaScript 入门变量、类型、运算符、流程控制、函数、作用域

第二阶段：JavaScript 进阶（从能写到写得好） ​

#章节核心内容
04JS 核心机制原型链、this、闭包、作用域链、执行上下文
05异步编程回调、Promise、async/await、事件循环、宏任务/微任务
06ES6+ 新特性解构、模板字符串、模块化、Class、Symbol、迭代器
07DOM 与 BOM节点操作、事件机制、事件委托、BOM API
08网络与存储Fetch、XHR、Cookie、LocalStorage、IndexedDB、CORS

第三阶段：TypeScript（给 JS 加护栏） ​

#章节核心内容
09TS 基础类型基本类型、接口、类型别名、联合/交叉类型
10TS 高级类型泛型、条件类型、映射类型、工具类型、类型体操入门

第四阶段：现代前端框架（选一个深入） ​

#章节核心内容
11React 入门JSX、组件、Props、State、生命周期、Hooks 基础
12React 进阶自定义 Hooks、Context、性能优化、虚拟 DOM、Fiber
13Vue 入门（可选并行）模板语法、响应式、组件、Composition API
14状态管理Redux/Zustand、Pinia、何时该用全局状态
15路由React Router / Vue Router 原理与实战

第五阶段：工程化与构建 ​

#章节核心内容
16包管理与模块化npm/pnpm、CommonJS vs ESM、Monorepo
17构建工具Vite 原理、Webpack 基础、Rollup、esbuild
18代码质量ESLint、Prettier、Husky、Git 工作流
19测试Vitest/Jest 单元测试、Playwright E2E

第六阶段：全栈与元框架 ​

#章节核心内容
20Next.js / Nuxt 入门SSR/SSG/ISR、文件路由、API Routes、RSC
21Node.js 基础模块、文件系统、HTTP 服务、Express/Koa

第七阶段：性能与部署 ​

#章节核心内容
22性能优化加载性能、渲染性能、Core Web Vitals、Lighthouse
23浏览器原理渲染流水线、回流重绘、合成层、事件循环
24网络与安全HTTP/HTTPS、HTTP/2、XSS、CSRF、CSP
25部署与运维Vercel、Nginx、CDN、Docker 基础

附录 ​

#章节核心内容
A1前端技术全景图已存放于 qa/0.md，作为"开篇导览"
A2手写题合集防抖、节流、深拷贝、Promise、bind、new ……
A3场景设计题大文件上传、无限滚动、权限系统、SSO 登录

六、面试题集规范（qa.md 模板） ​

每道题按以下结构组织，避免只有"问题 + 答案"的简陋形式：

markdown
### Q1：什么是闭包？

**考察点**：作用域、内存管理、JS 核心机制

**标准答案**（适合背诵）：
闭包是指一个函数能够访问其词法作用域之外的变量……

**通俗理解**（生活类比）：
闭包就像一个"自带小书包"的函数，函数走到哪里，
都能从书包里拿出当初创建它的环境里的东西……

**代码示例**：
\`\`\`js
function makeCounter() {
  let count = 0;
  return () => ++count;
}
\`\`\`

**加分回答**（拉开差距）：
- 闭包导致内存泄漏的场景
- 闭包在 React Hooks 中的应用（陈旧闭包问题）

**追问**：
- 如何手动释放闭包占用的内存？
- 循环中使用 var 配合 setTimeout 为什么打印同一个值？

七、写作与提交流程 ​

  1. 新增章节：在 chapters/ 下新建目录，命名格式 编号-英文短名/，如 04-js-core/。
  2. 章节模板：从 templates/chapter-template/ 复制基础结构（待创建）。
  3. HTML 演示页要求：
    • 单文件（HTML + 内联 CSS/JS），双击即可打开。
    • 顶部用注释说明本 Demo 演示的知识点。
    • 关键交互按钮要有清晰文案，方便对照学习。
  4. 提交规范：建议遵循 feat(ch04): 完成 JS 核心机制章节 这类 conventional commits 风格。

八、推进节奏建议 ​

周次学习目标
第 1 周第一阶段（HTML / CSS / JS 入门）
第 2-3 周第二阶段（JS 进阶）
第 4 周第三阶段（TypeScript）
第 5-6 周第四阶段（选 React 或 Vue 深入）
第 7 周第五阶段（工程化）
第 8 周第六阶段（元框架 + Node 基础）
第 9 周第七阶段（性能/浏览器/安全/部署）
第 10 周通刷面试题 + 手写题 + 场景题

节奏可按个人情况调整，但建议不要跳过第一阶段和第二阶段，地基稳了后面才不返工。

九、当前进度 ​

  • [x] qa/0.md 前端技术全景导览
  • [x] 第一阶段：HTML / CSS / JS 入门（3 章）
  • [x] 第二阶段：JS 进阶（5 章）
  • [x] 第三阶段：TypeScript（2 章）
  • [x] 第四阶段：React / Vue / 状态 / 路由（5 章）
  • [x] 第五阶段：工程化（4 章）
  • [x] 第六阶段：元框架与 Node（2 章）
  • [x] 第七阶段：性能 / 浏览器 / 安全 / 部署（4 章）
  • [x] 附录 A1：手写题 30 道
  • [x] 附录 A2：场景设计题 15 道

全部 25 主章 + 2 附录已完成首版，每章均已交付 README + qa + examples + demo 四类产物，详见 README.md。

十、一句话愿景 ​

让任何一个零基础的人，跟着这份笔记走完一遍，就能写出像样的前端项目，也能从容应对中级前端面试。