目录

2023前端学习路线终极版（大、全、干）

这是前端2023年的学习路线，也是饥人谷新系统班的课程大纲

体系知识（直播带班模式）

模块一 HTML

学习周期：0.5～1周

  1. 环境搭建 Chrome + VSCode + liveserver
  2. 标签的使用场景
  3. 常见HTML5标签
  4. doctype、meta、常见属性
  5. 各种表单类型

模块二 CSS重难点

学习周期：2～3周

  1. CSS选择器种类、权重、优先级计算、匹配顺序、继承
  2. 块、行的特性
  3. 两种盒模模型
  4. 边距折叠
  5. Flex布局做页面，flex-basis、flex-grow、flex-shrink的计算方法
  6. BFC的概念和应用
  7. 定位各种用法
  8. 层叠上下文
  9. Grid布局的使用
  10. 垂直、水平居中的几种实现
  11. 响应式媒体查询
  12. 移动端适配动态rem、动态viewport
  13. 字体图标、svg图标
  14. CSS3常见特效如圆角、阴影、形变、过渡、动画

模块三 ECMAScript

学习周期：3周

  1. 8种数据类型
  2. var、let、const 区别
  3. 布尔与falsy值
  4. 类型转换
  5. 基础类型和引用类型
  6. 常见运算符（+、+=、==、===、\&\&、||）
  7. typeof 的值
  8. 运算符结合性和优先级
  9. 流程控制语句
  10. 字符串操作
  11. 0.1 + 0.2 === 0.3与大数相加
  12. 数组操作API
  13. 对象操作
  14. Map、weakMap、Set、Symbol
  15. Math、Date
  16. 函数、箭头函数、递归
  17. 深拷贝
  18. 词法作用域、立即执行函数表达式
  19. 柯里化、回调函数
  20. 正则表达式
  21. ES6常用语法

模块四 ECMAScript重难点

学习周期2～4周

  1. 构造函数、对象、原型，原型链
  2. Class写法
  3. 继承的实现
  4. this、call、apply、bind
  5. 闭包
  6. 回调函数，Promise封装、async、await的使用
  7. 手写Promise.all、Promise.race、Promise.allSettled、Promise.any
  8. 手写Promise并发控制
  9. 任务队列宏任务与微任务，setTimeout、Promise、async、await相关代码输出
  10. v8垃圾回收

模块五 DOM

学习周期： 1周

  1. DOM的获取、创建、删除、修改内容
  2. 属性的操作、JS修改样式、切换class控制样式
  3. onclick与addEventListener，事件模型、冒泡与捕获、事件代理、阻止默认

模块六 BOM

学习周期：0.5周

  1. localStorage、Cookie、Session、SessionStorage 区别
  2. navigator判断设备
  3. history、pushState、replaceState，不改变url刷新页面

模块七 前后端交互

学习周期：1周

  1. 手写node server
  2. Ajax 的使用与Promsie封装
  3. Fetch API的使用
  4. Axios介绍
  5. Mock.js和常见Mock平台
  6. WebSocket
  7. 同源策略、跨域方案、CORS、JSONP

模块八 浏览器渲染机制

学习周期：0.5周

  1. DNS解析过程
  2. 浏览器渲染机制
  3. 加载JS、CSS区别和放置位置原因
  4. 重绘、回流概念，和性能优化的关系
  5. script的asnyc和defer

模块九 模块化、项目构建

学习周期：1周

  1. Node.js之CommonJS规范
  2. Node.js之npm、yarn、package.json、node_modules
  3. ES6 Module
  4. Webpack的日常使用、配置
  5. 常见Loader、Plugin
  6. 手写Webpack Plugin、Loader
  7. Webpack的构建流程
  8. Webpack优化前端的手段
  9. 认识rollup

拓展提升

学习周期： 2周

  1. TCP三次握手和四次挥手过程
  2. TCP与UDP区别\?TCP 协议怎么保证可靠的，UDP 为什么不可靠？应用场景\?
  3. 滑动窗口、拥塞控制
  4. GET和 POST的区别
  5. HTTP状态码有哪些，301和302有什么区别
  6. 浏览器HTTP请求数目限制，怎么解决
  7. 长链接、短链接、如何断开长链接
  8. HTTP 1.0\&1.1\&2区别
  9. HTTP2特性
  10. HTTP2如何加密
  11. 缓存的处理过程？强缓存/弱缓存？请求头字段和响应头字段，如何设置不用缓存
  12. HTTP和HTTPS有什么区别
  13. HTTPS加密过程、证书是什么
  14. Web安全之HTTPS、XSS、CSRF
  15. 登录鉴权有哪些方式？登录持久化怎么实现的\?
  16. JWT，accesstoken、refresh token的作用分别是什么，存放在哪儿，具体流程？

学习周期： 0.5周

  1. 性能优化怎么做的（结合资源和代码压缩优化、图片/路由/组件懒加载或者分包、CDN、SSR，HTTP2、浏览器加载和渲染、动画体验等）
  2. CDN原理？CDN优化时如何判断该将哪些包分离
  3. 前端性能衡量指标

模块十二 移动端

学习周期：1周

  1. px、em、rem、vw、rpx区别
  2. 物理像素、逻辑像素、PPI、设备像素比是什么
  3. 布局视口、视觉视口是什么？meta viewport的设置逻辑
  4. viewport缩放适配与动态rem适配原理
  5. 在项目中使用postcss-pxtorem
  6. 实现0.5px细线
  7. 移动端响应式高清图片解决方案

模块十三 设计模式

学习周期：1周

  1. 面向对象与组件
  2. 模块模式
  3. 单例模式
  4. 工厂模式
  5. 桥接模式
  6. 观察者模式
  7. 以轮播为例讲解设计模式的优势

模块十四 TypeScript学习

学习周期：1周

  1. 体验TypeScript
  2. 类型v.s.类
  3. 类型的两个好处
  4. TS支持的JS类型
  5. TS中的any、unknown、void、never、enum、tuple
  6. 如何给不同数据加type
  7. 联合类型与区分联合类型
  8. 交叉类型
  9. 怎么声明div的类型
  10. 泛型是什么
  11. 泛型的实际使用
  12. 重载
  13. 如何用泛型封装网络请求库

模块十五 Node.js 重难点

学习周期：2周

  1. Node.js 技术架构总结
  2. Node.js 命令行翻译项目
  3. 在Node.js项目中使用TypeScript
  4. 发布NPM
  5. Node.js API 与学习方案
  6. WebStorm\&VSCode\&Chrome 调试 Node.js
  7. libuv \& v8 的功能
  8. EventLoop 介绍
  9. Docker 和 MySQL
  10. Node.js 连接数据库
  11. ORM 之 Sequalize
  12. 一对一、一对多、多对多表设计
  13. 缓存字段、事务、存储引擎 InnoDB
  14. 三个例子了解 Stream
  15. 创建自己的流
  16. 进程、阻塞进程、线程
  17. 创建进程和操作线程
  18. Node.js 的 execFile、spawn 和 fork

模块十六 手写代码(中低难度)

学习周期：2周

  1. 用Set去重、不用Set如何去重、在原数组上去重
  2. 如何对数组里有相同内容的对象去重
  3. 如何按数组里包含的对象属性字段去重
  4. 数组里的对象包含数组摘录字段构成新数组
  5. 手写深拷贝、处理循环引用的深拷贝
  6. 手写一个trim函数
  7. 手写一个curry函数
  8. 写一个观察者EventBus含emit、on、once、off
  9. 手写一个 instanceof
  10. 手写一个new
  11. 手写一个call和apply
  12. 用call/apply实现bind
  13. 不用call或者apply实现bind
  14. 手写bind考虑new一个bind函数的情况
  15. 手写防抖debounce
  16. 手写节流throttle
  17. 手写forEach、map、filter、reduce
  18. 手写数组拍平flat
  19. 手写原型继承
  20. 手写class继承
  21. 实现字符串大数相加
  22. 手写lazyman函数

模块十七 手写代码（中高难度）

  1. Promise封装一个Ajax函数
  2. Promise封装一个delay函数
  3. 手写Promise.all
  4. 手写Promise.race
  5. 手写Promise.allSettled
  6. 手写Promise.any
  7. 手写并发控制
  8. 宏任务、微任务原理和执行输出顺序
  9. async、await微任务代码执行输出顺序
  10. Promise链式调用与错误处理代码输出
  11. 闭包代码输出分析
  12. this代码输出分析
  13. 手写reactive函数 实现track 和 trigger，分别使用Object.defineProperty 和 Proxy

Vue方向深入及项目

模块十八 学习：Vue3 、Vue Cli4、Vite、组合式API、Vuex、VueRouter

  1. Vue.js快速入门
  2. Vue.js应用实例与组件实例代码演示
  3. Vue.js生命周期代码演示
  4. Vue.js组件销毁生命周期代码演示
  5. 模版语法
  6. data的用法和注意事项
  7. methods的用法和注意事项
  8. 计算属性computed的用法、methods和computed的区别
  9. watch的用法、watch实现异步方法调用
  10. Object.defineProperty实现响应式
  11. Proxy实现响应式
  12. v-if和v-show的区别
  13. 列表渲染、key
  14. 事件处理
  15. 组件的创建与数据传递
  16. 组件的v-model双向绑定、v-model语法糖
  17. 全局组件和局部组件
  18. Props
  19. slot插槽
  20. Provide和Inject
  21. Vue动画
  22. Vue Cli搭建项目
  23. vue.config.js配置
  24. vite是什么解决什么问题、vite原理
  25. 原生ESM
  26. vite体验
  27. vite文档通读
  28. 选项式API的痛点
  29. 组合式API的优势和用法
  30. 一个选项式API的案例
  31. 选项式API改造成组合式API
  32. 生命周期钩子概览
  33. Setup、ref、reactive、toRef、toRefs用法详解
  34. 组件间数据传递的几种方法、为什么需要Vuex
  35. EventBus的不便之处
  36. Vuex和localStorage的区别
  37. Vuex的核心概念和使用方法
  38. Vuex组合式API用法
  39. Vue Router 传统用法
  40. Vue Router钩子函数
  41. 设置路由懒加载
  42. History和Hash两种模式
  43. VueRouter组合式API用法

模块十九 项目：造一个简易MVVM

项目描述：通过实现一个简易MVVM来学习Vue的原理。
项目难度： ★★

  1. Object.defineProperty的用法
  2. 数据的劫持
  3. 观察者模式
  4. MVVM单向绑定的实现
  5. MVVM 双向绑定
  6. 增加事件指令、完善代码

模块二十 项目：造一个简易Router

项目描述：通过该项目，了解Router和单页应用的远离。
项目难度：★★

  1. 造一个Hash模式的Router
  2. 造一个History模式的Router

模块二十一 项目：自制简易UI组件库和官网

技术栈：Vue 3 、TypeScript 、 Vue Router 、Rollup
项目描述：模仿ElementUI开发一个简易UI组件库以及组件库展示官网，用户可像使用ElementUI一样安装使用。项目使用Vue3、TypeScript、Vite、VueRouter，是用Rollup打包。通过本项目，学习组件封装思路和技巧、TypeScript和Rollup在Vue3项目中的使用，锻炼学习者开发能力和改bug能力。
项目难度： ★★★★
效果图：

模块二十二 项目：PC端印象云笔记在线版

技术栈：Vue 2、 Vue Cli 、Vue Router 、Vuex + ElementUI 、Axios 、Less
项目描述：使用Vue2技术栈开发一款在线云笔记产品，包含登录、注册、笔记本的增删改查、笔记的增删改查、markdown笔记预览、回收站等功能。这是一个非常传统的前后端分离的项目，通过这个项目可以系统学习：

  1. 前后端接口规划
  2. VueCli项目搭建和基础配置、Less的使用
  3. VueRouter路由的设计、登录路由拦截、路由懒加载
  4. Axios的二次封装，接口封装成模型
  5. ElementUI的使用
  6. Vuex的使用、分模块
  7. 产品逻辑、细节、优化、复用

项目难度：★★★★

模块二十三 项目：移动端记账Webapp

技术栈：Vue 2 、 TypeScript 、 Vue Router 、 Vuex 、 Echarts、Yarn、Vite
项目描述：使用Vue2和TypeScript开发一款记账Webapp，含标签管理、收入支出记账、统计展示、图表展示等功能。项目花大量篇幅介绍代码重构。
项目难度：★★★★

模块二十四 项目：Vue小米商城

技术栈：Vue、Vue-router、Vuex、Vue Cli、Vue-devtools、Webpack、Yarn
项目描述：使用Vue技术堆栈重构移动端小米商城。含登录、首页、底部导航、分类页、商品列表、商品详情、购物车、个人中心、地址管理、订单提交、订单管理功能在实战中学习和应用Vue全家桶：Vue、Vuex、Vue-router，理解vue在实际业务场景中的注意事项和技巧，深入理解组件化和数据驱动常见问题。
项目难度：★★★★

模块二十五 项目：翻译小程序

技术栈：小程序
项目描述：一个微信小程序项目，开发一款翻译小程序，支持中、英、法、韩、日、阿拉伯、西班牙语的翻译，持久化保存用户翻译记录。
项目难度：★

模块二十六 项目：Uniapp开发抽奖APP

项目描述：做一个抽奖APP(含Android、IOS、小程序、H5)
技术栈：Uni-app、Vue

React 方向深入及项目

  1. 如何引入React
  2. React 初体验
  3. 函数与延迟执行
  4. JSX 初体验
  5. 条件判断与循环控制
  6. 元素 v.s. 组件
  7. 标签会被翻译为 React.createElement
  8. 类组件和函数组件
  9. setState 注意事项
  10. 复杂 state 怎么处理
  11. React 事件绑定的各种写法
  12. 复习 this，两个面试题
  13. 两种创建 class 组件的方式
  14. props
  15. state
  16. 生命周期之 shouldComponentUpdate、 render、componentDidMount、 componentDidUpdate、 componentWillUnmount
  17. 函数组件比 class 组件简单
  18. 函数组件模拟生命周期

模块二十八 学习：Hooks详解

  1. useRef的原理
  2. useContext的原理 \& 总结
  3. useState使用和实现
  4. useReducer使用
  5. 用 useReducer 代替 redux
  6. useContext使用
  7. useEffect ＆ useLayoutEffect 使用
  8. useMemo使用
  9. useRef使用
  10. forwardRef 使用
  11. useImperativeHandle 使用
  12. 自定义 Hook
  13. Stale Closue
  14. Hooks总结

模块二十九 项目：造一个简易React

项目描述：通过实现一个简易React来了解React内部发生什么。
项目难度：★★★★

  1. 搭建环境配置Babel、JSX、虚拟DOM
  2. 实现虚拟DOM渲染、实现计数器功能
  3. 实现模块化、组件
  4. 实现Class组件和函数组件
  5. 画图演示react原理
  6. React diff算法讲解
  7. React diff算法原理与实现

模块三十 项目：造一个Redux

项目描述：通过造一个Redux项目，深入掌握Redux的原理和用法。
项目难度：★★

  1. 全局state的读写
  2. reducer、dispatch、connect的来历
  3. 利用connect减少render
  4. Redux乍现
  5. connect 支持 selector
  6. mapDispatchToProps
  7. connect 的意义
  8. 封装 Provider 和 createStore
  9. Redux 各概念总结
  10. 让 Redux 支持 函数Action
  11. 让 Redux 支持 Promise Action
  12. 阅读 redux-thunk 和 redux-promise 源码

模块三十一 项目：React大屏

技术栈：CRA、React、TypeScript、Sass、React Router、 大屏适配 、 Echarts
项目描述：使用React开发一个数据大屏，项目重点掌握React的使用、React和Echarts的结合、大屏的适配方案。
项目难度：★★

模块三十二 项目：自制React UI组件库和官网

技术栈：React 、 Webpack 、Typescript 、 Hooks
项目描述：模仿Antd开发一个简易UI组件库以及组件库展示官网，项目开发了Icon、Dialog、Layout组件。通过本项目，学习组件封装思路和技巧、TypeScript在React项目中的使用，锻炼学习者开发能力和改bug能力。
项目难度： ★★★★

模块三十三 项目：移动端记账Webapp

技术栈：CRA 、 TypeScript 、 React 、 Hooks 、 React Router 、 SVG 、styled-components、echarts
项目描述：使用React和TypeScript开发一款记账Webapp，含标签管理、收入支出记账、统计展示、图表展示等功能。项目花大量篇幅介绍代码重构。
项目难度：★★★★

模块三十四 项目：图床应用

技术栈：CRA、styled-components、React、Hooks、Antd、Mobx、LeanCloud
项目描述：使用React全家桶开发一个图床应用，含登录、注册、图片上传、图片尺寸定制、图片上传历史展示等功能。使用create-react-app搭建项目结构，styled-componets控制样式，Mobx实现状态管理，引入Antd的form表单验证，使用Leancloud做ServerLess后端数据管理。
项目难度：★★★★

原生项目

模块三十五 oneSlide在线幻灯片制作平台

项目描述：使用原生JS开发一个在线幻灯片制作平台，支持markdown文章一键生成完整在线幻灯片，## 开头的二级标题和其后内容自动会转换成左右移动的页面，### 开头的标题和之后的内容会转换成上下移动的页面。简洁美观，支持各种风格和转场特效，支持图片上传。项目的核心难点是开发了一个Markdown解析器，能把markdown文章通过正则和复杂操作编译成符合特定规则的HTML。通过项目能学到：

  1. HTML5、CSS3、原生JavaScript开发真实项目的能力
  2. Markdown解析器的开发涉及复杂的字符串处理逻辑、正则操作，能大大提升学习者的JS基本功

模块三十六 移动端华为音乐

项目描述：使用HTML5、CSS3、原生JS开发一款移动端华为音乐，支持音乐播放、暂停、上一曲、下一曲、歌词左右切换、歌词随音乐展示等功能。通过项目能学到：

  1. 移动端布局技巧、CSS3常见动效、字体图标等使用
  2. 移动端手势库封装、发布订阅模式
  3. 歌词的解析处理、随动播放等复杂逻辑

模块三十七 造一个简易Webpack

项目描述：模拟webpack的发明思路， 使用Node.js从0实现一个简易webpack，通过配置config文件，实现模块打包，不依赖任何第三方模块。支持模块化打包require和module.exports，还支持ES6模块化import和export。通过项目能学到：

  1. 锻炼需求出发编写迷你工具框架能的能力，让基本功更扎实
  2. 掌握Webpack的原理，如依赖解析、创建资源对象、AST等
  3. 提升原生JS的数据操控能力

模块三十八 造一个移动端手势库

项目描述：封装一个移动端手势库，包含 touchstart、touchend、touchmove、 tap、doubletap、 pinch、rotate、swipe、pressMove 等移动端场景事件。通过项目能学到

  1. 代码封装能力，如模块模式、对象模式等
  2. 事件发布订阅模式
  3. 原生JS的基本功，对原始支持事件的处理

模块三十九 造一个简易jQuery

项目描述：通过分析jQuery源码，封装一个jQuery。1. 支持jQuery对象极联调用如 \$('body').addClass().addClass()； 2. 支持静态方法调用\$.get()。通过项目能学到

  1. 面向对象、原型等知识极其深度的应用，让基本功更坚实
  2. 学习代码封装技巧

面试辅助及押题

  1. HTML+CSS押题
  2. JS押题基础篇
  3. JS押题手写篇
  4. DOM押题
  5. HTTP 押题
  6. TypeScript 押题
  7. Vue 2 押题
  8. Vue 3 押题
  9. React 押题
  10. Node.js 押题
  11. 工程化押题（webpack、vite）
  12. 非技术题
  13. 算法押题

学习说明

整个学习周期分为几个阶段 1. 体系知识学习阶段（模块1\~模块9）。采用纯直播跟班模式，学员进班，统一开班，统一进度，统一直播。
2. 项目阶段（模块18\~模块29）。项目根据学员情况私人定制选择，做到一方面能扎实锻炼编程能力，一方面和公司需求接轨，一方面放在简历里好看，同时也能一定程度避免培训机构典型的项目“千篇一律”。项目通过视频+老师1v1辅导的形式开展。提供真实企业级项目团队配合开发也在我们的规划中。
3. 求职阶段（模块30、31）。老师多对一简历指导（多个老师辅导一个学生）、模拟面试、提供海量押题和题解资料。
4. 持续成长阶段（模块10～17）。用于就业后持续提升夯实基础，让自己在职场更有竞争力。该阶段也适合大厂校招的同学。

  1. 主干体系课纯直播模式
  2. 课程体系模块化，可根据学员的情况私人定制，让学员能学的完、学的下去、能达到目标
  3. 知识点深度、广泛，完整的全部课程几乎涵盖大中小厂面试会涉及的绝大多数知识点，也涵盖日常工作所需的主流技术框架。课程重视动手、重视基本功、重视编程能力、重视原理。尽管知识点如此庞大，所涉及的内容均没有冗余和比较偏的部分。

如何选课

大厂校招和中小厂社招是两个不同的学习模式。 大厂校招极其重视前端基本功。比如CSS核心难点、HTTP、Promise手写、Webpack原理、框架原理和细节、性能优化等。笔试和面试时也会涉及大量手写代码和代码输出的考察。对待项目，大厂反而不需要求职者需要各种所谓的“企业级项目”比如商城、管理系统、Uniapp、小程序等。简而言之，大厂重深度、难度、原理、手写。当然大厂校招一般对学历学校也往往有一定要求。

如果是0基础转行，只想顺利拿到前端offer，学习的重心放在核心知识快速上手，丰富的实战项目上。在原理、性能、封装复用、手写代码上可暂时放下（该部分本身非常难且晦涩学习耗时很长，学完也并无可展示的东西，初级岗位考察的几率也不高，可用待以后工作后慢慢学习）。项目这块相比大厂校招需要投入更多做的更“好看”，技术栈要全面、项目表面上看起来要“商业”。比如可以做Vue商城、Uniapp、小程序、云笔记、原生造轮子等。

大厂校招学习路线的必选模块为：模块二（CSS重难点）、模块三（ECMAScript）、模块四（ECMAScript重难点）、五（DOM）、六（BOM）、七（前后端交互）、八（渲染机制）、九（模块化与项目构建）、十（HTTP与安全）、十一（性能优化）、十二（移动端）、十七（手写代码），React方向项目选择两个，原生造轮子项目选择两个以上，刷题必看。

0基础面向就业必学模块为：模块一（HTML）、模块二（CSS重难点）、模块三（ECMAScript）、模块四（ECMAScript重难点的面相对象部分）、五（DOM）、七（前后端交互）、九（模块化与项目构建）、Vue方向选择四个大项目（如组件库、小程序、商城、uniapp）、原生项目选择两个以上，刷题必看。

2023，前端如此之卷，祝你好运。

饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com