前端课程体系大纲

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_44222492/article/details/96327408

未经授权,不得转载

前端课程体系大纲
总阶段名称 阶段分支名称 技术名称 技术内容 学习目标
前端基础阶段 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.无缝滑屏
掌握移动端各种特效

猜你喜欢

转载自blog.csdn.net/weixin_44222492/article/details/96327408