前端知识体系（Frontend System）MOC
本笔记作为前端知识体系的顶层索引，采用学习路径 + 技能分类的双重组织方式，既便于循序渐进学习，也便于快速查找参考。
🛤️ 学习路径（从基础到精通）
阶段一：基础入门（Foundation）
目标：掌握前端三大基础语言，能够独立完成简单页面
1. HTML 基础
- HTML-MOC — HTML 完整知识体系
2. CSS 基础
- CSS-MOC — CSS 完整知识体系
3. JavaScript 基础
- JavaScript MOC — JavaScript 完整知识体系（基于 ECMAScript 官方规范）
学习检查点：能够使用 HTML+CSS+JS 完成一个完整的静态页面
阶段二：框架进阶（Framework）
目标：掌握主流前端框架，能够开发复杂单页应用
1. 选择主框架（三选一或全选）
React 路径
- React-MOC — React 完整知识体系
- Hooks原理与实践 — React Hooks 深度理解
- 组件设计模式 — 组件设计最佳实践
- 性能优化（memo、虚拟化） — React 性能优化技巧
Vue 路径
Angular 路径
- Angular-MOC — Angular 完整知识体系
- Angular 模块与依赖注入 — Angular 核心概念
- Angular 生命周期 — 组件生命周期管理
Umi 路径
2. 状态管理（根据框架选择）
React 生态
- 状态管理-MOC — 状态管理完整指南
- Redux — Redux 基础与实践
- Redux-Saga — Redux 异步处理
- MobX — 响应式状态管理
- Recoil — 原子化状态管理
- Zustand — 轻量级状态管理
Vue 生态
3. TypeScript（推荐）
- TypeScript-MOC — TypeScript 完整知识体系
- 编译时类型设计 — 类型系统设计
- 运行时类型保护与模式 — 类型安全实践
4. CSS 框架
- Tailwind CSS-MOC — Tailwind CSS 完整知识体系
- 快速开始 — Tailwind CSS 快速上手
- 布局系统 — Flexbox、Grid 布局
- 响应式设计 — 响应式设计实践
学习检查点：能够使用框架 + 状态管理完成一个完整的前端应用
阶段三：工程化实践（Engineering）
目标：掌握前端工程化工具链，能够搭建和维护大型项目
1. 构建工具
- 工具链与构建-MOC — 构建工具完整指南
- Vite原理与配置 — Vite 快速构建
- plugin） — Webpack 深度解析
- SWC对比 — 构建工具对比
- Babel转换管线 — 代码转换与编译
2. 包管理与模块化
- pnpm） — 包管理最佳实践
- Turborepo） — Monorepo 管理方案
3. 工程化实践
- 项目脚手架与目录结构 — 项目结构设计
- Prettier） — 代码规范与格式化
- lazy） — 代码分割与懒加载
- L10n — 国际化方案
- 权限与多租户 — 权限管理系统
学习检查点：能够搭建和维护一个完整的前端工程化项目
阶段四：质量保障（Quality）
目标：掌握测试、性能优化、安全等质量保障技能
1. 测试
2. 性能优化
3. 安全
- 前端安全-MOC — 前端安全完整指南
- CSRF原理与防护 — 常见安全漏洞与防护
- 内容安全策略（CSP） — CSP 安全策略
- 安全依赖管理 — 依赖安全审计
4. 可访问性
学习检查点：能够编写高质量、高性能、安全的前端代码
阶段五：高级应用（Advanced）
目标：掌握架构设计、跨平台、前沿技术等高级技能
1. 架构设计
- 架构-MOC — 前端架构完整指南
- web components） — 微前端架构方案
- 前端分层（Shell、Micro Apps） — 前端分层架构
- 可扩展组件系统设计 — 组件系统设计
- 边界上下文在前端的实践 — 领域驱动设计
2. 网络与数据
- 网络与传输-MOC — 网络与数据传输完整指南
- 3、TLS基础 — HTTP 协议深入
- 缓存策略（HTTP cache、Service Worker） — 缓存策略设计
- WebSocket） — 数据交互方案
- React Query） — 客户端数据缓存
- 离线与PWA — 离线应用与 PWA
3. 跨平台开发
- 移动性能与适配 — 移动端性能优化
- React Native 知识体系 — React Native 完整学习路径
- 高分屏） — 响应式适配方案
4. 部署与运维
- 部署与发布-MOC — 部署与发布完整指南
- Vercel） — 静态站点部署
- GitLab CI） — CI/CD 自动化
- 灰度发布策略 — 发布策略
5. 动画与交互
- 动画与交互-MOC — 动画与交互完整指南
- GSAP 完整教程 — GSAP 动画库完整指南（需要掌握 JavaScript 和 DOM 操作）
6. 前沿技术
- WebAssembly — WebAssembly 技术
- Functions at Edge — 边缘计算
- ISR — 服务端渲染
- 性能） — GraphQL 高级应用
学习检查点：能够设计和实施大型前端项目的架构方案
🎯 技能分类（按领域查找）
一、核心技术栈
1. 基础语言
- HTML: HTML-MOC
- CSS: CSS-MOC
- JavaScript: JavaScript MOC
- TypeScript: TypeScript-MOC
2. 前端框架
- React: React-MOC
- Vue: Vue-MOC
- Umi: Umi-MOC
- Angular: Angular-MOC
3. 状态管理
- 状态管理-MOC
- React 生态：Redux、Redux-Saga、MobX、Recoil、Zustand
- Vue 生态：Vuex、Pinia
- 通用方案：状态机模式、事件驱动
4. CSS 框架
- Tailwind CSS-MOC — 实用优先的 CSS 框架
- 工具类系统、响应式设计、暗色模式
二、工程化工具链
1. 构建工具
- 工具链与构建-MOC
- Vite、Webpack、Rollup、ESBuild、SWC
- Babel 转换管线
2. 包管理
- npm、yarn、pnpm
- Monorepo 管理方案
3. 代码质量
- ESLint、Prettier
- 静态分析与类型检查
三、质量保障
1. 测试
- 测试-MOC
- 单元测试、集成测试、端到端测试
- 测试工具：Jest、Vitest、Cypress、Playwright
2. 性能优化
- 性能-MOC
- 加载性能、运行时性能、资源优化
- 性能监控与分析
3. 安全
- 前端安全-MOC
- XSS、CSRF 防护
- 内容安全策略（CSP）
4. 可访问性
- 无障碍-MOC
- WCAG 标准
- 可访问性测试
四、架构与设计
1. 前端架构
- 架构-MOC
- 微前端、前端分层、组件系统设计
- DDD 在前端的实践
2. 设计系统
- 设计系统-MOC
- 组件规范、设计 Tokens、主题管理
- 交互设计基础
3. 网络与数据
- 网络与传输-MOC
- HTTP 协议、缓存策略
- REST、GraphQL、WebSocket
4. 动画与交互
五、部署与运维
1. 部署发布
- 部署与发布-MOC
- 静态站点托管、CDN 策略
- CI/CD 流程
2. 监控与运维
- 性能监控、错误监控
- 用户行为分析（RUM）
- 日志管理
六、跨平台与移动
1. 移动端开发
- 移动性能与适配
- React Native、Flutter
- 响应式与适配策略
2. 跨平台方案
- 桌面应用（Electron）
- 小程序开发
- 跨平台框架对比
📖 专题索引
按主题快速查找
性能相关
- 性能-MOC - 性能优化完整指南
- React 性能优化
- Vue 性能优化
- 移动性能与适配
状态管理相关
- 状态管理-MOC - 状态管理完整指南
- Redux
- Redux-Saga
- Vuex
- Pinia
测试相关
安全相关
- 前端安全-MOC - 安全完整指南
- CSRF原理与防护
- 内容安全策略（CSP）
动画相关
🧭 学习资源
官方文档
团队协作
运营与合规
📌 使用说明
如何学习
- 初学者：按照「学习路径」从阶段一开始，循序渐进
- 有经验者：使用「技能分类」快速定位需要补强的领域
- 查阅参考：使用「专题索引」快速查找特定主题
学习建议
- 循序渐进：每个阶段都有检查点，确保掌握后再进入下一阶段
- 实践为主：理论知识结合项目实践，才能真正掌握
- 持续更新：前端技术更新快，保持学习新技术的习惯
目录结构说明
- MOC 文件：
!MOC-分类.md- 各分类的索引文件 - 普通文件：使用中划线分隔，如
Redux-Saga.md - 链接格式：使用相对路径，如
./状态管理/Redux.md
最后更新：2025
维护规范：详见 目录结构规划