新前端开发全栈课程体系 ( 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的应用。

购买后
拉进交流群