系统大前端学习路线

第一阶段：HTML/CSS3以及工具部分

HTML和CSS用来制作网页，利用盒子模型，浮动，定位，flex布局进行网页布局，网页颜色，字体，背景，变换，过渡，动画等增强网页的展示效果。

这个阶段的学习周期大概在20天左右

需要学习的内容如下：

vscode开发工具使用
markdown文档工具使用
浏览器平台环境
标签基础
DTD与META
语义化
选择器
权重与优先级
匹配规则
浮动与清除
BFC
类名组合规则
SEO前端技巧
定位
叠加技巧
伪类
伪元素
盒子模型
代码规范
性能优化
渲染原理
CSS Sprites
iconfont字体图标
布局思路
布局定式
css3动画
css3选择器
css3过渡
flex布局
背景渐变
css3实用动效
3D模块
css3变量
em/rem/vw

这个阶段的重点是主要是这些：标签、选择器、权重优先级、匹配规则、浮动与清除、BFC、类名组合规则、定位、叠加技巧、伪类、伪元素、盒子模型、布局思路、CSS3选择器、flex布局、em/rem/vw

达标水平：熟练掌握HTML、CSS核心语法，掌握多种布局技巧，能够独立绘制前端静态页面。能够做到按照企业开发模式还原设计图原型图，并保证符合w3c规范，结构健壮，代码精简，可扩展性强，兼容性强，SEO语义性强的页面项目。

学完这些可以完成一个企业内部多页面项目实战（非仿站），这个练手项目，我也上传到上文的群文件了，学完html和css缺少练手项目的，可以加入上文的前端学习交流群自行下载。

第二阶段：JavaScript 部分

JavaScript简称JS，主要用来填充网页的动态效果和数据交互，从JavaScript基础语法（ES5、ES6+）规则到DOM和BOM对象的属性和方法，从而完成网页常见的交互效果。

这个阶段的学习周期大概在50天左右

需要学习的内容如下：

JavaScript概念

基础认知
发展历史
应用范围
优缺点

ECMAScript

语言概览
语句语法
数据类型
运算符
隐式转换
运算规则
控制流程
作用域
作用域链
作用域解析
js解释引擎
字符串属性方法
for of/for in
数组属性方法
对象
广义对象概念
对象特性
存储机制
深拷贝
对象实际应用
工厂模式
构造函数
原型
原型链
原型指向
封装
多种继承
包装对象
this
this指向
js数据处理
垃圾GC
闭包原理与应用
debug方法论
浏览器控制台工具应用
面向对象开发
函数式开发
纯函数
递归函数
回调函数
组合函数
缓存函数
柯里化函数
偏函数
函数防抖与节流
高级函数
IIFE函数
模块化
数学对象
高级数组方法（reduce、filter、map、every、some、forEach、find、findIndex、include）等
高级对象方法（entires、defineProperty、freeze、fromEntries、assign、keys、create、hasOwnProperty）等
this通过bind
call
apply指向偏移
同步与异步
闭包模块化
数据形变处理
性能处理

DOM/BOM

DOM对象与方法
节点与遍历树
DOM选择器
DOM节点增删改查
DOM样式操作
DOM位置获取与偏移
DOM对象与标签区别
DOM虚拟化
DOM事件
Event对象
定时器与监听器
事件委托
事件代理
事件分流
事件冒泡
默认行为
事件捕获
防抖
节流
滚动
键盘行为
事件降频
行为锁机制
拖拽模组
碰撞检测
距离判断
三角函数
方向判断
运动框架
弹性运动
重力加速度
DOM树
CSSOM树
渲染解析
加载
回流
重绘
浏览器线程与阻塞。
BOM深入
window对象
navigator
history
screen
location
spa概念
本地传参
日期对象使用
日期格式化封装
随机封装
DOM分片容器

JS业务应用扩展

JSON对象
数据解析
JSON方法
模板渲染
缓存懒加载
正则表达式RegExp
元字符
修饰符
正向预查
贪婪模式
replace方法
分组与不分组
test
match与exec
正则库封装
表单校验
图片预存懒加载
自定义封装滚动组件
多重轮播（循环、视差、旋转木马）
选项卡切换
楼梯导航
吸顶导航
拖拽导航
JavaScript编码风格指南
console应用技巧

ECMAScript5 --- ECMAScript9扩展

版本解读
应用环境
let
const
解构赋值
箭头函数
对象解构
reset参数解构
class
set
get
extends
super
static
private实现
symbol
promise
proxy代理拦截
async/await
对象新增API
数组新增API
字符串新增API
原型属性
对象修饰
代理拦截
链式询问
空值合并运算符

这个阶段的所有内容都是重点，都要掌握！后面的框架那些都是基于JS的。这个阶段的学习目标是拥有编程思维，能够运用浏览器环境中的dom、bom解决前端需求。

达标水平：能够使用原生javascript进行业务开发，能实现常见的DOM库和工具库，能够修改第三方库源码以供业务特殊需求使用。

学完以后最好就是找一个小项目进行练习，检验自己的学习情况。如果你学完js，缺少练手的项目，可以做一下这个泡泡龙面向对象小游戏，源码、素材这些我都上传到上文的群文件了，有需要可以加入这个交流群，自行下载练习。

第三阶段：HTML5 / 移动端开发

移动端主要针对于手机、平板尺寸小，功能全的网页，需要掌握多尺寸的适配技术和概念。利用html、css、js完成移动端适配，以及响应式布局的技巧。

这个阶段的学习周期在30天左右

需要学习的内容如下：

HTML5标签与API

HTML5概念
定义
新增特性
DTD对比
新增H5标签
新增语义化H5标签
H5表单
H5拖拽事件 video
audio
fullScreen
FileReader文件流
Blob对象
sessionStorage
localStorage
网络状态
页面生命周期
网页状态监听
地理信息与定位
canvas画布
worker多线程
Notifications桌面通知
播放器开发
canvas交互特效开发

移动端适配/事件

移动端适配概念
尺寸与分辨率原理
PPI与DPI计算
DIP与DPR设备像素概念
视口viewport概念
布局视口
视觉视口
理想视口
视口适配方案（Meta viewport）缩放设置
screen窗口大小API
媒体查询@media
rem适配
vw vh适配
移动端适配方案
flexible rem方案
vh vw方案
复合方案
高清适配方案
移动端字体缩放解决
1px边框问题解决
半像素线
图片高清适配
image-set
srcset
js拼接URL技巧
IPhonex刘海屏适配
安全区域
fit与env
Meta权限管理
兼容优化
IOS头部底部闪屏回退输入框问题
输入法空格问题
默认首字母大写问题
滑动卡顿问题等
终端样式美化与访问判断
Touch事件组封装
click延迟处理
FastClick使用
禁用缩放设置理想视口

常用类库/工具

jquery: 元素选择、增删改差、事件处理、位置获取、动画过渡、高级方法、特效应用

zepto：移动端的jquery、DOM操作、移动端事件、click延迟处理、touch事件组

基础UI库: layerUI 、easyUI、bootStrap、UI模块化、UI库使用技巧、文档解读、案例调试、表单系统

iScroll、touchjs等移动端事件库使用

swiper：移动端网站触摸滑动、轮播图插件、模块化应用、源码解读

art-template: 模板引擎模板语法、渲染方法、原生模板引擎实现

CSS预处理：sass、less使用 stylus深入学习、预处理语法、css编程、 Minxin 、预处理函数、继承、嵌套

vscode高级插件与配置 liveserver sass

模板化应用、预处理应用

date-picker移动端原生组件开发

需求分析
业务规则
技术栈选型
文件输出规则
技术分析
MVC模型概念与设计
业务逻辑分类
view层适配方案
原型布局搭建
模板化生成
工具函数开发
面向对象式业务设计
功能类日期对象开发
交互业务封装
模块对接
优化设计
面向对象高级程序设计

这一阶段的重点是移动端适配/事件、CSS预处理和date-picker移动端原生组件开发，主要是把移动端的概念掌握，能够使用rem+vw来进行适配。

达标水平：能够独立实现移动端H5开发适配各种移动设备并且能够处理各种兼容问题，能够利用原生js结合H5 新特性实现各种功能组件，例如音频视频播放器、懒加载、下拉刷新、等业务组件。

这个阶段可以做一个H5播放器进行自测。这里给大家准备了一些H5移动端的学习笔记，学习过程中常见的一些问题在这些学习笔记上都有讲解，有需要也可以加入WEB前端群免费领取。

第四阶段：Nodejs与工程化开发部分

Node.js使javascript可以运行在操作系统，从而完成更加全面的功能，比如操作系统中的文件操作，数据库操作等等；前端大部分工程化框架都是由nodejs来创建，比如webpack、vite等等；另外还可以完成整个网站后台的服务编写，从而窥探网站开发的整个过程。

这个阶段的学习周期在50天左右

需要学习的内容如下：

Node原生基础

Node基础概念
NPM命令
V8引擎概念
JavaScript模块化 CMD AMD UMD
EventLoop事件循环
同步异步
阻塞非阻塞
任务队列
宏任务
微任务
原生Node模块
核心模块与require
module
触发器events与path模块
fs模块
Buffer对象
URL模块
HTTP模块
stream流
Node原生封装HTTP与文件服务器

Node框架

express框架使用
中间件
核心对象
路由配置
模板引擎
数据脚本
Router核心
CORS配置
错误处理
校验封装
PM2管理
nodemoon管理
MORGAN日志处理
查询正则捕获
中间件开发
bodyParse等第三方中间件使用
文件流上传下载
文件流切分

webpack工程化构建

工程化概念
工程化工具介绍
webpack基础知识
webpack配置与运行
plugin插件
loader使用
入口出口配置
模块modules
依赖处理
dev Server
target
文件切分
build打包
热处理
package管理
性能优化
测试处理
第三方插件使用
babel等

前后端数据交互

HTTP通信交互原理
请求响应
MIME
URI地址
报文解析
端口
报文流
测试监听抓包
TCP/IP握手机制
网络业务模型
代理
缓存
网关
隧道等概念
method与请求头分类
基础XMLHTTPRequest对象方法属性
方法
ajax异步交互
同源策略原理
原生js封装ajax交互
jquery的ajax封装交互
jsonp跨域处理
cors跨域处理
携带cookie与跨域处理
代理服务器跨域处理
cookie验证与通信
axios库的使用
代理
封装
拦截
合并
二次封装
通信加密策略
数据对称加密
数据非对称加密
RSA加密实践
MD5加密实践
登录注册与鉴权机制
Authenticity认证
Token认证
JWT认证
session状态管理
oauth认证

RESTful接口设计

RESTful设计原则
状态码设计与规范
服务器响应规则与格式
前后端接口协议制定
传统RESTful改进
API设计规范
资源定位
JSON模式
合约说明
资源标识符
缓存友好API
HTTP头管理
文档定义
松耦合原则
一致性
重用
稳定性原则

数据库存储

MongoDB基础概念
NoSQL与SQL
CAP定理
RDBMS
MongoDB语法
指令
监控与GUI
MongoDb驱动
Mongoose应用
数据库创建
集合增删改查
文档增删改查
数据库查询
高级查询操作
通道查询
多条件查询
反向筛选
索引处理
aggregate聚合管道、
validation验证
population联表
middleware中间件处理
查询ERROR类二次封装

博客后台项目实战

数据库设计
服务端路由搭建
接口设计与API管理
通信交互管道封装
注册登录
路由导航
前端路由管理
权限管理
用户管理
分类管理
标签管理
文章管理
模块化功能封装
校验库封装
promise链式行为封装
异步模块处理
SPA单页面应用初级实现
原生集中行为控制器
模板化+模块化+预处理+工程化实现前端页面

组件化封装

组件化基础概念
组件设计原则
组件封装
组件耦合与解耦
工程化+模板化+模块化实现原生组件化功能

这个阶段的重点是webpack工程化构建、前后端数据交互、博客的后台项目实战这三块，学习目标是掌握前端工程化与后端的数据交互。

达标水平：能够理清完整的WEB应用情景和交互行为,从理论到实践掌握常规数据库设计、路由设计、工程化、模块化、组件化、权限、鉴权、加密、跨域、认证，能够完成从前端到后台到数据库一整条线路的注册、登录、查询、修改、管理等功能。

vue框架部分

框架可以提升开发效率和团队协作，底层依靠前端三剑客（html、css、js）进行封装完成。从mvvm概念入手，进一步理解原理，数据劫持（defineProp或proxy）、发布订阅、diff算法，，来理解为什么vue可以简化前端开发，提升效率，原理之上就是各种语法糖的学习。另外一点就是团队协作，也是正因为框架的统一性封装，在之上进行开发可以让开发人员代码风格统一，便于协作共事。

这个阶段的学习周期大概在40天左右。

需要学习的内容包含：

vue基础