新前端开发全栈课程体系 ( V5.2 )

最后更新时间: 2020年2月

课程一定是为你精心设计的, 成就自己的只需一套精品!

课程设计原则:

  • - 以零基础小白为目标人群设计;
  • - 以现在企业中高级程序员岗位所需要的技术应用为目标设计;
  • - 为程序开发这门学科特点,以实战和项目贯穿为高效学习目标设计;
  • - 根据线上学习特点去规划每天学习内容;
  • - 以全栈技能为目标设计知识点结构;
  • - 每年至少迭代更新两次,技术版本不一定是最新的,但一定是用的最多的版本;

课程介绍:

       H5在狭义上指HTML(超文本标记语言)的第5个版本,在广义上包含了HTML5、CSS3、JavaScript等在内的所有应用场景, H5全栈开发课程旨在打造精通前端(HTML5、CSS3、JavaScript、JQuery)、后端(Node.js)、移动跨平台(Android/IOS)App(Vue.js/Angular/React)、微信小程序开发的全栈型全能工程师。 结合BAT等一线互联网实际项目需求以及H5技术的飞速发展,2019年在WebAPP开发、数据交互、游戏开发多方面更新课程体系,培养H5全栈开发工程师。在原有课程体系的基础上,添加更为精华、更实用的课程,以下为本次课程更新内容:
1. 在高级课程阶段增加React.js课程,与原有Vue.js开发课程齐头并进,打造前端和WebAPP开发框架三剑客,形成覆盖式技能培养战略。
2. 在高级课程阶段增加H5游戏AI智能算法,打造精品游戏,拓展学员H5游戏开发相关就业新方向
3. 新加入完善的ES6/ES7语法结构,让JS编程更加简洁、爽快,6的飞起。
4. 更加注重H5应用在市场营销方面的应用,增加实战项目操作。
课程中的每个技术点的内容都非常全面,深度到位,课上实例不仅丰富而且实用。 另外,每个知识点都是以目前最新版本的技术设计,每半年一更新,并经过多家软件公司的技术专家参与修订,以达到真正实用的目的,能够与大型软件开发公司所需要的开发技术相吻合。

课程特点:

  • - 技术新、内容全:课程的技术点全面,全部都是当前行业内最流行、从最新版的HTML5,CSS到主流JavaScript ES6兼顾,主流的Vue和React框架全都包含
  • - 企业大牛指导项目:为了要学员毕业后快速适应企业环境,特地从IT名企引入技术总监为学员的项目导师,指导和管理项目研发过程、要学员真正体验企业开发过程
  • - 课程项目均为上线产品:很多平台的项目案例都是采用模仿或闭门造车形成的,从而导致培训学习和企业要求的存在一定的差异,为了弥补这个差异,我们是第一家将真实上线产品引入课程的平台
  • - 拥有企业项目环境:可熟悉项目开发中立项、分析、设计、编码、测试、实施、维护等真实流程及相关工作
  • - 采用案例式教学:整个课程以案例为主线,贯串学习知识点和技术点。通过专家讲师和企业导师的带领,使学员可以具有独立开发大型网站的能力
  • - 编码、设计规范:课程中的项目案例完全采用企业编码规范和设计规范,例如腾讯规范、合作企业HTML规范等,提高学员编码规范性,增强程序的可读性和维护性
  • - 注重素质和能力培养:注重综合素质能力的培养,主要包括技术应用能力、分析设计能力、团队合作、职业素养等,提升学员的企业工作能力
  • - 注重方法和思维培养:授人以鱼、不如授人以渔。我们授课过程不仅注重技术点培养、更侧重于方法和思维培养,提升学员养成后续自我提升的能力

学习目标:

  • - 精通前端(HTML5、CSS3、JavaScript、JQuery),各种布局和特效
  • - 后端Node.js+MongoDB
  • - 移动跨平台(Android/IOS)App开发
  • - 三大主流前端框架(Vue.js/Angular/React)
  • - 微信小程序开发的全栈型全能工程师

适合人群:

  • - 想从事IT互联网行业的“零基础”人员
  • - 有一定基础的Web前端开发人员
  • - 后端开发想转为全栈开发工程师的人员
  • - 想自己独立运营网站的人员
  • - 想从事跨平台移动App开发人员
  • - 想从事微信小程序开发人员
  • - 在读或已毕业的计算机相关专业人员

阶段一 前端核心基础

说明:

       学习前端一定要学习的就是HTMl、CSS和JavaScript, HTML是内容层,它的目的是表示一个HTML标签在页面里是个什么角色。 CSS是样式层,它的目的是表示一块内容以什么样的样式(字体、大小、颜色、宽高等)显示。 JS是行为层,它要做的是当用户触发某些行为时,会给内容和样式带来什么样的改变。当然学习JavaScript就一定要学习DOM和BOM才能写出页面的特效, 而先在直接使用原生的JavaScript编写页面特效的时代已经不存在了, 最基本的也都在使用jQuery框架编辑页面特效。

模块 目标 知识点
HTML核心标签
应知应会:
1. 了解HTMl的基本语法
2. 掌握HTML的常用标签
3. 掌握HTMl标签属性的应用
4. 熟练使用HTMl表单
5. 掌握HTMl的结构标记
6. 掌握HTML的文本标记
7. 掌握HTML的头部标记

业务实战:
使用HTMl表格标记编写一个个人简历
写一个完整个的注册页面
了解前端发展
文本标记
图像
超链接
列表
表格
表单
iframe 框架
案例进阶:制作差旅报表
选择器
文本样式
盒子模型
背景
布局属性
CSS精灵(CSS Sprites)
定位
表格
列表
案例进阶:pc端商城 旅游 文学网等布局
案例进阶:合成案例 ps总结
结构标签
文本语义化标签
CSS核心属性
应知应会:
DIV + CSS布局
CSS文本属性
CSS基本选择器
CSS复合选择器
盒子模型原理
盒模型内边距
盒模型外边距
盒模型外边距合并
盒模型外边距塌陷
浮动布局
清除浮动的几种方式
相对定位布局
绝对定位布局
固定定位布局
图标字体的下载和应用
PhotoShop的使用及切图
icon图标制作及使用

业务实战:
商城的页面和商品页面布局
实现一个电子计算器的界面制作
DIV + CSS布局
CSS文本属性
CSS基本选择器
CSS复合选择器
盒子模型原理
盒模型内边距
盒模型外边距
盒模型外边距合并
盒模型外边距塌陷
浮动布局
清除浮动的几种方式
相对定位布局
绝对定位布局
固定定位布局
图标字体的下载和应用
PhotoShop的使用及切图
icon图标制作及使用
JavaScript基础语法
应知应会:
变量的声明与使用
变量的数据类型
数据类型之间的转换
流程控制语句
函数的声明与使用
数组及数组的几种定义方式

业务实战:
结合HTMl和CSS输出一个九九乘法表
开发一个简单的页面计算器
JavaScript简介
变量的声明与使用
变量和内存的关系
变量内存空间分配与原理
变量的数据类型
数据类型之间的转换
流程控制语句
if 分支结构
switch 选择结构与相关规则
循环结构语句
for 循环
while 循环
do-while 循环语句
函数的声明与使用
函数调用的过程分析
参数的值传递
函数的返回值
函数的几种定义方式
数组及数组的几种定义方式
JavaScript面向对象
应知应会:
1.掌握面向对象分析和设计方法
掌握JavaScript基于对的编程序思想
创建对象的几种方式
掌握对函数提升
了解作用域链
掌握所有js内置对象的应用

业务实战:
基于JavaScript对象实现页面幻灯播放对象模型
JavaScript面向对象说明
初识对象
对象的属性和方法
创建对象的几种方式
构造函数
原型和原型对象
原型链
作用域
变量提升
函数提升
作用域链
js内置对象
Date对象
Array对象
String对象
Boolean对象
Number对象
Math对象
this的指向讲解
call和apply函数
DOM和BOM开发
应知应会:
掌握javascript DOM和BOM编程方式
掌握获取DOM的几种方式
掌握操作DOM对象的属性,内容,样式
掌握获取节点的几种方式
封装兼容所有浏览器函数
常用节点操作属性
事件的三个阶段
事件委派

业务实战:
网页中的下拉菜单
网页选项卡
表单前端验证
javascript DOM和BOM编程
DOM概念
获取DOM的几种方式
事件原理及执行过程
排它操作
事件类型
操作DOM对象的属性,内容,样式
节点的概念
获取节点的几种方式
封装兼容所有浏览器函数
创建节点的几种方式
常用节点操作属性
事件的三个阶段
事件冒泡原理
事件委派
BOM概念
window对象
定时器的应用
jQuery框架
应知应会:
掌握jQuery的开发优势
掌握jQuery设计模式
掌握链式编程
掌握各种函数应用
掌握jQuery中Ajax使用
需要jQuery解决跨域

业务实战:
制作一个页面版的可以编辑的表格
jQuery发展史
jQuery的优势
jQuery设计模式
选择器分步讲解
链式编程
动画函数
事件委托
过滤和查找
隐式迭代
网页常见动效案例
插件的制作和使用
jQuery中Ajax使用
jQuery解决跨域
jQuery中get和post区别
jQuery案例演练
artTemplate模板使用
js动效综合案例
正则表达式
收获:

       学完此阶段能够掌握HTMl的基本语法, 掌握用标记和常用标记的属性, 掌握CSS的基本法和常用属性,可以使用HTMl和CSS编写基本的页面。 掌握JavaScript的基本语法, 可以使用DOM编写常见的一些页面特效,掌握jQuery的基本应用,可以使用jQuery开发前端页面需要的所有特效。

阶段二 H5+C3 + 移动端核心技术

说明:

        HTML5和CSS3已经很普及了, 现在开发页面都在使用HTML5和CSS3的新的特性, 浏览器支持也已经很成熟了。 以前需要通过JavaScript编写出来的效果, 现在HTML5和CSS3内置的一些标签和属性直接就可以实现。 还可以运用Canvas进行画图操作,配合JavaScript程序可以写出超炫的页面效果。这个阶段需要的HTMl5和CSS3的新特性比较多, 需要每个都进行一次实验, 这样在以后需要的时候就可以灵活运用了。

模块 目标 知识点
HTML5新特性
应知应会:
掌握语义化标签
掌握语义化标签布局
掌握所有HTML5新加入的标签
了解音阶导航
可以自定义播放器
掌握响应式布局方式
掌握媒体选择器应用

业务实战:
响应式页面布局
自定义播放器
语义化标签
语义化标签布局
状态标签
列表标签
注释标签
标记标签
input新属性
placeholder
autocomplete
autofocus
required
video
audio
source
音阶导航
自定义播放器
响应式布局
媒体选择器
子元素选择器
相邻兄弟选择器
通用兄弟选择器
伸缩盒模型新版本
伸缩盒模型老版本
伸缩盒模型布局
多列布局
粘连布局
圣杯布局
双飞翼布局
伪等高布局
bfc两列布局
Canvas技术
应知应会:
掌握Canvas变换基点两种形式
掌握Canvas加载图片
掌握Canvas线性渐变
掌握Canvas径向渐变
掌握Canvas文字特效
掌握Canvas图片合成
掌握Canvas操作像素

业务实战:
Canvas刮刮卡
Canvas马赛克效果
写一个页面弹球程序
Canvas基本使用
Canvas绘制矩形
Canvas橡皮擦
Canvas线段
Canvas三角形
Canvas五角星
Canvas签名
Canvas圆形
Canvas圆弧
Canvas位移
Canvas缩放
Canvas旋转
Canvas变换基点两种形式
Canvas时钟效果
Canvas加载图片
Canvas飞鸟效果
Canvas线性渐变
Canvas径向渐变
Canvas填充文字
Canvas镂空字
Canvas文字水平垂直居中
Canvas文字阴影
Canvas和阴影
Canvas图片合成
Canvas刮刮卡
Canvas读取像素
Canvas写入像素
Canvas创建像素对象
Canvas操作单个像素
Canvas马赛克效果
CSS3新特性
应知应会:
掌握CSS3新加入的选择器
掌握CSS3新的属性
掌握CSS3结构类
掌握CSS3各种伪元素应用

业务实战:
伪元素实现文章列表
CSS3结构类实现尺子效果
使用纯css制作三角形
群组选择器
交集选择器
基本属性选择器
包含属性选择器
锚点伪类
用户行为伪类
目标伪类
目标伪类实现图片切换
checked状态伪类
自定义单选按钮
CSS3结构类
CSS3结构类实现尺子效果
否定选择器
伪元素::first-line
伪元素::first-letter
伪元素::before
伪元素::after
伪元素::selection
伪元素实现文章列表
使用纯css制作三角形
子元素选择器
相邻兄弟选择器
通用兄弟选择器
群组选择器
交集选择器
基本属性选择器
包含属性选择器
锚点伪类
用户行为伪类
目标伪类
CSS3进阶
应知应会:
掌握checked状态伪类
掌握自定义单选按钮
掌握CSS3结构类
掌握CSS3结构类实现尺子效果
掌握2d变换旋转
掌握animation综合使用
掌握less使用

业务实战:
伪元素实现文章列表
目标伪类实现图片切换
综合2d变换
目标伪类实现图片切换
checked状态伪类
自定义单选按钮
CSS3结构类
CSS3结构类实现尺子效果
否定选择器
伪元素::first-line
伪元素::first-letter
伪元素::before
伪元素::after
伪元素::selection
伪元素实现文章列表
transition-property
transition-duration
transition-timing-function
transition-delay
2d变换旋转
2d变换平移
2d变换缩放
2d变换扭曲
2d变换基点
综合2d变换
transform-style
animation综合使用
less使用
less变量
less延迟加载
less混合
less外部使用
less嵌套
CSS3实例演练

业务实战:
使用纯css制作三角形
圆角边框的使用
实现圆形
实现椭圆形
实现扇形
太极图效果实现
风车效果实现
文字阴影,模糊,背景,排版,描边
浮雕文字
标准盒子模型与怪异盒子模型
盒阴影使用
模糊盒阴影
立体球效果
倒影效果
盒子大小调节效果
背景裁剪
背景模糊
线性渐变基本使用
重复线性渐变
发廊灯效果
马赛克地砖
光斑动画
径向渐变基本使用
重复径向渐变
综合3d变换
使用纯css制作三角形
圆角边框的使用
实现圆形
实现椭圆形
实现扇形
太极图效果实现
风车效果实现
文字阴影,模糊,背景,排版,描边
浮雕文字
标准盒子模型与怪异盒子模型
盒阴影使用
模糊盒阴影
立体球效果
倒影效果
盒子大小调节效果
背景裁剪
背景模糊
线性渐变基本使用
重复线性渐变
发廊灯效果
马赛克地砖
光斑动画
径向渐变基本使用
重复径向渐变
3d变换旋转
3d变换位移
3d变换缩放
3d变换基点
综合3d变换
景深
收获:

       学完此阶段能够掌握HTML5中新加入的一些标记和属性,掌握CSS3中一些非常有用的属性,直接在页面出特效,并可以掌握Canvas画图功能, 可以布局和开发各种需要的页面效果。

阶段三 移动端开发技术

说明:

       现在的移动设备已经很普及了, 手机访问网站的数量已经超过了PC端, 所以现在做前端开发一定要掌握移动设备的特性, 作为重点开发的对象。 移动设备的大部分开发技术和PC是相同的, 而基于移动设置屏幕的限制和操作方式的改变, 还是有很多不同之处是需要学习, 所以本阶段一定要学习移动设置的特点, 适配的方案, 以及移动端的特效编写方式等。

模块 目标 知识点
移动端核心
应知应会:
掌握移动设计屏幕属性
掌握CSS像素与物理像素的关系
了解位图像素
掌握布局视口和视觉视口

业务实战:
移动设计页面开发
屏幕尺寸
屏幕分辨率
屏幕像素密度
物理像素
CSS像素
CSS像素与物理像素的关系
设备独立像素
位图像素
像素比
pc视口
布局视口
视觉视口
理想视口
meta标签
移动端适配
应知应会:
掌握pc缩放特性
掌握移动端用户缩放特性
掌握移动端基础事件
掌握移动端手指列表
掌握移动端点透事件
掌握移动端取消浏览器默认行为
掌握rem适配和viewport适配

业务实战:
实现1物理像素边框的多种方案
pc缩放
移动端用户缩放
移动端系统缩放
移动端基础事件
移动端手指列表
移动端点透事件
移动端取消浏览器默认行为
rem与em区别
rem适配
viewport适配
物理像素
实现1物理像素边框的多种方案
移动端特效
应知应会:
掌握各种方向滑屏(定位版)
掌握橡皮筋效果
掌握绝对定位模拟固定定位
掌握加速效果
掌握即点即停
掌握自定义滚动条
掌握防抖动技术
掌握误触效果
掌握多指事件、放大和旋转
掌握无缝滑屏

业务实战:
移动端多图片滑动切换
横向滑屏(定位版)
横向滑屏(2d变换版)
横向滑屏(封装自定义组件版)
橡皮筋效果
绝对定位模拟固定定位
加速效果
即点即停
自定义滚动条
防抖动
误触效果
多指事件
多指放大
多指旋转
无缝滑屏
收获:

       学完此阶段能够掌握移动设备的物理特性, 像屏幕的尺寸、分辨率等, 可以开发PC和移动适配的前端程序, 可以编写基于移动端应用的特效。

阶段四 服务器端开发

说明:

       前端开发中所有遇到的数据都是从服务器中加载到页面中的, 只有和服务器端程序配合才能写出一个完整的项目, 所以学习前端开发也需要了解一下后端程序开发。 我们学习的前端可以和后端所有语言进行对接, 而我们毕竟现在学习的是前端开发, 如果所有后端开发语言都去学习不现实,而Node.js是后端开发语言, 语法和JavaScript几乎一样, 这样学起来会容易一些。 而后端开发也需要使用数据库, MongoDB数据库的操作也同样类似JavaScript的编写方式, 也可以很快就能掌握。另外, 前端和后端数据和程序上都需要交互,所以掌握后端开发之后还需要掌握前后端的交互。 这个阶段我们通过开发微信公众账号就可以用到前端技术、后端技术和前后端交互的技术了。

模块 目标 知识点
服务器端开发
应知应会:
了解Node优势及发展趋势
掌握Node中的时间轮询机制
掌握npm、cnpm、yarn包管理器
掌握Node.js核心基础
了解Buffer缓冲器
掌握Node文件系统(简单、流式文件操作)
掌握原生Node搭建服务器
掌握Express搭建服务器
掌握cookie、session的使用

业务实战:
使用Nodejs生成动态页面
Node优势及发展趋势
Node中的时间轮询机制
npm、cnpm、yarn包管理器
Node.js核心基础
Buffer缓冲器
Node文件系统(简单、流式文件操作)
原生Node搭建服务器
Express搭建服务器
ejs模板渲染
cookie、session的使用
数据库操作
应知应会:
了解HTTP协议与报文
掌握基于Express的路由、中间件
掌握MongoDB数据库操作
可以进行数据库搭建
能为数据库建表
可以进行数据库增删改查
了解mongoose的使用
掌握服务器同数据库交互
掌握sha1、MD5加密隐私数据

业务实战:
通过页面完成商品的增删改查
HTTP协议与报文
基于Express的路由、中间件
MongoDB数据库基础
数据库搭建
数据库建表
数据库增删改查
mongoose的使用
非关系型数据库特点
服务器同数据库交互
sha1、MD5加密隐私数据
前后端交互核心
应知应会:
1.熟悉Ajax作用和原理
2.掌握XMLHttpRequest对象的使用
3.熟悉JSON语法并熟练与Ajax结合运用
4.熟练掌握jQuery中$.ajax、$.load、$.post、$.get等函数的使用
5.掌握ajax表单提交和文件上传功能

业务实战:
用户登录和注册
银行账户列表显示
原生Ajax
基于框架的Ajax
JSON/XML
跨域问题
JSONP解决跨域问题
JSONP底层原理深入剖析
CORS解决跨域问题
nginx的简单使用
GET,POST请求区别
微信公众号开发
应知应会:
掌握校验服务器有效性方式
掌握服务端获取用户消息
掌握回复微信服务器消息
可以使用接口管理用户

可以获取用户基本信息
可以群发消息
能获取全局接口调用凭据(ticket)
通过signature值的计算

业务实战:
语音查电影功能
爬虫
校验服务器有效性
服务端获取用户消息
回复微信服务器消息
接口管理
用户管理
获取用户基本信息
群发消息
获取全局接口调用凭据(ticket)
signature值的计算
语音查电影功能
爬虫
收获:

       学完此阶段需要掌握Node的基本应用开发服务器端的程序, 掌握数据库MongoDB的基本使用, 设计项目的表结构,掌握Node.js操作数据库MongoDB。 可以掌握前后端交互的核心方式,会使用Ajax和处理跨域问题。能结果前后端技术开发一个微信公众账号的应用。

阶段五 JavaScript高级技术

说明:

       现在对前端的要求越来越高, 一些基本的特效编写已经不能满足前端开发了, 好多功能都交给前端开发处理了。所以需要学习JavaScript一些更高级的特性, 因为JavaScript是前端开发的核心, 这个阶段需要学习一些JavaScript的深入语法, 像内存管理、进程与线程,以及JavaScript的闭包的应用。也要了解一下JavaScript处理异步编程和函数式的编程思想,这也是现在JavaScript主流的应用。 另外, 编写高级的程序离不开设计模式, 这个阶段还学习多种JavaScript程序设计模式,设计出高可用的JavaScript程序架构。

模块 目标 知识点
JavaScript高级语法
应知应会:
掌握数据类型及判断,数据, 变量与内存,对象,函数
掌握断点调试和debugger调试
掌握JS线程机制
掌握JS事件循环机制
掌握 原型/链

业务实战:
页面程序调试
基础深入: 数据类型及判断
基础深入: 数据, 变量与内存
基础深入: 对象
基础深入: 函数
断点调试
debugger调试
JS线程机制: 进程与线程
JS线程机制: 单线程JS
JS线程机制: 多线程JS
JS事件循环机制: 再看定时器
JS事件循环机制: 模型分析
原型/链: prototype
原型/链: __proto__
原型/链: 内存结构分析
JavaScript面向对象深入
应知应会:
掌握执行上下文/栈
掌握作用域/链
掌握闭包的应用
掌握栈和队列

业务实战:
编程模拟进出栈
编程模拟队列
执行上下文/栈: 变量/函数提升
执行上下文/栈: 执行上下文
执行上下文/栈: 执行上下文栈
作用域/链: 作用域
作用域/链: 作用域链
闭包: 闭包是什么
闭包: 产生闭包的条件
闭包: 闭包的生命周期
闭包: 闭包的应用
闭包: 闭包的缺点及解决
数组与对象
队列
编程模拟进出栈
编程模拟队列
JavaScript异步编程
应知应会:
掌握同步与异步应用及回调函数
掌握宏队列与微队列
掌握JS事件循环机制
掌握JS编程环境和模型

业务实战:
JS事件队列
JS管理模块
同步与异步
回调函数
Promise
Generator
async与await
宏队列与微队列
宏任务和微任务
JS事件循环机制: 再看定时器
JS事件循环机制: 模型分析
同步异步的优缺点
JS编程环境和模型
JS事件队列
JS管理模块说明
JavaScript函数式编程
应知应会:
掌握各种编程范式
掌握高阶函数和纯函数,以及函数柯里化
掌握代码组合和函数化封装

业务实战:
常用排序算法1: 冒泡
常用排序算法1: 选择
常用排序算法1: 插入
各种编程范式
各种编程范式
基本理解和使用
高阶函数
纯函数
函数柯里化
代码组合
函数化封装
如何使用好函数
链表
常用排序算法1: 冒泡
常用排序算法1: 选择
常用排序算法1: 插入
JavaScript设计模式
应知应会:
掌握常用模式
掌握单例模式
掌握工厂模式
掌握建造者模式
掌握原型模式
掌握代理模式
掌握继承模式

业务实战:
使用继承模式实现寄生组合式
面向对象编程
常用模式介绍
单例模式
工厂模式
建造者模式
原型模式
代理模式
继承模式1: 原型链
继承模式2: 借用构造函数
继承模式3: 组合式
继承模式4: 原型式
继承模式5: 寄生式
继承模式6: 寄生组合式
收获:

       学完此阶段需要掌握JavaScript高级语法、debugger进行程序调试,了解JS的线程机制。掌握JavaScript的闭包功能, 可以使用JavaScript函数式编写思想进行程序开发, 掌握几种常见的程序设计模式, 并可以进行JavaScript异步编写程序。

阶段六 前端开发必备应用

说明:

       学习前端开发虽然只需要简单的编写工具即可, 可如果能掌握一些高级的开发工具可以事半功倍。所以本阶段学习一些前端必备的技能, 一定要学习的就是前端的性能优化, 优化后的程序不仅加载速度是优化前的N倍,运行效率也大大提高, 并有利于SEO, 所以掌握性能优化是学习前端必备的一项技能。 另外,写大型项目都需要多人配合完成, 一定要学习的就是版本控制工具,这个可以将多人合作的代码整个在一起。 还有学习一些模块化的概念, 掌握JavaScript最新的ES6标准。还有就是使用前端技能可以开发APP项目, 就需要通过工具进行项目打包, 也是前端程序员需要掌握的技术。

模块 目标 知识点
性能优化
应知应会:
掌握浏览器渲染原理
掌握css图层和图层的合理应用
处理css、js阻塞
解决重绘重排、函数防抖、函数节流
掌握跨页签通信的实现
掌握网页性能优化大全
掌握ajax请求优化

业务实战:
封装Ajax请求工具库
浏览器渲染原理
浏览器内核简介
css图层
图层的合理应用
css、js阻塞
重绘重排
函数防抖
函数节流
函数防抖,节流应用
requestAnimationFrame
DNS、CDN
sessionStorage、localStorage
跨页签通信的实现
网页性能优化大全
再谈ajax请求优化
封装Ajax请求工具库
版本控制工具
应知应会:
掌握SVN版本管理工具的使用
掌握git版本管理工具
掌握github的使用

业务实战:
用版本控制工具处理项目开发过程
SVN版本管理工具
git版本管理工具
SVN服务端常见操作
linux常见命令
创建本地仓库
检出、克隆本地仓库
拉取远程代码
分支的操作
处理冲突实战
svn与git对比
git中差异对比
git中版本回退
github的使用
github创建组织
github的pullRequest操作
github的issues
githubPages的使用
模块化
应知应会:
掌握模块化思想
掌握CommonJs服务器端和浏览器端模块化
掌握ES6模块化分别暴露、统一暴露、默认暴露和暴露的本质
掌握如何引入模块和模块互相引用
模块化同构建工具的配合使用

业务实战:
模块化同构建工具的配合使用
模块化进化史
模块化思想
模块化优缺点
模块化规范介绍
CommonJs服务器端模块化
CommonJs浏览器端模块化
AMD模块化
CMD模块化
ES6模块化分别暴露
ES6模块化统一暴露
ES6模块化默认暴露
模块化暴露的本质
如何引入模块
模块互相引用
如何合理使用模块化
构建工具介绍
模块化同构建工具的配合使用
项目构建工具
应知应会:
掌握Grunt的插件和API应用
掌握Grunt打包各种资源
掌握Webpack的打包各种资源和开发环境打包

业务实战:
webpack打包优化
Grunt的插件和API
Grunt打包各种资源
Grunt检查编码规范
Grunt自动化构建
Gulp相关插件和API
Gulp自动化构建
Webpack的工作原理
Webpack四个核心概念
Webpack的loader与plugin
webpack打包各种资源
webpack开发环境打包
webpack生产环境打包
Webpack模块热替换
webpack tree shaking
webpack代码分离
webpack懒加载
DIY webpack配置环境
webpack打包优化
收获:

       学完此阶段需要掌握前端的各种性能优化方法, 灵活使用Git等版本控制工具, 了解模块化开发, 以及掌握项目构建的多种打包工具。

阶段七 前端高级框架

说明:

       写一些基本的特效,JavaScript和jQuery就可以完成, 可做专业前端开发工程师遇到的代码越来越复杂,程序架构越来越大, 这时就不能直接使用原生的程序进行开发了, 需要引入框架。 前端的框架比较多, 现在流程的组件式框架主要有Vue和React, 学会这两个框架应用率非常高, 基本上可以完成90%以上的程序设计。

模块 目标 知识点
React框架基本使用
应知应会:
掌握React的基本使用
掌握模块与模块化和组件与组件化
掌握React组件的组件三大属性

掌握React事件处理和组件的组合使用
掌握组件生命周期
掌握React脚手架的使用
掌握项目的打包与发布

业务实战:
React DEMO: 评论管理
组件间通信1: props
组件间通信2: 消息订阅与发布
React的基本认识
React的基本使用
React JSX
模块与模块化和组件与组件化
React组件的基本使用
组件三大属性1: state
组件三大属性2: props
组件三大属性3: refs
React事件处理
React组件的组合使用
React受控与非受控组件
组件生命周期
React脚手架的使用
项目的打包与发布
React DEMO: 评论管理
组件间通信1: props
组件间通信2: 消息订阅与发布
React框架进阶
应知应会:
掌握React ajax之axios
掌握React DEMO: github users
掌握React Router4基本路由、嵌套路由、向路由组件传递数据和编程式路由导航
掌握ReactUI组件库material-ui、ant-design
掌握redux库: 管理组件状态、react-redux库: 简化使用、redux-thunk库: redux异步

业务实战:
redux调用插件
React ajax之axios
React ajax之fetch
React DEMO: github users
React Router4基本路由
React Router4嵌套路由
React Router4向路由组件传递数据
React Router4编程式路由导航
ReactUI组件库之material-ui
ReactUI组件库之ant-design
redux库: 管理组件状态
react-redux库: 简化使用
redux-thunk库: redux异步
redux调用插件
自定义redux: createStore
自定义redux: combineReducers
自定义react-redux:Provider
自定义react-redux:connect
Vue框架基本使用
应知应会:
掌握Vue模板语法和计算属性和监视
掌握class与style绑定
掌握条件渲染与列表渲染

掌握事件处理与表单数据收集
掌握Vue实例生命周期
掌握过渡与动画、自定义过滤器、内置指令与自定义指令和自定义Vue插件

业务实战:
组件定义与使用
组件间通信1: props
组件间通信2: vue自定义事件
Vue的基本认识与使用
模板语法
计算属性和监视
class与style绑定
条件渲染与列表渲染
事件处理与表单数据收集
Vue实例生命周期
过渡与动画
自定义过滤器
内置指令与自定义指令
自定义Vue插件
使用vue-cli创建模板项目
eslint编码规范检查
组件定义与使用
组件间通信1: props
组件间通信2: vue自定义事件
Vue框架进阶
应知应会:
掌握Vue DEMO: todo list和user search
掌握Vue UI组件库: mint-ui
掌握vue-router: 基本路由、嵌套路由、 向路由组件传递数据、缓存路由组件和编程式路由导航

业务实战:
vuex: 计数器应用
vuex: todo list应用
组件间通信3: 消息订阅与发布
组件间通信1: props
组件间通信4: slot
Vue ajax: axios与vue-resource
Vue DEMO: todo list
Vue DEMO: user search
Vue UI组件库: mint-ui
vue-router: 基本路由
vue-router: 嵌套路由
vue-router: 向路由组件传递数据
vue-router: 缓存路由组件
vue-router: 编程式路由导航
vuex: 理解与基本使用
vuex: 相关API与结构分析
vuex: 计数器应用
vuex: todo list应用
Vue源码分析
应知应会:
掌握vue源码分析: 数据代理、数据劫持、setter,getter分析、Object.defineProperty、断点调试、 数据劫持等

业务实战:
分析MVC和MVVM区别
vue源码分析: 数据代理
vue源码分析: 数据劫持
vue源码分析: setter,getter分析
vue源码分析: Object.defineProperty
vue源码分析: 断点调试
vue源码分析: 数据劫持
vue源码分析: 插值解析
vue源码分析: 指令解析
vue源码分析: 单向数据绑定
vue源码分析: 双向数据绑定
vue源码分析: MVVM原理图
MVC和MVVM区别
收获:

       学完此阶段需要掌握React框架的基本应用, 了解React框架的一些高级特性。还需要掌握Vue框架的基本使用, 以及了解Vue框架的一些高级特性, 可以应用这两个框架开发项目。

阶段八 微信小程序开发

说明:

       小程序开发现在非常流程, 是APP的一种替代方案, 所以做前端开发一定会接触到小程序的开发。而小程序的开发腾讯出了一套自己的语言, 当然和我们的HTMl及CSS很像。 另外, 小程序开发结构及模式也是不同的, 有自己的专有特性, 还有好多功能必须通过官方接口调用才能实现的,就需要我们详细了解小程序API的应用。 还有就是小程序开发也有专门框架支持, 使用小程序框架可以大大提升程序员的开发速度。

模块 目标 知识点
原生小程序入门
应知应会:
掌握小程序语法
掌握组件化思想
掌握小程序开发工具使用
掌握小程序开发工具管理项目
掌握小程序开发工具调试
掌握小程序适配方案
了解px, em, rem, rpx对比

掌握全局配置文件

业务实战:
注册小程序应用
小程序介绍
小程序优缺点
小程序语法介绍
组件化思想
小程序开发工具使用
小程序开发工具管理项目
小程序开发工具调试
小程序适配方案
px, em, rem, rpx对比
全局配置文件
注册小程序应用
原生小程序API使用
应知应会:
掌握小程序局部页面配置
了解小程序生命周期函数和小程序路由跳转
掌握窗口配置
掌握原生小程序组件使用: view, text,button, wx.navigateTo/wx.showToast
掌握小程序本地数据存储
掌握小程序前后端交互

业务实战:
实现小程序背景音乐播放
小程序事件应用
局部页面配置
注册小程序页面
小程序生命周期函数
小程序路由跳转
窗口配置
原生小程序组件使用: view, text,button
原生小程序API使用: wx.navigateTo/wx.showToast
本地数据存储
小程序前后端交互
背景音乐播放
小程序事件应用
小程序框架Mpvue
应知应会:
掌握Mpvue基本使用
了解Mpvue注意事项
掌握Mpvue中处理原生小程序事件
掌握flyio应用
掌握Node.js中间层实现前后端完全分离
掌握Mpvue组件通信

业务实战:
使用Mpvue兼容原生小程序开发
Mpvue简介
Mpvue特点
Mpvue同原生小程序区别
Mpvue VS Vue
Mpvue基本使用
Mpvue注意事项
Mpvue中处理原生小程序事件
flyio应用
Node.js中间层实现前后端完全分离
Mpvue组件通信
Mpvue中兼容原生小程序生命周期及处理方式
收获:

       学完此阶段了解小程序的所有特性和工作流程及开发过程, 需要掌握原生小程序的入门, 以及原生小程序的API使用, 也要掌握小程序的框架Mpvue的应用。

加群主微信
购买后
拉进交流群
学习交流
¥2048元 立即购买
¥4096元 立即购买