2021最新前端学习路线.mm 思维导图模板_ProcessOn思维导图、流程图

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中，从而实现跨页面攻击