256 lines
9.2 KiB
Markdown
256 lines
9.2 KiB
Markdown
|
---
|
|||
|
|
tags: [前端, 全栈, 学习总结, 阶段性回顾]
|
|||
|
|
create time: 2026-04-26 14:30
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 前端开发学习阶段性总结
|
|||
|
|
|
|||
|
|
> **声明**：本文档由 AI 助手（Obsidian 知识管理自动化工作流）自动生成。
|
|||
|
|
> 生成方式：遍历 vault 中与【前端开发】相关的笔记文件，按既定学习路径（HTML → CSS → JavaScript → TypeScript → 工程化 → 实战）自动提取核心知识点，结构化整合后输出。
|
|||
|
|
> 生成时间：2026-04-26
|
|||
|
|
> 数据来源：`FRONTEND/`、`DEV/VITE/`、`金山办公作业/Week06/` 共 16 篇笔记文件。
|
|||
|
|
> 如需修正或补充内容，请直接编辑本文件或修改源笔记。
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
本总结梳理了从网页骨架到工程化构建的完整前端学习路径，涵盖六大阶段的知识积累。所有知识点分布在以下三个区域：
|
|||
|
|
|
|||
|
|
| 区域 | 路径 | 阶段 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| 基础层 | `FRONTEND/` | HTML → CSS → JavaScript → TypeScript |
|
|||
|
|
| 工程层 | `DEV/VITE/` | Vite 构建工具架构与优化 |
|
|||
|
|
| 实战层 | `金山办公作业/Week06/` | 前端项目实战：路由、API 封装、登录安全 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 阶段一：HTML 基础 — 网页骨架
|
|||
|
|
|
|||
|
|
**核心知识点：**
|
|||
|
|
|
|||
|
|
- HTML 文档结构（`<!DOCTYPE html>`、`<html>`、`<head>`、`<body>`）
|
|||
|
|
- 常用标签：文本标签（`<h1>`~`<h6>`、`<p>`、`<span>`）、列表标签（`<ul>`、`<ol>`）、链接与图片
|
|||
|
|
- **表单元素**：`<input>` 各类 type、`<select>`、`<textarea>`、`<button>`
|
|||
|
|
- **语义化标签**：`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<footer>`
|
|||
|
|
|
|||
|
|
> 这是所有前端知识的起点，决定了页面的结构和可访问性。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 阶段二：CSS 基础 — 网页样式
|
|||
|
|
|
|||
|
|
**核心知识点：**
|
|||
|
|
|
|||
|
|
- **选择器优先级**：`!important` > 内联 > ID > 类/属性/伪类 > 标签/伪元素
|
|||
|
|
- **盒模型**：content → padding → border → margin，`box-sizing: border-box` 的重要性
|
|||
|
|
- **Flexbox 布局**：`flex-direction`、`justify-content`、`align-items`、`flex-wrap`
|
|||
|
|
- **Grid 布局**：`grid-template-columns/rows`、`gap`、`grid-area`
|
|||
|
|
- **响应式设计**：媒体查询（`@media`）、响应式单位（`rem`、`vw`、`vh`）
|
|||
|
|
|
|||
|
|
> CSS 是前端最容易被低估的部分，Flexbox 和 Grid 需要多动手练习。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 阶段三：JavaScript 基础 — 交互逻辑
|
|||
|
|
|
|||
|
|
**核心知识点：**
|
|||
|
|
|
|||
|
|
- **变量与数据类型**：`let` / `const`、原始类型与引用类型
|
|||
|
|
- **函数与作用域**：函数声明 vs 函数表达式、箭头函数、闭包、作用域链
|
|||
|
|
- **DOM 操作**：`document.querySelector`、事件绑定、事件委托
|
|||
|
|
- **事件处理**：事件冒泡与捕获、`addEventListener`
|
|||
|
|
- **异步编程**：`Promise`、`async/await`、`fetch` API
|
|||
|
|
|
|||
|
|
> React 的 Hooks 本质就是 JS 闭包 + 状态管理，理解 JS 是理解框架的前提。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 阶段四：TypeScript 基础 — 类型保障
|
|||
|
|
|
|||
|
|
**核心知识点：**
|
|||
|
|
|
|||
|
|
- **类型注解**：基础类型标注、函数参数/返回值类型
|
|||
|
|
- **接口（Interface）**：对象结构约束、可选属性、只读属性
|
|||
|
|
- **泛型（Generics）**：类型参数化、泛型约束
|
|||
|
|
- **联合类型与交叉类型**：`|`、`&`
|
|||
|
|
- **工具类型**：`Partial`、`Required`、`Pick`、`Omit` 等
|
|||
|
|
|
|||
|
|
> TypeScript 是现代前端项目的工业标准，越早适应越好。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 阶段五：Vite 工程化 — 构建工具
|
|||
|
|
|
|||
|
|
**文件索引：** `DEV/VITE/架构原理.md`、`DEV/VITE/配置详解.md`、`DEV/VITE/优化实践.md`
|
|||
|
|
|
|||
|
|
### 5.1 核心设计理念
|
|||
|
|
|
|||
|
|
Vite 的核心创新在于**分层优化策略**——开发环境和生产环境采用完全不同的处理方式：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
开发环境 → ESM 按需编译 → 即时返回
|
|||
|
|
生产环境 → Rollup 预构建 → 高质量产物
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 5.2 开发环境架构
|
|||
|
|
|
|||
|
|
| 机制 | 说明 |
|
|||
|
|
|------|------|
|
|||
|
|
| **ESM 按需编译** | 只编译浏览器请求的文件，而非全量打包 |
|
|||
|
|
| **依赖预构建** | 使用 esbuild 预打包 npm 依赖，转 ESM 格式 |
|
|||
|
|
| **文件监听** | FSWatcher 监听文件变更，触发 HMR |
|
|||
|
|
|
|||
|
|
### 5.3 热模块替换（HMR）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
文件变更 → 监听器 → 服务端失效 → 重新编译 → WebSocket → 浏览器替换
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- JS 模块：通过浏览器原生 `import()` 重新导入
|
|||
|
|
- CSS 模块：直接替换 `<style>` 标签
|
|||
|
|
- React 组件：React Fast Refresh 保持状态的前提下重新渲染
|
|||
|
|
|
|||
|
|
### 5.4 生产构建系统
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
入口文件 → 依赖图构建 → 模块解析 → 代码转换 → 代码分割 → Tree Shaking → 压缩 → 输出
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- 基于 **Rollup** 进行最终打包
|
|||
|
|
- 支持手动代码分割（`manualChunks`）、vendor 提取
|
|||
|
|
- 使用 terser 进行压缩混淆
|
|||
|
|
|
|||
|
|
### 5.5 插件系统
|
|||
|
|
|
|||
|
|
插件生命周期：`Config` → `ConfigResolved` → `ConfigureServer` → `BuildStart` → `Transform` → `Load` → `BuildEnd` → `CloseBundle`
|
|||
|
|
|
|||
|
|
核心钩子：
|
|||
|
|
- **resolveId**：解析模块路径
|
|||
|
|
- **load**：加载模块内容
|
|||
|
|
- **transform**：转换模块源码
|
|||
|
|
|
|||
|
|
### 5.6 Vite vs 传统构建工具对比
|
|||
|
|
|
|||
|
|
| 特性 | Vite | Webpack | Parcel |
|
|||
|
|
|------|------|---------|--------|
|
|||
|
|
| 启动原理 | ESM 按需编译 | 全量打包 | 零配置打包 |
|
|||
|
|
| HMR 机制 | 模块级更新 | 全局重编译 | 智能更新 |
|
|||
|
|
| 配置复杂度 | 低 | 高 | 极低 |
|
|||
|
|
| 开发体验 | 优秀 | 可优化 | 良好 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 阶段六：前端项目实战（Week06）
|
|||
|
|
|
|||
|
|
**文件索引：** `金山办公作业/Week06/` 目录
|
|||
|
|
|
|||
|
|
### 6.1 前端项目依赖清单
|
|||
|
|
|
|||
|
|
梳理了现代前端项目的完整依赖体系，包括框架依赖（React、React Router）、构建工具（Vite）、UI 组件库等。
|
|||
|
|
|
|||
|
|
### 6.2 路由原理
|
|||
|
|
|
|||
|
|
理解了前端路由的核心机制：
|
|||
|
|
|
|||
|
|
- **History API**：`pushState` / `replaceState` / `popstate` 事件
|
|||
|
|
- **Hash 路由**：`#` 锚点变化触发 `hashchange` 事件
|
|||
|
|
- **SPA 路由**：单页面应用如何在不刷新页面的情况下切换视图
|
|||
|
|
|
|||
|
|
### 6.3 统一封装请求
|
|||
|
|
|
|||
|
|
对前端 HTTP 请求进行了系统化的封装：
|
|||
|
|
|
|||
|
|
- **请求拦截器**：统一添加 Token、超时控制
|
|||
|
|
- **响应拦截器**：统一错误处理、401 自动跳转登录
|
|||
|
|
- **类型安全**：使用 TypeScript 定义 API 响应类型
|
|||
|
|
- **Axios 封装**：基于 Axios 构建统一请求模块
|
|||
|
|
|
|||
|
|
### 6.4 登录安全流程
|
|||
|
|
|
|||
|
|
从普通登录到安全登录的完整演进：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
普通 HTTPS 登录 → 盐值挑战 → 客户端密钥派生
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**三层安全防护：**
|
|||
|
|
1. **HTTPS 加密传输** — 基础保障
|
|||
|
|
2. **盐值挑战（Salt Challenge）** — 后端下发一次性随机盐值
|
|||
|
|
3. **客户端 PBKDF2 派生** — 前端用盐值 + 密码做密钥派生，传输层不出现原始密码
|
|||
|
|
|
|||
|
|
### 6.5 客户端密钥派生（进阶安全）
|
|||
|
|
|
|||
|
|
> 盐值挑战方案的进阶实现，适用于金融类高安全场景。
|
|||
|
|
|
|||
|
|
**完整流程：**
|
|||
|
|
|
|||
|
|
| 步骤 | 前端操作 | 生活类比 |
|
|||
|
|
|------|----------|----------|
|
|||
|
|
| 第一步 | 向 `GetChallenge` 接口请求盐值 | 服务员递给你一张一次性餐巾纸 |
|
|||
|
|
| 第二步 | 用 PBKDF2 算法将密码+盐值做派生 | 用暗语写在餐巾纸上 |
|
|||
|
|
| 第三步 | 发送派生密钥而非原始密码 | 厨房对暗语，用完即撕 |
|
|||
|
|
|
|||
|
|
**安全性保证：** 即使 HTTPS 被绕过，攻击者只能看到客户端派生的密钥，无法还原原始密码。
|
|||
|
|
|
|||
|
|
### 6.6 Outlet 组件模式
|
|||
|
|
|
|||
|
|
理解 React 中 Outlet 组件的使用——用于嵌套路由的场景，父路由通过 `<Outlet />` 渲染子路由的视图内容，是构建多级导航布局的核心模式。
|
|||
|
|
|
|||
|
|
### 6.7 题目：在线管理平台
|
|||
|
|
|
|||
|
|
通过实际项目题目将所学知识综合运用，涵盖了路由配置、API 封装、安全认证等完整前端开发流程。
|
|||
|
|
|
|||
|
|
### 6.8 验收任务清单
|
|||
|
|
|
|||
|
|
Week06 的最终验收目标，确保每个知识点都落实到代码实现中。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 学习路径全景图
|
|||
|
|
|
|||
|
|
```mermaid
|
|||
|
|
graph LR
|
|||
|
|
A[HTML 基础] --> B[CSS 基础]
|
|||
|
|
B --> C[JavaScript 基础]
|
|||
|
|
C --> D[TypeScript 基础]
|
|||
|
|
D --> E[Vite 工程化]
|
|||
|
|
E --> F[前端项目实战 Week06]
|
|||
|
|
F --> G[React 框架]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 关键认知与心得
|
|||
|
|
|
|||
|
|
1. **不要跳过基础直接学框架。** React 的 Hooks 本质就是 JS 闭包 + 状态管理，不懂 JS 就看不懂 Hooks。
|
|||
|
|
|
|||
|
|
2. **CSS 是前端最难的部分之一。** Flexbox 和 Grid 需要多动手练习，不是看几篇文章就能掌握的。
|
|||
|
|
|
|||
|
|
3. **TypeScript 不是可选的。** 现代前端项目中，TS 是标配，越早适应越好。
|
|||
|
|
|
|||
|
|
4. **理解工具原理比会用工具更重要。** 深入 Vite 架构原理后，能更好地进行性能优化和插件开发。
|
|||
|
|
|
|||
|
|
5. **安全是前端的重要课题。** 从 HTTPS 到盐值挑战再到客户端密钥派生，每一层都在增加攻击者的成本。
|
|||
|
|
|
|||
|
|
6. **工程化思维贯穿始终。** 从依赖管理 → 路由设计 → API 封装 → 构建优化，前端不只是写页面，更是一套系统工程。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 关联笔记
|
|||
|
|
|
|||
|
|
- [[FRONTEND/HTML 基础]]
|
|||
|
|
- [[FRONTEND/CSS 基础]]
|
|||
|
|
- [[FRONTEND/JavaScript 基础]]
|
|||
|
|
- [[FRONTEND/TypeScript 基础]]
|
|||
|
|
- [[DEV/VITE/架构原理]]
|
|||
|
|
- [[DEV/VITE/配置详解]]
|
|||
|
|
- [[DEV/VITE/优化实践]]
|
|||
|
|
- [[金山办公作业/Week06/前端项目依赖清单]]
|
|||
|
|
- [[金山办公作业/Week06/路由原理]]
|
|||
|
|
- [[金山办公作业/Week06/统一封装请求]]
|
|||
|
|
- [[金山办公作业/Week06/登录安全流程]]
|
|||
|
|
- [[金山办公作业/Week06/客户端密钥派生]]
|
|||
|
|
- [[金山办公作业/Week06/Outlet]]
|
|||
|
|
- [[金山办公作业/Week06/bcrypt成本因子]]
|
|||
|
|
- [[金山办公作业/Week06/题目-在线管理平台]]
|
|||
|
|
- [[金山办公作业/Week06/验收任务清单]]
|