快速学习前端开发-前端开发路线思维导图模板

HTML和CSS

html

认识WEB

HTML标签

语义化标签

CSS

选择器

基础选择器

复合选择器

伪类选择器

CSS三大特性

层叠性

继承性

优先级

布局

定位

浮动

水平居中的几种方法

方法一：margin + width

方法二：table + margin

方法三：inline-block + text-align

方法四：absolute + margin-left

方法五：absolute + transform

方法六：flex + justify-content

BFC

解释

Block format content，块级格式上下文

一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

- float不是none

- position是absolute或fixed

- overflow不是visible

- display是flex inline-block等

BFC 的特性

计算 bfc 的高度时，浮动元素也参与计算

bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

其他

外边距合并

相邻元素垂直外边距的合并

嵌套块元素垂直外边距的合并（塌陷）

字体图标

Chrome调试

CSS进阶

精灵图

CSS 样式初始化

reset.css

normalize.css

LOGO SEO优化

网站 favicon 图片

网站TDK三大标签SEO优化

title 网站标题

description 网站说明

keyword 关键字

模块化开发

common.css

公共样式抽离

H5+C3

H5新增的标签

CSS3新增选择器

C3的新特性

盒子模型

滤镜

calc函数

过渡

translate

transform

rotate 旋转

orign 转换中心点

scale 缩放

rotate 3D旋转

animation

定义动画

调用动画

本地存储

移动端Web

视口

布局视口

视觉视口

理想视口

常用布局

1.流式布局(百分比布局)

2.Flex布局

3.rem+less

4.Bootsarp

5.Grid

像素相关

物理像素/设备像素

设备独立像素/设备无关像素

基础/插件

viewport

多倍图

less

媒体查询

rem

Bootstarp

flexible.js与swiper

移动端事件

touchstart

touchmove

touchend

touchcancel

常见问题

多倍图

点击穿透

1px 边框问题

JavaScript

ECMAScript

基本语法

数据类型

函数

作用域和预解析

面向对象编程

封装、继承、多态

原型链、闭包

DOM

事件捕获、冒泡、代理、委托

常用方法

BOM

定时器

localhost

history、navigator

ES5/6/7

let、count

symbol

解构赋值

箭头函数

模板字符串

Canvas(了解)

jQuery

常用API

样式操作

jQuery效果

属性操作/元素操作

绑定事件

插件

JavaScript高级

JS模块化

CommonJS

ES6

阻塞渲染

关于css阻塞

关于js阻塞

重绘/回流

回流

盒子模型相关属性会触发重布局

重绘

重绘是一个元素外观的改变所触发的浏览器行为

性能优化

减少DOM操作

使用translate代替left、top

减少css选择器层级

修改DOM尽量使用css

防抖与节流

函数防抖

概念：延迟要执行的动作，若在延时的这段时间内，再次被触发了，则取消之前开启的动作，重新计时

函数节流

设定一个特定的时间，让函数在特定的时间内只执行一次，不会频繁执行

Web Storage

SessionStorage

LocalStorage

缓存

缓存理解

浏览器在本地磁盘上将用户之前请求的数据存储起来

当访问者再次需要改数据的时候无需再次发送请求，直接从浏览器本地获取数据

缓存分类

强缓存

协商缓存

缓存header参数

服务器端基础

Node.js

NPM

Yarn

系统模块

第三方模块

Gulp

模块化开发

HTTP协议

HTPP协议的概念

HTTP协议是什么?

报文

MongoDB

基本命令

增、删、改、查

创建集合

约束字段

集合关联

art-template模板引擎

art-template

语法

条件判断

循环遍历

模板继承

模板配置

ejs

express框架

Request

Response

cookie

session

数据加密

Node.js爬虫框架

cheerio

download

爬虫高级

Selenium

AJAX

原生Ajax

jQuery的ajax方法

跨域问题总结

JSONP

cors

Vue

Vue基础

插值指令

Mustache

v-once

v-htmll

v-text

v-pre

v-cloak

v-bind绑定属性

缩写-&gt; :

v-bind绑定class

v-bind绑定style

computed计算属性

计算属性的setter和getter

计算属性的缓存

事件监听指令

v-on

v-on修饰符

.stop

.prevent

.keyCode | keyAlias}

once

navtive

条件渲染指令

v-if

v-else

v-else-if

v-show

循环遍历指令

v-for

Vue中key属性

数组响应式方法

pusho

popo

shifto

unshift

splice

sort

reverse

Vue.set修改响应式数据

v-if 和 v-for

v-model

v-model的修饰符

.lazy

.number

.trim

值绑定

动态的给value赋值

自定义指令

Vue.directive 注册全局指令

侦听器 watch

数据变化时执行异步或开销较大的操作

注意: watch 中的属性一定是data 中已经存在的数据

过滤器

Vue.filter()

常见的文本格式化/处理

mixin 混入

当多个组件中生命周期函数中有共同的代码,可以使用混入对象

生命周期

beforeCreate

created

beforeMount

mouted

beforeUpdate

update

beforeDestroy

destroyed

VueRouter

Vue-Router基础

安装装vue-router

路由组件详解

路由配置其他补充

路由的默认路径

路径的History模式

router-link的其他属性

配置路由的属性

编程式导航

动态路由匹配

路由懒加载

解释

将路由对应的组件打包成一个个的JS代码块

只有这个路由被访问到的时候, 才加载对应的组件

使用

const Home = () =&gt; import(&apos;../components/Home.vue&apos;)

路由嵌套

嵌套路由实现

1. 创建组件

2. 在路由映射规则中, 配置嵌套路由: children: [ { } ,{ } ]

3.在需要嵌套该组件的页面中, 使用 router-link 和 router-view

获取参数

query获取

$route.query

传递参数的方式

params

query

$router 和 $route的区别

$router是 VueRouter 实例，对路径相关导航操作

route是当前 path 映射的组件对象

导航守卫⚔

路由元信息

通过 meta 定义路由元信息

全局后置钩子

router.afterEach((to, from) =&gt; {})

路由独享钩子函数

可以做一些单个路由的跳转拦截

组件内钩子函数

更细粒度的路由拦截, 只针对一个进入某一个组件的拦截

keep-alive组件

页面缓存

在路由跳转的时，不会保存页面当前的状态

旧的组件会被销毁，新组件会被创建，再走一遍完整的声明周期

作用

keep-alive是 Vue 内置的一个组件

可以使被包含的组件保留状态，或避免重新渲染

属性

inclue：值是字符串或正则表达，只有匹配的组件会被缓存

exclue：值是字符串或正则表达，任何匹配的组件都不会被缓存

keep-alive独有生命周期

activated

deactivated

Vuex

State

单一状态树

State之所以叫单一状态树，就是因为用一个对象包含了全部层级状态

State 单一状态特点

state的改变完全由 mutations 控制

mapState

当一个组件需要获取多个状态时

Getters

描述

当你需要对 State 进行计算、筛选、过滤时

你可以把他看作Vuex的计算属性

Getters参数

state

getters

传递参数

可以传递给getters参数

mapGetters

mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性

Mutations

Mutation状态更新

Vuex的 state 状态更新的唯一方式：提交Mutation

Mutation主要包括两部分

字符串的事件类型，也就是事件名/函数名

一个回调函数，该回调函数第一个参数就是state

Mutation传递参数

mutation接收两个参数：state和payload

Mutation提交方式

1. 通过 commit 方式提交

2. 通过 type 方式提交

Mutation 常量替换事件类型

Actions

基本定义

Action 提交的是 mutation , 而不是直接更改状态

Action 可以包含任意异步操作

Action的分发

在Vue组件中，使用 dispatch 来调用 Action 中的方法

Action返回Promise

用来获取在 Action 中异步操作状态

Modules

React

React基础

React基础语法

React绑定属性

React事件绑定

React条件渲染

React组件化开发

React 生命周期

React 组件通信

高阶组件

React其他特性

Redux

认识纯函数

Redux核心API

React-Redux的使用

React-Redux

Redux-Middleware中间件

redux-sage

immutable

React-Router

React-Router核心API

BrowserRouter

history模式

link组件

NavLink组件

HashRouter

hash模式

Link组件

NavLink组件

Route

作用

Router用于路径的匹配

属性

path：用户设置匹配到的路径

component：匹配到的路径，渲染的组件

exat：精准匹配

NavLink

作用

路径被选中时，对应的a元素添加class

属性

activeStyle

活跃时(匹配)的样式

activeClassName

活跃时添加地class

axact

精准匹配

Switch

使用场景

只要有一个path匹配上了对应的组件, 后续就不会进行匹配了

使用

使用 Switch 包裹所有 Route 组件

Redirect

作用

Redirect用于路由的重定向

当这个组件出现后,就会执行跳转对应的to路径中

属性

to=&quot;/login&quot;

react-router其他补充

路由嵌套

withRouter(手动路由跳转)

reacat-router-config

作用

·将所有的路由配置放到一个地方进行集中管理

安装

yarn add react-router-config

配置路由映射关系数组

嵌套子路由配置映射关系

在路由嵌套中配置路由映射关系

React样式的选择

css

css-module

styled-component