未经授权，不得转载

前端课程体系大纲

总阶段名称	阶段分支名称	技术名称	技术内容	学习目标
前端基础阶段	WEB基础	HTML基础	1.安装webstorm 2.设置webstorm 3.HTML介绍 4.HTML属性和值 5.HTML注释 6.HTML基本结构（DTD文档模型） 7.标题标签h1-h6 8.段落标记p 9.强制换行br 10.水平线hr及其属性 11.图片img 12.超链接a 13.address和pre标签 14.文本格式化标签b,i,u,em等 15.无序列表 16.有序列表 17.自定义列表 18.表格 19.实体字符 20.内联框架iframe 21.form表单及其action、method、name属性 22.input 23.input常用属性value，checked，readonly，disabled 24.下拉列表 25.多行文本框textarea 26.HTML5新增input类型 27.HTML5新增属性 28.HTML5新增结构标签 29.视频和音频	1.掌握WebStorm的使用 2.了解HTML对于网页的意义 3.掌握HTML标签与属性 4.掌握常用标签 5.掌握无序列表、有序列表和自定义列表 6.掌握表单的使用 7.掌握div与标签的嵌套规则 8.掌握行内元素与块元素的使用 9.掌握实体字符 10.掌握HTML5新增标签与属性
		CSS基础	1.css介绍和基础语法 2.引入css的方式 3.link和@import的区别 4.css基本选择器 5.背景属性 6.字体属性 7.文本属性 8.列表属性 9.关系选择器 10.属性选择器 11.伪类选择器 12.伪对象选择器 13.css hack 14.标准盒子模型、怪异盒子模型、弹性盒子模型 border、margin、padding属性 15.IE和模型 16.box-sizing属性 17.弹性盒 18.浏览器内核及厂商前缀 19.浮动及其原理 20.清除浮动的方法 21.display属性 22.position定位（相对定位布局、绝对定位布局、固定定位布局） 23.z-index属性 24.圆角 25.阴影 26.渐变 27.转换 28.过渡 29.动画 30.媒体查询 31.多列 32.滑动门 33.雪碧图：小图标合成雪碧图，雪碧图取法锚点、透明、相框模型等 34.溢出：单行溢出、多行溢出解决方案	1.掌握CSS基础 2.掌握CSS引入方式 3.掌握选择器的使用 4.掌握CSS盒子模型 5.掌握CSS弹性盒子模型 6.掌握浮动与定位 7.掌握字体常见属性 8.掌握CSS Sprite 雪碧图优化站点 9.掌握滑动门展示形式
	JavaScript阶段	JavaScript基础语法	1.JavaScript简介 2.JavaScript变量 3.JavaScript变量类型 4.JavaScript类型转换 5.JavaScript运算符 6.JavaScript条件分支语句 7.JavaScript循环语句 8.内存问题 9.垃圾回收机制	1.熟知JavaScript介绍 2.掌握JavaScript变量声明 3.掌握JavaScript变量类型与转换 4.掌握JavaScript运算符操作 5.掌握JavaScript条件分支语句 6.掌握JavaScript循环语句
		数组与对象	1.数组定义 2.数组的本质 3.数组属性与运算符 4.数组的循环遍历 5.数组静态方法 6.数组的实例方法 7.对象概述 8.对象属性操作 9.对象的静态方法 10.对象的实例方法	1.掌握数组定义 2.掌握数字的应用 3.掌握数组的属性和方法 4.掌握对象的概念 5.掌握对象的属性和方法 6.熟练应用对象
		函数及相关	1.函数的概念 2.函数的声明 3.函数的属性和方法 4.函数作用域 5.函数参数 6.函数返回值 7.闭包基本概念 8.闭包实现 9.闭包应用场景 10.自执行函数	1.了解函数概念 2.掌握函数的声明 3.掌握函数的属性和方法 4.掌握JavaScript中的作用域 5.掌握函数的参数与返回值 6.掌握闭包的应用场景 7.熟练使用闭包
		JavaScript标准库	1.包装对象 2.Number对象 3.String对象 4.Math对象 5.Date对象 6.JSON对象 7.RegExp对象 8.console对象 9.属性描述对象	1.掌握包装对象 2.掌握Number对象 3.掌握String对象 4.掌握Math对象 5.掌握Date对象 6.掌握JSON对象 7.掌握正则对象 8.熟悉console对象
		DOM模型与事件	1.DOM概述 2.Doucment节点 3.Element节点 4.属性的操作 5.Text节点 6.DoucmentFragment节点 7.事件模型 8.事件类型 9.事件代理 10.CSS操作 11.自定义事件 12.this关键字 13.Event对象 14.移动端事件类型 15.事件实例操作 16.三级联动 17.实例：模拟键盘	1.掌握JavaScript DOM操作 2.掌握JavaScript 节点操作 3.掌握事件模型 4.掌握事件操作 5.掌握this关键字 5.掌握Event对象 6.熟练编写自定义事件 7.理解三级联动逻辑
		BOM对象详解	1.window对象 2.location对象 3.navigator对象 4.screen对象 5.history对象 6.BOM操作 7.定时器 8.实例：心形跳动、模拟时钟、Tab自动切换	1.掌握JavaScript BOM操作 2.掌握BOM对象：Windows、location等 3.掌握定时器操作
		this、call、apply使用	1.this关键字 2.call和apply使用 3.bind绑定 4.变量作用域 5.闭包Closure 6.实例：Tab切换和实时时钟	熟悉this、call、apply的用法
		网络请求与专题	1.浏览器类型区分 2.网络请求基础 3.HTTP协议 4.XHR对象 5.XHR实例属性 6.XHR实例方法 7.XHR实例事件 8.文件上传 9.封装网络请求 10.异步操作 11.错误处理机制 12.编程风格 13.跨域处理 14.本地存储Cookie 15.本地存储WebStorage	1.掌握HTTP协议 2.掌握XHR对象 3.掌握Ajax 4.能够独立封装Ajax网络请求 5.了解错误处理机制 6.建立良好的编程风格 7.掌握本地存储
		实战轮播图、瀑布流	1.实例：JS原生封装轮播图 2.实例：JS原生封装瀑布流	通过实例来熟悉JS原生代码
		原型、原型链、面向对象、设计模式、JSON	1.对象简介 2.构造函数 3.new 关键字 4.实例对象创建 5.Prototype对象 6.原型prototype与原型链 7.instanceof运算符 8.对象与继承 9.对象操作与拷贝 10.多重继承 11.模块与封装 12.设计模式:：工厂模式、构造函数模式、原型模式、混合模式、动态原型模式 13.工厂模式 14.观察者模式 15.单例模式 16.MVC与MVVM 17.JSON解析	1.了解面向对象 2.熟悉构造函数 3.掌握new关键字 4.掌握原型与原型链的使用 5.掌握对象和常见操作 6.掌握继承与封装 7.掌握基本设计模式原理 8.掌握观察者模式 9.掌握MVC和MVVM
前端高级阶段	HTML5新特性	HTML5新特性	1.HTML5语义化标签 2.HTML5语义化标签布局 3.HTML5状态标签 4.HTML5列表标签 5.HTML5注释标签 6.HTML5标记标签 2.HTML5本地存储 3.HTML5离线Web应用 4.HTML5连贯性 5.HTML5多媒体（video、audio、source） 6.HTML5性能提升 7.HTML5调用原生API 8.input新属性 9.placeholder 10.autocomplete 11.autofocus 12.required 13.音阶导航 14.自定义播放器 15.响应式布局 16.媒体选择器 17.子元素选择器 18.相邻兄弟选择器 19.通用兄弟选择器 20.伸缩盒模型新版本 21.伸缩盒模型老版本 22.伸缩盒模型布局 23.多列布局 24.粘连布局 25.圣杯布局 26.双飞翼布局 27.伪等高布局 28.bfc两列布局	1.掌握HTML5新特性有哪些 2.掌握HTML5的语义化标签实现方式 3.掌握HTML5的本地存储方式 4.掌握HTML5提供的多媒体使用 5.掌握HTML5的各种布局
		Canvas专列	1.Canvas基本使用 2.Canvas绘制矩形 3.Canvas橡皮擦 4.Canvas线段 5.Canvas三角形 6.Canvas五角星 7.Canvas签名 8.Canvas圆形 9.Canvas圆弧 10.Canvas位移 11.Canvas缩放 12.Canvas旋转 13.Canvas变换基点两种形式 14.Canvas时钟效果 15.Canvas加载图片 16.Canvas飞鸟效果 17.Canvas线性渐变 18.Canvas径向渐变 19.Canvas填充文字 20.Canvas镂空字 21.Canvas文字水平垂直居中 22.Canvas文字阴影 23.Canvas和阴影 24.Canvas图片合成 25.Canvas刮刮卡 26.Canvas读取像素 27.Canvas写入像素 28.Canvas创建像素对象 29.Canvas操作单个像素 30.Canvas马赛克效果 31.HTML5 Canvas游戏-连连看 32.HTML5 Canvas游戏-消消乐	1.掌握HTML5 Canvas标签应用
	CSS3新特性	CSS3新特性	1.群组选择器 2.交集选择器 3.基本属性选择器 4.包含属性选择器 5.锚点伪类 6.用户行为伪类 7.目标伪类 8.目标伪类实现图片切换 9.checked状态伪类 10.自定义单选按钮 11.CSS3结构类 12.CSS3结构类实现尺子效果 13.否定选择器 14.伪元素::first-line 15.伪元素::first-letter 16.伪元素::before 17.伪元素::after 18.伪元素::selection 19.伪元素实现文章列表 20.使用纯css制作绘制三角形、梯形、圆形 21.子元素选择器 22.相邻兄弟选择器 23.通用兄弟选择器 24.群组选择器 25.交集选择器 26.基本属性选择器 27.包含属性选择器 28.锚点伪类 29.用户行为伪类 30.目标伪类	1.掌握特殊图形绘制 2.掌握CSS3过渡与动画 3.掌握CSS3的媒体查询 4.掌握选择器的使用
		CSS3进阶	1.目标伪类实现图片切换 2.checked状态伪类 3.自定义单选按钮 4.CSS3结构类 5.CSS3结构类实现尺子效果 6.transition-property 7.transition-duration 8.transition-timing-function 9.transition-delay 10.2d变换旋转 11.2d变换平移 12.2d变换缩放 13.2d变换扭曲 14.2d变换基点 15.综合2d变换 16.transform-style 17.animation综合使用	1.掌握CSS3图像样式变换 2.掌握CSS3动画效果
		CSS预处理语言Less与Sass	1.Less环境搭建与编译 2.Less服务器端渲染 3.Sublime Text安装插件 4.Less语法-变量、混合、嵌套 5.Less语法-计算、函数 6.Less语法-继承、引导判断 7.Sass使用	1.了解CSS预处理语言的优势 2.掌握Less环境搭建 3.了解Less的服务器端渲染 4.掌握Less的使用语法 5.掌握Sass的基本使用
		CSS3实例演练	1.使用纯css制作三角形 2.圆角边框的使用 3.实现圆形 4.实现椭圆形 5.实现扇形 6.太极图效果实现 7.风车效果实现 8.文字阴影，模糊，背景，排版，描边 9.浮雕文字 10.标准盒子模型与怪异盒子模型 11.盒阴影使用 12.模糊盒阴影 13.立体球效果 14.倒影效果 15.盒子大小调节效果 16.背景裁剪 17.背景模糊 18.线性渐变基本使用 19.重复线性渐变 20.发廊灯效果 21.马赛克地砖 22.光斑动画 23.径向渐变基本使用 24.重复径向渐变 25.3d变换旋转 26.3d变换位移 27.3d变换缩放 28.3d变换基点 29.综合3d变换	通过实例演练进一步加深对CSS3的理解与掌握
	jQuery阶段	jQuery	1.jQuery简介 2.jQuery DOM操作 3.jQuery事件 4.jQuery表单 5.jQuery CSS操作 6.jQuery核心API 7.jQuery特效 8.jQuery尺寸 9.jQuery内部函数 10.jQuery选择器 11.jQuery遍历操作 12.jQuery数据操作 13.jQuery Ajax 14.jQuery杂项 15.jQuery实战练习 （1）实例：返回顶部、对联广告、发表说说、动态导航、延时动画 （2）实例：模拟下拉框	1.熟悉jQuery常见操作 2.熟悉jQuery DOM操作 3.掌握jQuery 核心API 4.掌握jQuery Ajax操作 5.掌握jQuery 选择器 6.掌握jQuery特效 7.掌握jQuery实战练习
		第三方UI组件库	1.BootStrap介绍 2.BootStrap引入 3.BootStrap栅格系统 4.BootStrap全局CSS样式 5.BootStrap组件应用 6.BootStrap JavaScript插件 7.BootStrap定制需求 9.BootStrap实例操作 10.Swiper3.x应用 11.Swiper4.x应用 12.快速简洁图标可视化库Echarts应用 13.兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库highcharts 14.REM移动端适配 15.BootStrap 栅格系统原理响应式设计 16.流行图标可视化库D3 17.移动端类JQuery库Zepto	1.掌握BootStrap使用 2.掌握BootStrap栅格系统 3.掌握BootStrap全局样式 4.掌握BootStrap组件应用 5.掌握BootStrap插件应用 6.掌握BootStrap定制需求 7.掌握Swiper的应用 8.掌握REM移动端适配 9.掌握Echarts图表 10.掌握highcharts图表 11.掌握D3的使用 12.地图API 13.全屏滚动插件
	版本控制工具	Git实战应用	1.SVN介绍 2.SVN客户端与服务器端搭建 3.SVN关联仓库 4.SVN客户端提交与更新 5.SVN冲突解决 6.Git介绍 7.GIt创建仓库 8.Git版本回退管理 9.Git分支管理 10.Git冲突解决 11.linux常见命令 12.创建本地仓库 13.检出、克隆本地仓库 14.拉取远程代码 15.分支的操作 16.处理冲突实战 17.svn与git对比 18.git中差异对比 19.git中版本回退 20.github的使用 21.github创建组织 22.github的pullRequest操作 23.github的issues 24.githubPages的使用 25.Git关联Github 26.Git关联Gitee	本阶段主要掌握SVN和Git的应用，在工作中，团队协作，代管管理，版本控制全部依赖于这两个工具，尤其是Git更为主要掌握工具。课程同样偏向Git的应用，同时关联远程仓库。
后台技术阶段	服务器端	服务器端开发	1.Node优势及发展趋势 2.Node中的时间轮询机制 3.npm、cnpm、yarn包管理器 4.Node.js核心基础 5.Buffer缓冲器 6.Node文件系统（简单、流式文件操作） 7.原生Node搭建服务器 8.Express搭建服务器 9.ejs模板渲染 10.cookie、session的使用 11.实时通信聊天库Socket.io的使用 12.GraphGL 13.测试框架mocha	1.理解node中npm、cnpm、yarn包管理器的使用 2.掌握ejs模板渲染 3.掌握实时通信聊天库Socket.io的使用
		Nodejs与Express	1.安装Node于CMD命令 2.Node创建服务器 3.Node相关操作 4.Commonjs规范 5.Express安装 6.Server基本操作 7.Express路由基础 8.Express路由配置 9.Express路由应用 10.实现前后端交互 11.Post参数请求 12.Get参数请求 13.JSONP跨域处理 14.过滤数据 15.Nodejs链接数据库 16.Server增删改查 17.基于node.js平台的下一代web开发框架koa（Express原班人马打造）	1.了解Nodejs 2.独立安装Nodejs环境 3.熟悉CMD命令行操作 4.掌握Express安装 5.掌握Express路由的应用 6.掌握请求方式POST与GET 7.掌握JSONP的使用 8.掌握数据过滤 9.掌握数据库基本操作 10.掌握链接数据 11.掌握服务器端搭建 12.了解基于node.js平台的下一代web开发框架koa
	数据库	数据库操作	1.HTTP协议与报文 2.基于Express的路由、中间件 3.MongoDB数据库基础 4.数据库搭建 5.数据库建表 6.数据库增删改查 7.mongoose的使用 8.非关系型数据库特点 9.服务器同数据库交互 10.sha1、MD5加密隐私数据
		PHP与数据库	1.PHP基础语法 2.PHP类与继承 3.PHP中理解面向对象 4.MySQL基础 5.MySQL数据库操作 6.MySQL Form表单 7.PDO链接数据库 8.事务处理与时间戳 9.PHP+MySQL创建接口 10.前后端交互处理 11.Get与POST请求 12.前后端实战练习 13.Apache 14.HTTP(s)协议详解 15.Ajax进阶、跨域与Defered 16.接口的定义 17.Mock数据 18.Restful 19.前后端联调 20.前端安全(XSS,CSRF,JSON注入)	1.掌握PHP基础语法 2.掌握PHP类与继承 3.掌握MySQL操作 4.掌握PHP链接MySQL 5.熟悉PDO链接数据库 6.熟悉前后端交互 7.掌握get和post请求 8.理解前后端交互过程
前后端交互核心	Ajax阶段	ajax	1.原生Ajax（xhhr） 2.基于框架的Ajax（jquery） 3.JSON/XML 4.跨域问题 5.JSONP解决跨域问题 6.JSONP底层原理深入剖析 7.CORS解决跨域问题 8.nginx的简单使用 9.GET,POST请求区别 10.新型ajax请求方式fetch 11.前后台ajax请求库axios 12.rest api	1.学会使用原生ajax与戴框架的ajax传值 2.学会解决跨域问题 3.掌握get、post请求 4.了解nginx服务器的使用 5.掌握新型ajax请求方式fetch与前后台ajax请求库axios的用法
		Ajax实战项目-蓝莓派	1.蓝莓派项目设计 2.蓝莓派环境构建 3.蓝莓派页面登录Ajax 4.蓝莓派页面登录与PHP与MySQL 5.蓝莓派网络请求封装 6.蓝莓派页面加载 7.蓝莓派模态框处理 8.蓝莓派分页器实现 9.蓝莓派瀑布流效果实现 10.蓝莓派动态加载数据 11.蓝莓派音频控制 12.蓝莓派业务逻辑实现 13.蓝莓派进度条实现 14.蓝莓派第三方UI库引入 15.蓝莓派项目优化	本项目名称为蓝莓派，主要为音乐社区类型。包含较多的交互功能，例如滑动门，雪碧图使用，模态框，瀑布流和焦点轮播图等效果。当然，前后端交互也是不可少的，主要理解前后端交互流程与练习各种交互实现。
	接口	接口问题	1.mock后台数据接口的库Mock.js/EsayMock 2.接口调试神器：postman	1.掌握接口文档的制作
JavaScript高级阶段	JavaScript高级	JavaScript基础深入	1.基础深入: 数据类型及判断 2.基础深入: 数据, 变量与内存 3.基础深入: 对象 4.基础深入: 函数 5.断点调试 6.debugger调试 7.JS线程机制: 进程与线程 8.JS线程机制: 单线程JS 9.JS线程机制: 多线程JS 10.JS事件循环机制: 再看定时器 11.JS事件循环机制: 模型分析 12.原型/链: prototype 13.原型/链: __proto__ 14.原型/链: 内存结构分析	1.掌握JS线程机制 2.掌握JS事件循环机制 3.掌握原型/链
		JavaScript面向对象编程	1.执行上下文/栈: 变量/函数提升 2.执行上下文/栈: 执行上下文 3.执行上下文/栈: 执行上下文栈 4.作用域/链: 作用域 5.作用域/链: 作用域链 6.闭包: 闭包是什么 7.闭包: 产生闭包的条件 8.闭包: 闭包的生命周期 9.闭包: 闭包的应用 10.闭包: 闭包的缺点及解决 11.数组与对象 12.栈 13.队列 14.编程模拟进出栈	熟悉作用域与作用域链，以及闭包的基本知识
		JavaScript异步编程	1.同步与异步 2.回调函数 3.Promise 4.Generator 5.async与await 6.宏队列与微队列 7.宏任务和微任务 8.JS事件循环机制: 再看定时器 9.JS事件循环机制: 模型分析 10.同步异步的优缺点 11.JS编程环境和模型 12.JS事件队列 13.JS管理模块说明	掌握JavaScript同步与异步的概念以及回调函数、队列等知识
		JavaScript函数式编程	1.各种编程范式 2.基本理解和使用 3.高阶函数 4.纯函数 5.函数柯里化 6.代码组合 7.函数化封装 8.如何使用好函数 9.链表 10.常用排序算法1: 冒泡 11.常用排序算法2: 选择 12.常用排序算法3: 插入	1.了解各种编程范式 2.掌握几种特殊的函数以及函数化封装 3.掌握常用的三种排序算法
		JavaScript设计模式与本地存储	1.面向对象编程 2.常用模式介绍 3.单例模式 4.工厂模式 5.建造者模式 6.原型模式 7.代理模式 8.代理模式 9.观察者模式 10.享元模式 11.继承模式1: 原型链 12.继承模式2: 借用构造函数 13.继承模式3: 组合式 14.继承模式4: 原型式 15.继承模式5: 寄生式 16.继承模式6: 寄生组合式 17.会话存储sessionStorage 18.本地存储localStorage 19.worker线程 20.基于SPA的路由库	1.了解面向对象编程 2.掌握常用的几种设计模式 3.掌握六中继承模式 4.了解本地存储概念
	模块化	模块化	1.作用域回顾 2.模块 3.私有属性与公有属性 4.模块扩展 5.Commonjs规范 6.Requirejs引入 7.Requirejs的使用 8.Requirejs的shim模块 9.Requirejs应用-音乐列表播放	1.掌握作用域 2.掌握模块的定义规范与使用 3.了解私有与公有概念 4.掌握Commonjs规范 5.掌握Requirejs的应用
		模块化规范	1.模块化规范1：CommonJS 2.模块化规范2：ES6 3.模块化规范3：AMD	掌握三种模块化规范
	ECMAScript6	ES5/ES6/ES7介绍、入门	1.ES6简介 2.环境搭建 3.ES6兼容 4.ES6在线转换和本地转换 5.let命令 6.const命令
		ES6解构	1.解构赋值 2.数组解构 3.对象解构 4.字符串解构 5.数值和布尔值解构 6.模式匹配 7.不完全解构 8.默认值 9.圆括号问题 10.使用场景
		ES6对象扩展	1.Number数值扩展 2.二进制和八进制 3.指数运算 4.Number新增方法 5.字符串扩展 6.多字节支持 7.新Unicode表示法 8.正则u 9.遍历器接口 10.扩展方法 11.模板标签
		ES6新增对象和属性	1.正则扩展 2.新增flags、新增u、新增y 3.数组扩展：spread展开、map、raduce等 4.Map操作 5.Map遍历 6.WeakMap 7.Set操作 8.WeakSet
		ES6函数扩展	1.函数扩展 2.默认参数 3.length属性 4.默认参数作用域 5.rest参数 6.spread展开运算符 7.Arrow Function箭头函数 8.对象扩展 9.简洁属性 10.属性遍历 11.对象扩展方法
		ES6 Symbol、Promise对象	1.Symbol对象 2.Symbol属性和方法 3.内置Symbol 4.Symbol使用场景 5.Promise对象 6.链式操作 7.Promise状态 8.Promise基本使用方法
		ES6 遍历	1.Iterator遍历器 2.next()、return()、throw() 3.Generator函数 4.yield表达式 5.Generator循环使用 6.yeild*表达式 7.优点和使用场景
		ES6异步	1.异步 2.async函数 3.class类 4.构造函数 5.实例化 6.class表达式 7.私有方法 8.setter和getter 9.static静态类 10.class继承
		ES6模块化、代理、反射	1.module模块 2.export命令 3.import命令 4.模块继承 5.Reflect反射 6.Reflect判断、获取、设置 7.Reflect实例化 8.Proxy代理 9.创建代理 10.代理行为 11.代理实例
		ECMAScript6	1.babel转换器 2.Let和Const命令 3.字符串扩展 4.解构赋值 5.Object扩展 6.Array扩展 7.Function扩展 8.Class类 9.类的继承Extends 10.Promise 11.Module模块 12.Proxy 13.Generator 14.Generator	1.掌握ES6与ES5的区别 2.掌握babel转换器的使用 3.掌握ES6声明新特性 5.掌握数组，对象，字符串函数的扩展 6.掌握箭头函数的应用 7.掌握Class类的声明 8.掌握继承的实现 9.掌握Promise的使用 10.掌握Module模块的使用
	TypeScript	核心概念	1.TypeScript介绍 2.TypeScript基本类型 3.TypeScript变量声明 4.TypeScript接口 5.TypeScript类 6.TypeScript泛型 7.TypeScript类型推断 8.TypeScript模块 9.TypeScript命名空间 10.Gulp解析TypeScript 11.Webpack解析TypeScript	TypeScript的有点不言而喻，到目前为止，TypeScript被使用的频率越来越高，而且我们知道的时候，Vue即将发布的3.0版本就是修改为TypeScript来实现
		TypeScript&React	1.TS&Vue环境搭建 2.TS&Vue组件引入 3.TS&Vue Data变化 4.TS&Vue Props变化 5.TS&Vue 事件 6.TS&Vue 生命周期 7.TS&Vue 计算属性 8.TS&Vue 集成Axios 9.TS&Vue集成 Element-UI 10.TS&Vue集成Vuex	使用TypeScript编写Vue程序是非常方便的，静态类型检查给我们编程带来了非常大的优势。一次性编写400行代码，编译通过！！！
		TypeScript&Vue	1.TS&Vue环境搭建 2.TS&Vue组件引入 3.TS&Vue Data变化 4.TS&Vue Props变化 5.TS&Vue 事件 6.TS&Vue 生命周期 7.TS&Vue 计算属性 8.TS&Vue 集成Axios 9.TS&Vue集成 Element-UI 10.TS&Vue集成Vuex	使用TypeScript编写Vue程序是非常方便的，静态类型检查给我们编程带来了非常大的优势。一次性编写400行代码，编译通过！！！
	构建工具	构建工具之Grunt	1.入门介绍 2.合并js任务 3.压缩js任务 4.js语法检测 5.合并压缩css 6.实现watch监视任务实现自动打包编译	使用构建工具去对 JS、CSS、HTML、LESS、IMG 等进行合并压缩构建到最后实现自动化构建项目。是前端工程师必备的技能之一。 从理解什么是构建工具，为什么要用构建工具，到如何去使用构建工具。
		构建工具之Gulp	1.Gulp环境搭建 2.Gulp压缩JavaScript 3.Gulp压缩CSS 4.Gulp压缩HTML 5.Gulp压缩Image 6.Gulp压缩合并重命名 7.Gulp监听 8.Gulp打包处理 9.Gulp热更新	1.掌握构建工具的作用 2.了解工程化概念 3.掌握Gulp的环境搭建 4.掌握Gulp的压缩操作（js、css、html、image） 5.掌握压缩合并重命名系列操作 6.掌握Gulp监听提高工作效率 7.掌握热更新提升开发者体验
		构建工具之Webpack	1.Webpack3.x安装 2.Webpack config配置文件 3.Webpack服务器搭建 4.Webpack Loaders配置 5.Webpack构建React环境 6.Webpack处理CSS和图片 7.Webpack Less-loader添加 8.Webpack插件添加 9.Webpack生产环境 10.Webpack4.x版本升级	1.掌握目前前端工程化方式 2.掌握Webpack3.x环境搭建 3.掌握Webpack配置文件编写 4.掌握Webpack Loaders的配置 5.掌握Webpack独立构建React环境 6.掌握Webpack的配置文件修改 7.掌握Webpack插件的添加 8.掌握Webpack生产环境 9.掌握Webpack4.x版本迭代升级
前端新型Web框架阶段	AngularJS	angularjs入门	1.Angular简介 2.表达式 3.指令 4.模型 5.作用域 6.控制器 7.过滤器 8.开发环境配置 9.结构、模块与组件 10.元数据、数据绑定与数据显示 11.依赖注入 12.路由 13.lonic3框架	掌握angularjs基础语法
		angularjs服务	1.Service服务 2.Http请求 3.Select 选择下拉 4.表格处理 5.DOM操作	掌握AngularJS的网络服务以及DOM操作
		angularjs指令	1.系统常用命令 2.自定义指令 3.事件 4.模块 5.表单 6.动画	1.掌握AngularJS系统常用命令以及事件 2.掌握AngularJS常用指令 3.掌握AngularJS模块化操作
	React	React框架基本使用	1.React的基本认识 2.React的基本使用 3.React JSX 4.模块与模块化和组件与组件化 5.React组件的基本使用 6.组件三大属性1: state 7.组件三大属性2: props 8.组件三大属性3: refs 9.React事件处理 10.React组件的组合使用 11.React受控与非受控组件 12.组件生命周期 13.React脚手架的使用 14.项目的打包与发布
		React框架进阶	1.React ajax之axios 2.React ajax之fetch 3.React DEMO: github users 4.React Router4基本路由 5.React Router4嵌套路由 6.React Router4向路由组件传递数据 7.React Router4编程式路由导航 8.ReactUI组件库之material-ui 9.ReactUI组件库之ant-design 10.redux库: 管理组件状态 11.react-redux库: 简化使用 12.redux-thunk库: redux异步 13.redux调用插件 14.自定义redux: createStore 15.自定义redux: combineReducers 16.自定义react-redux:Provider 17.自定义react-redux:connect
		React	1.Hello React基础 2.JSX语法解析 3.React基础组件 4.React组件嵌套 5.组件数据交互Props 6.PropTypes与DefaultProps的应用 7.样式添加与事件 8.React State状态 9.props，state与render函数的关系 10.深入了解React虚拟DOM 11.虚拟DOM中的Diff算法 12.State和Props 13.组件生命周期函数与使用场景 14.Form表单和React中ref的使用 15.Fetch网络请求 16.封装Http网络请求 17.Mock数据模拟Node服务器 18.使用Charles实现本地数据mock 19.React中实现CSS动画效果 20.react-transition-group实现动画 21.Rudux概念简介和工作流程 22.Action和Reducer的编写 23.ActionTypes的拆分 24.使用actionCreactor统一创建action 25.UI组件和容器组件及无状态组件 26.Redux-thunk中间件实现ajax数据请求 27.Redux-saga中间件使用 28.React-redux中间件使用 29.网络请求跨域代理配置 30.引入Antd UI框架 31.Antd样式应用 32.Antd样式修改 33.Router3.x引入 34.Router3.x路由嵌套 35.Router3.x路由参数传递 36.Router4.x路由升级 37.React脚手架 38.React修改脚手架配置 39.React引入字体图标	1.掌握React基础语法 2.了解React的优势 3.掌握React的组件交互 4.掌握React组件的的生命周期 5.掌握React的网络请求fetch 6.掌握数据模拟方式Mock 7.掌握React路由的应用 8.掌握Antd UI组件的使用 9.掌握React脚手架的使用
		React Native	1.React Native初探 2.React Native项目导航 3.React Native项目滚动分页 4.React Native其他组件
		应用Reat开发WebApp项目	1.Ant Design组件库 2.React Router4路由 3.项目组件编写 4.使用Immutable.js来管理store中的数据 5.项目的联调、测试与发布上线
		React项目实战-新闻类型	1.News-环境搭建 2.News-响应式设计 3.News-路由配置 4.News-引入Antd样式 5.News-适配移动端 6.News-登录UI实现 7.News-登录接口实现 8.News-登录功能实现 9.News-本地存储 10.News-功能模块实现	本项目根据新闻类接口实现新闻类站点与APP的常见形式展示，项目专注于练习React基础的应用，组件的创建分离与嵌套，实现登录注册等功能。同时针对移动端和PC端实现响应式设计。
		React-Redux	1.Redux基础 2.Redux原理 3.React-Redux引入 4.React-Redux共享数据 5.React-Redux应用场景	1.掌握React-Redux应用场景 2.掌握React-Redux的实现 3.掌握React-Redux的原理
		NextJS	1.next安装 2.样式的使用 3.数据获取与生命周期	Next.js是一个基于React的一个服务端渲染简约框架。它使用React语法，可以很好的实现代码的模块化，有利于代码的开发和维护。
		React项目实战-O2O类	1.环境搭建-添加Less环境 2.环境搭建-路由功能实现 3.环境搭建-全局样式与字体图标 4.首页-头部实现 5.首页-轮播导航实现 6.首页-超值特惠广告服务器端实现 7.首页-超值特惠前端访问实现 8.首页-超值特惠前端UI实现 9.首页-推荐列表数据获取 10.首页-推荐列表数据加载 11.首页-推荐列表加载更多数据 12.首页-推荐列表加载更多实现 13.首页-推荐列表滚动加载 14.首页-底部导航 15.城市-路由配置 16.城市-Header 17.城市-当前城市 18.城市-城市信息Redux添加 19.城市-Redux数据共享 20.城市-城市选择 21.城市-城市修改 22.城市-城市本地存储 23.城市-根据城市适配数据 24.搜索-路由配置 25.搜索-服务器模拟数据 26.搜索-SearchHeader组件 27.搜索-搜索数据获取 28.搜索-搜索页面UI适配 29.搜索-重复搜索处理 30.详情-路由配置 31.详情-服务器端数据适配 32.详情-详情数据适配 33.详情-添加星星 34.详情-商品评论 35.登录-路由配置 36.登录-判断用户登录 37.登录-登录实现 38.登录-登录验证 39.购买与收藏-购买功能 40.购买与收藏-解决路由参数问题 41.购买与收藏-收藏按钮添加 42.购买与收藏-Store添加Redux 43.购买与收藏-收藏功能实现 44.用户中心-个人信息加载 45.用户中心-订单加载 46.用户中心-订单信息优化 47.评论-添加评论状态 48.评论-添加完整流程 49.评论-评论提交	本项目为目前常见O2O类项目的展示形式与功能，项目主要包含功能有首页展示，城市切换，搜索实现，详情展示，登录与注册，购买与收藏业务，用户中心和评论等功能。主要针对学者练习React基础应用和React高级组件的创建，React中使用Redux掌握应用场景，并且熟悉项目业务逻辑的实现，更快更合适宜的接入企业级项目。
		Dva	1. dva介绍与环境搭建 2. dva中引入antd 3. dva路由配置 4. dva了解路由原理 5. dva编写UI Component组件 6. dva Model创建 7. dva 路由跳转 8. dva Model异步处理 9. dva Mock数据处理 10. dva 网络请求 11. dva Model API 12. dva redux-actions	dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API,elm 概念，通过 reducers, effects 和 subscriptions 组织 model,插件机制，比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading,支持 HMR，基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR。
	Vue	Vue框架基本使用	1.Vue的基本认识与使用 2.模板语法 3.计算属性和监视 4.class与style绑定 5.条件渲染与列表渲染 6.事件处理与表单数据收集 7.Vue实例生命周期 8.过渡与动画 9.自定义过滤器 10.内置指令与自定义指令 11.自定义Vue插件 12.使用vue-cli创建模板项目 13.eslint编码规范检查 14.组件定义与使用 15.组件间通信1: props 16.组件间通信2: vue自定义事件
		Vue框架进阶	1.组件间通信3: 消息订阅与发布 2.组件间通信1: props 3.组件间通信4: slot 4.Vue ajax: axios与vue-resource 5.Vue DEMO: todo list 6.Vue DEMO: user search 7.Vue UI组件库: mint-ui 8.vue-router: 基本路由 9.vue-router: 嵌套路由 10.vue-router: 向路由组件传递数据 11.vue-router: 缓存路由组件 12.vue-router: 编程式路由导航 13.vuex: 理解与基本使用 14.vuex: 相关API与结构分析 15.vuex: 计数器应用 16.vuex: todo list应用
		Vue源码分析	1.vue源码分析: 数据代理 2.vue源码分析: 数据劫持 3.vue源码分析: setter,getter分析 4.vue源码分析: Object.defineProperty 5.vue源码分析: 断点调试 6.vue源码分析: 数据劫持 7.vue源码分析: 插值解析 8.vue源码分析: 指令解析 9.vue源码分析: 单向数据绑定 10.vue源码分析: 双向数据绑定 11.vue源码分析: MVVM原理图 12.MVC和MVVM区别
		Vue	1.Vue环境搭建 2.Vue基本指令 3.Vue事件处理 4.Vue计算属性 5.Vue的Class与Style样式 6.Vue的表单与侦听器 7.Vue的基本组件 8.Vue的组件之间数据交互 9.Vue组件加载的keep-alive 10.Vue的Props验证 11.Vue组件深入 12.Vue 插槽 13.Vue实例生命周期 14.Vue过渡与动画 15.Vue自定义指令 16.Vue过滤 17.Vue网络请求Axios 18.Vue Axios请求应用 19.Vue Axios常用配置 20.Vue 跨域处理 21.Vue路由基础 22.Vue路由跳转 23.Vue路由嵌套 24.Vue编程式导航 25.Vue路由参数传递 26.Vue路由杂项 27.Vue路由高亮 28.Vue路由实例 29.Vue Element UI组件 30.Swiper组件应用 31.VueX引入 32.Vue-VueX-创建Store仓库 33.Vue-VueX-状态更改 34.Vue-VueX-getters过滤 35.Vue-VueX-Actions异步处理 36.Vue-VueX-Module 37.动态组件与v-once指令	1.掌握Vue环境搭建 2.掌握Vue框架的优点 3.掌握Vue基础语法 4.掌握Vue常见API 5.掌握Vue组件的使用 6.掌握Vue组件的生命周期 7.掌握Vue网络请求Axios 8.掌握Vue的路由使用 9.掌握Vue中常见第三方组件使用 10.掌握VueX的引入 11.了解VueX的应用长江 12.掌握VueX在项目中的实现
		Vue服务器端渲染：NuxtJS	1.环境搭建 2.项目目录结构介绍 3.路由配置 4.视图修改 5.异步数据 6.资源文件管理 7.插件处理 8.模块处理 9.Vuex状态树 10.TypeScript支持	前后端拆分，后端专注于数据接口服务，前端专注接口调用，页面渲染，双剑合璧，相得益彰。这时，使用vue框架之后，SEO优化变成了很重要的问题，所以，此时要引入服务器端渲染来解决SEO和首屏加载问题是非常合理的。
		Vue实战项目-移动端-VueMusic	1.VueMusic-首页-路由配置 2.VueMusic-今日推荐-数据获取 3.VueMusic-今日推荐-视图适配 4.VueMusic-首页-视图适配 5.VueMusic-首页-音乐榜单 6.VueMusic-首页-热门榜单 7.VueMusic-更多-数据适配 8.VueMusic-更多-下拉刷新 9.VueMusic-播放-路由配置 10.VueMusic-播放-播放功能 11.VueMusic-播放-歌词加载 12.VueMusic-播放-歌词适配 13.VueMusic-播放-歌词滚动 14.VueMusic-歌手-歌手列表 15.VueMusic-搜索-搜索实现 16.VueMusic-测试-真机测试	本项目为音乐类项目，主要实现音乐首页展示，今日推荐类别，歌曲列表，歌曲播放及歌手列表和搜索功能。主要练习Vue的基础应用和组件如何设计。项目如何构架与测试。通过本项目可以让学者更快的熟悉Vue框架的使用。并且熟练的构建整个项目需求的架构。
		Vue实战项目-PC	1.Vue-VuePC-环境搭建 2.Vue-VuePC-导航实现 3.Vue-VuePC-登陆注册接口编写 4.Vue-VuePC-封装Axios与API 5.Vue-VuePC-登陆注册接口实现 6.Vue-VuePC-Token验证 7.Vue-VuePC-调试路由验证登陆流程 8.Vue-VuePC-Vuex引入 9.Vue-VuePC-Vuex与本地存储保存token10.Vue-VuePC-3.x命令行工具引入Element 11.Vue-VuePC-导航效果优化 12.Vue-VuePC-引入Echarts与封装 13.Vue-VuePC-Echarts地图加载与参数调试14.Vue-VuePC-Echarts网络数据适配与参数调试 15.Vue-VuePC-封装SVG加载进度条 16.Vue-VuePC-Mock数据处理 17.Vue-VuePC-轮播图添加 18.Vue-VuePC-列表数据 19.Vue-VuePC-详情页 20.Vue-VuePC-自定义组件 21.Vue-VuePC-订单详情 22.Vue-VuePC-Vuex订单共享 23.Vue-VuePC-Element组件修改样式 24.Vue-VuePC-打包环境	本项目与上面的移动端项目类似，但是针对的是PC端类展示产品，包含功能有导航，轮播图，数据列表，详情页，订单页和购买功能。通过本项目让学者快速掌握此类项目的常见功能和功能的业务逻辑实现
跨平台开发阶段	微信小程序	原生小程序入门	1.小程序介绍 2.小程序优缺点 3.小程序语法介绍 4.组件化思想 5.小程序开发工具使用 6.小程序开发工具管理项目 7.小程序开发工具调试 8.小程序适配方案 9.px, em, rem, rpx对比 10.全局配置文件 12.注册小程序应用	1.了解小程序的概念 2.掌握组件化思想 3.初步掌握小程序工具使用
		原生小程序API使用	1.局部页面配置 2.注册小程序页面 3.小程序生命周期函数 4.小程序路由跳转 5.窗口配置 6.原生小程序组件使用: view, text,button 7.原生小程序API使用: wx.navigateTo/wx.showToast 8.本地数据存储 9.小程序前后端交互 10.背景音乐播放 11.小程序事件应用	掌握原生小程序API的使用与实例制作
		微信小程序：Mpvue	1.MPVue介绍 2.MPVue环境搭建 3.Mpvue特点 4.Mpvue同原生小程序区别 5.Mpvue VS Vue 6.Mpvue基本使用 7.Mpvue注意事项 8.Mpvue中处理原生小程序事件 9.flyio应用 10.Node.js中间层实现前后端完全分离 11.Mpvue组件通信 12.Mpvue中兼容原生小程序生命周期及处理方式 3.初始化项目 4.顶部导航 5.底部导航TabBar 6.焦点轮播图 7.搜索实现 8.小程序定位 9.腾讯地图lbs获取地理位置 10.搜索结果列表渲染 11.上拉加载 12.下拉刷新 13.详情处理 14.个人信息	小程序目前越来越火爆，而且我们知道目前存在了“微信小程序”，“支付宝小程序”，“百度小程序”，“头条小程序”非常多，为了兼容所有小程序，MPVue的出现，应运而生，可以一套代码实现多个平台。
		微信小程序-实战讲解-影评类	1.微信小程序开发工具 2.小程序WXSS后缀 3.小程序事件 4.小程序页面跳转 5.小程序数据绑定 6.小程序轮播图 7.小程序编辑视图 8.小程序数据适配 9.小程序循环加载视图 10.小程序Template模板 11.小程序跳转参数携带 12.小程序详情页实现 13.小程序本地存储 14.小程序提示框 15.小程序音频播放 16.小程序Tabbar 17.小程序网络请求 18.小程序模板嵌套 19.小程序视图适配 20.小程序评价业务逻辑 21.小程序列表上拉加载 22.小程序列表下拉刷新 23.小程序电影页适配 24.小程序搜索页面适配 25.小程序第三方接口	此阶段的内容为微信小程序开发，本阶段并非以基础知识点开始入手讲解，基于学者经历过以上的学习，在此时已经掌握项目框架，包含常见的一些实现规范，所以，这里我们将直接讲解项目，根据项目需求的效果使用微信小程序技术实现对应功能。
	微信公众号开发	微信公众号开发	1.校验服务器有效性 2.服务端获取用户消息 3.回复微信服务器消息 4.接口管理 5.用户管理 6.获取用户基本信息 7.群发消息 8.获取全局接口调用凭据(ticket) 9.signature值的计算 10.语音查电影功能 11.爬虫 12.订阅号基本功能 13.使用百度BAE实现代码的快速上线 14.使用Git完成线上代码部署 15.公众号开发与权限接入 16.微信JSSDK接口API 17..微信场景项目开发与接入
	移动端开发	移动端核心	1.屏幕尺寸 2.屏幕分辨率 3.屏幕像素密度 4.物理像素 5.CSS像素 6.CSS像素与物理像素的关系 7.设备独立像素 8.位图像素 9.像素比 10.pc视口 11.布局视口 12.视觉视口 13.理想视口 14.meta标签 15.移动跨平台开发框架Sencha Touch 16.移动端网页触摸内容滑动js插件Swiper 17.谷歌的移动UI框架Flutter	1.掌握屏幕尺寸分辨率等 2.学会根据屏幕尺寸与分辨率、像素等进行布局
		移动端适配	1.pc缩放 2.移动端用户缩放 3.移动端系统缩放 4.移动端基础事件 5.移动端手指列表 6.移动端点透事件 7.移动端取消浏览器默认行为 8.rem与em区别 9.rem适配 10.viewport适配 11.1物理像素 12.实现1物理像素边框的多种方案	1.掌握移动端用户缩放与系统缩放 2.掌握移动端的事件处理 3.掌握REM移动端适配
		移动端特效	1.横向滑屏（定位版） 2.横向滑屏（2d变换版） 3.横向滑屏（封装自定义组件版） 4.橡皮筋效果 5.绝对定位模拟固定定位 6.加速效果 7.即点即停 8.自定义滚动条 9.防抖动 10.误触效果 11.多指事件 12.多指放大 13.多指旋转 14.无缝滑屏	掌握移动端各种特效