2021最新前端学习路线.mm
2021-01-28 10:57:30 10 举报AI智能生成
2020最新前端学习路线
作者其他创作
大纲/内容
1：基础阶段：HTML+CSS+PS
HTML
属性
事件
标签
字符集
表格
表单
CSS
CSS基础教程
CSS样式
背景
文本
字体
链接
列表
表格
轮廓
CSS框模型
内边距
边框
外边距
CSS定位
相对定位
绝对定位
浮动
CSS选择器
元素选择器
选择器分组
类选择器
ID选择器
属性选择器
后代选择器
子元素选择器
相邻兄弟选择器
伪类
伪元素
CSS高级
对齐
尺寸
分类
导航栏
图片库
图片透明
盒子模型
媒体布局
PS
安装ps
量尺寸
吸色
切图
蓝湖
2：基础阶段：JavaScript
认识JavaScript
DOM+BOM综合演练
网页特效
基本语法
变量
关键字
保留字
原始类型
引用类型
类型转换
数据类型
字符串
数字
布尔
数组
对象
Null
Undefined
函数
内置函数
自定义哈数
arguments对象
Function对象
运算符
一元运算符
位运算符
布尔运算符
乘性运算符
加性运算符
关系运算符
等性运算符
条件运算符
赋值运算符
赋值运算符
流程控制
if/else
switch
while/do-while
for循环
Break、continue语句
对象
String
Array
Date
Boolean
Math
Number
BOM对象
WIndow
Navigator
Screen
History
Location
DOM对象
节点
方法
属性
元素
事件
EventListener
js高阶
面向对象
构造函数
原型对象
继承
作用域
作用域链
原型链
闭包
递归
沙箱
缓存
回调函数
AOP(面向切面编程）
3：基础阶段：HTML5+CSS3
HTML5
HTML5视频
HTML5音频
HTML5拖放
HTML5画布
HTML5 SVG
HTML5地理定位
HTML5 Web存储
HTML5 应用缓存
HTML5表单
CSS3
CSS3边框
CSS3背景
CSS3文本效果
CSS3字体
CSS3 2D转换
CSS3 3D 转换
CSS3 过渡
CSS3 动画
CSS3 多列
CSS3多媒体查询
4：Jquery阶段
基础语法
选择器
基本选择器
层次选择器
过滤选择器
表单选择器
DOM操作
查找节点
创建节点
插入节点
删除节点
复制节点
替换节点
包裹节点
属性操作
样式操作
事件
事件绑定
事件冒泡
事件绑定
事件解绑
动画
show、hide
fadeIn、fadeOut
slideUp、slideDown
自定义动画animate
动画回调以及停止动画
常用工具
浏览器及特性检测
数组和对象操作
Jquery插件编写
5：移动端开发
标准适配方案
非标准适配方案
调试工具
mate标签
自适应布局
兼容问题
移动端事件
手势
媒体查询
栅格系统
rem适配
swiper
sass
less
scss
6：ES6+
ES6
let，const
解构赋值
箭头函数
...操作符
字符串的扩展
正则的扩展
数值的扩展
函数的扩展
数组的扩展
对象的扩展
Symbol类型
Set 和 Map 数据结构
Proxy
Reflect
Promise 对象
Iterator 和 for...of 循环
Generator 函数
async 函数
class类
Module
ArrayBuffer接口
ES7
includes()
指数操作符**
ES8
Object.values/Object.entries
padStart 和 padEnd
Object.getOwnPropertyDescriptors
Trailing commas in function (函数参数列表结尾允许逗号)
Async/Await
ES9
ES10
7：前后端交互
Nodejs
基础
console（控制台）
crypto（加密）
debugger（调试器）
fs（文件系统）
http（网络）
os（操作系统）
path（路径）
高级
NPM介绍及使用
MVC模式简介
Express框架学习
链接Mysql
链接Redis
项目实战
Mysql
认识mysql
安装mysql
创建数据库、数据表
学习常用的SQL命令，完成增删查改
学习Mysql关联查询，子查询等
学习Mysql常用函数
学习Mysql分组、分页、排序等
学习Mysql高级查询
MongoDB
基本命令
js写mongo命令
批量插入
Updata
状态返回与安全
find
索引
用户的创建，删除，修改
http
http介绍
消息结构
请求方法
响应头信息
状态码
content-type
前端请求工具
原生ajax
JQ-ajax
axios
Fetch
webSocket
8：框架阶段
Bootstrap
animate.css
Vue
Vue基础
模版语法
计算属性侦听器
Class与Style绑定
条件/列表渲染
事件处理
表单输入绑定
组件基础、注册
Prop
自定义事件
Vuex
State
Getter
Mutation
Action
Module
Vue-router
认识路由
动态路由
嵌套路由
编程式导航
路由组件传参
axios
认识axios，全局配置，发送POST、GET请求等
vue-cli
安装vue-cli
vue-cli目录结构
vue-cli模板解读
学习问题解答+分享学习资料加群：572512676
React
认识React
React元素渲染
JSX
组件
State
Props
事件处理
条件渲染
列表
组件API
组件声明周期
webpack
概念，主要讲什么是入口，出口，loader，插件等
入口
单个入口语法
对象语法
常见场景
输出
用法
多个入口起点
高级进阶
模式
development
production
loader
实例
配置
插件
剖析
用法
配置
配置
基本配置
多个Target
使用其他语言配置
模块
TypeScript
基础类型
变量声明
接口
类
函数
泛型
枚举
类型推论
类型兼容性
高级类型
Symbols
迭代器和生成器
模块
命名空间
命名空间和模块
模块解析
声明合并
JSX
装饰器
Mixins
三斜线指令
JavaScript文件类型检查
小程序
了解小程序开发流程
视图容器
view
scroll-view
movable-view
cover-view
cover-image
基础内容
icon
text
rich-text
progress
表单组件
button
checkbox
form
input
label
picker
picker-view
radio
slider
switch
textarea
导航
navigator
function-page-navigator
媒体组件
audio
image
video
camera
live-player
live-pusher
地图（map）
画布（canvas）
开放能力
open-data
web-view
ad
official-account
9：项目管理+常用框架
项目管理
SVN使用
认识svn
安装
生命周期
启动模式
创建版本库
检出操作
解决冲突
提交操作
版本回退
查看历史
分支
标签
GIT使用
认识git
安装配置
工作流程
工作区、暂存区和版本库
创建仓库
基本操作
分支管理
查看历史等
标签
github
常用框架使用篇
iview （vue框架）
element ui （vue框架）
uniapp
echarts (百度图标库)
阿里巴巴开源图标使用
zoom.js 学习
WEEX
Koa2
Nuxt.js
Flutter
Electron开发桌面应用系统
apicloud（移动app开发）
认识apicloud
开发工具讲解
端API
API对象
设备访问
功能扩展
界面布局
导航菜单
小程序模块
云服务对接
云API
数据云API
统计云API
推送云API
云API SDK
10：数据可视化
可视化技术栈
基础数学：三角函数、线性代数、几何算法
图形相关：canvas、svg、webgl、计算图形学、图论
工程算法：基础算法、统计算法、常用的布局算法
数据分析：数据清洗、统计学、数据建模
设计美学：设计原则、美学评判、颜色、交互、认知
可视化基础：可视化编码、可视分析、图形交互
可视化解决方案：图表的正确使用、常见的业务的可视化场景
常用的数据可视化工具
值得推荐的 37 款数据可视化工具
类型
关系数据可视化
作用:主要表现为节点和边的关系，比如流程图、网络图、UML 图、力导图等
类库:mxGraph、JointJS、GoJS、G6
统计数据可视化
作用:用于对统计数据进行展示、分析。统计数据一般都是以数据库表的形式提供
类库:HighCharts、ECharts、G2、Chart.js
地理空间数据可视化
作用:地理空间通常特指真实的人类生活空间，地理空间数据描述了一个对象在空间中的位置
类库: Leaflet、Turf、Polymaps
常用库
D3
优势
强大的 SVG 操作能力，可以非常容易的将数据映射为 SVG 属性
集成了大量数据处理、布局算法和计算图形的工具方法
强大的社区和丰富的 demo
劣势
API 太底层，复用性低，学习与使用成本高
HighCharts
优势
使用门槛极低，兼容性好
使用广泛，非常成熟
劣势
样式比较陈旧、图表难以扩展
商业上使用需要购买版权
ECharts
优势
丰富的图表类型，覆盖主流常规的统计图表
配置项驱动，三级个性化图表样式管理
移动端优化，交互和布局适配，按需打包
深度的交互式数据探索
地理特效（百度迁徙，百度人气，公交轨迹等效果）
劣势
灵活性上不如 Vega 等基于图形语法的类库
复杂关系型图表比较难定制
Leaflet
优势
专门针对地图应用
mobile 兼容性良好
插件机制
劣势
功能比较简单，需要具备二次开发能力
Vega
优势
完全基于 JSON 语法，提供从数据到图形的映射规则
支持常见的交互语法
劣势
复杂的语法设计，使用和学习成本很高
deck.gl
优势
主要以 3D 地图可视化为主，内置了地理信息可视化常见的场景
支持大规模数据的可视化
劣势
需要具备 WebGL 的知识，层的扩展比较复杂
antV
模块
底层绘图引擎 G
可视化语法类库 G2
与 ECharts 等图表库相比，G2 最大的优势是灵活的图形语法能力，可以让用户自由定制出各种各样的图表
关系可视化类库 G6
移动端图表类库 F2
可视化设计指引与使用规范
优势
简单、易用
完备的可视化编码
强大的扩展能力
劣势
语法需要一定学习成本
基于 Web 的可视化技术
SVG：可缩放矢量图形（Scalable Vector Graphics），是基于可扩展标记语言（标准通用标记语言的子集）用于描述二维矢量图形的一种图形格式
Canvas 2D：Canvas 通过 JavaScript 来绘制 2D 图形，通过逐像素来进行渲染
Canvas 3D WebGL：WebGL（Web Graphic Library）是一个 JavaScript API，用于在任何兼容的 Web 浏览器中渲染 3D 图形。WebGL 程序由用 JavaScript 编写的控制代码和用 OpenGL 着色语言（GLSL）编写的着色器代码构成，这种语言类似于 C 或 C++，可在 GPU 上执行
11：Web安全
客户端脚本安全
浏览器安全
同源策略
例外标签
,,,等标签不受同源限制
但浏览器限制了JS的权限，使其不能读、写返回的内容
限制范围
DOM
Cookie
XMLHttpRequest
XMLHttpRequest受到同源策略的约束，不能跨域访问资源
浏览器沙箱
sandbox，泛指“资源隔离类模块”
设计目的一般是为了让不可信的代码运行在一定的环境中，限制不可信代码访问隔离区之外的资源
恶意网址拦截
挂马网站
利用浏览器的漏洞执行shell code，在用户电脑中植入木马
钓鱼网站
通过模仿知名网站的相似页面来欺骗用户
HTML5安全
新标签的XSS
, 等
需要加入XSS Filter黑名单避免发生XSS
iframe的新属性sandbox
新特性
加载的内容会被视为一个独立的“源”，其中脚本将被禁止执行
options
allow-same-origin：允许同源访问
allow-top-navigation：允许访问顶层窗口
allow-forms：允许提交表单
allow-scripts：允许执行脚本
Link Types：noreferer
为和定义了新的Link Types: noreferer
浏览器在请求该标签指定的地址时将不再发送Referer
Canvas
可以让JS在页面中直接操作图片对象，也可以直接操作像素，构造出图片区域
其强大的功能甚至可以用来破解验证码，大大降低了攻击的门槛
其他安全问题
Cross-Origin Resource Sharing
尽量不使用通配符"*"，使用更多HTTP Header做更精确的控制
postMessage - 跨窗口传递消息
postMessage允许每一个window对象向其他窗口发送文本消息不受同源策略限制
可能会导致DOM based XSS的产生
Web Storage
Storage类型
Session Storage
Local Storage
安全隐患
攻击者可能会将恶意代码保存在Web Storage中，从而实现跨页面攻击
收藏
0 条评论
下一页
为你推荐
查看更多
