javaScript知识体系思维导图模板_ProcessOn思维导图、流程图

DOM基础

获取dom元素

document.getElementsBy*()

document.querySelector('选择器')

常用属性

style 修改行内样式

innerText

innerHTML

value

checked

src

......

关系属性

nextElementSibiling

prevElementSibiling

parent

children

自定义属性

data-*

常用方法

操作类名

操作属性

setAttribute(key,value)

getAttribute(key)

removeAttribute(key)

元素增删

appendChild

insertBefore

append

prepend

after

before

insertAdjacentHTML

remove

cloneNode

事件类型

onclick

onmouseenter / onmouseleave

onmousedown / onmousemove / onmouseup

onfocus / onblur

onload / onscroll

onkeydown / onkeyup

事件绑定

el.onclick = function(){}

行内绑定

el.addEventListener('click',function(){})

冒泡和捕获

三大家族

offset

offsetWidth/Height

获取元素占据页面尺寸。等于 width/height + padding + border

offsetParent

返回距离元素最近的有定位的父元素，如果找不到返回 body元素，fixed元素返回 null

offsetTop/Left

返回元素与它.offsetParent 的内容区上左边距

scroll

scrollWidth/height

返回元素内容尺寸，等于 width/height + padding

特殊情况：当内容超出时，显示内容宽高 + padding(上左)；元素如果有overflow，padding(下）

scrollTop/Left

返回元素被滚动条遮挡的上左距离，是可读写的非整数值

页面卷入上左距离

html.scrollTop/Left || window.pageX/YOffset || body.scrollTop/Left

元素滚动方法

element/window.scroll(x,y)

element/window.scrollBy(x,y)

顺滑滚动

scroll/By({ top: xx, left: xx, behavior: "smooth" })

element { scroll-behavior: smooth; }

client

clientWidth/Height

元素可视尺寸：元素.width/height + padding - 滚动条的宽度

页面可视区域

html.clientWidth/Height || window.innerWidth/Height || body.clientWidth/Height

页面滚动相关

1. 滚动进度

进度比 = 卷入的距离 / 总的可卷入距离

总的可卷入距离 = 页面高度 - 可视区域高度

2. 无限滚动

滚动条滑块与底部距离 < 阙值时，增加页面高度

滑块与底部的距离 = 页面高度 - 卷入高度 - 可视高度

clientTop/Left

返回元素上左边框的宽度

递归实现获取任意元素到页面的上左边距

实例：轮播、滚动跟随、滚动改变状态

Event

包含了与事件相关的信息组成对象，事件对象

event.type

事件类型

元素

event.target

触发事件的元素

event.currentTarget

绑定事件的元素

等同于事件函数(用JS绑定)中的 this

鼠标

event.button/which

按键

位置

pageX/Y

clientX/Y

offsetX/Y

鼠标与 event.target

screenX/Y

键盘

event.key

获取按键信息

阻止

默认

event.preventDefault() || event.returnvalue = false

直接在元素事件中 return false

冒泡

event.stopPropagation() || event.cancelBubble = true

事件委托

原理：利用事件冒泡机制以及可以获取事件触发元素的方法，得到将子元素的事件委托给父元素进行监听的方式

优点

1. 减少了DOM操作

2. 新添加的元素也有相同的事件监听

写法

1. 判断委托元素

2. 委托元素有子系元素，需要用 closest() 来获取委托元素

实例：拖拽、跟随

拖拽逻辑

1. 元素拖拽位置 = 元素起始拖拽位置 + 鼠标移动距离

鼠标移动距离 = 拖拽过程中鼠标位置 - 鼠标按下时的位置

2. 元素拖拽位置 = 鼠标与页面的距离 - 鼠标与元素的距离

BOM

浏览器对象模型，包含浏览器相关操作，实际操作API都绑定在了window上

URL介绍

组成：协议 + host + 端口号 + [路径] + [参数] + [锚点]

host - 主机地址

服务器IP

本地开服务

vscode 插件 live-server

通过 npm 安装 live-server

通过 ipconfig 命令查询IP

本地IP

127.0.0.1

localhost

局域网IP

无线网IP

域名

服务器名 + 主域

www.baidu.com

www - 服务器名

baidu.com - 主域

origin

源：协议 + host + 端口号

三者完全一致代表同源

open

url

效果类似于a标签

windowName

a标签 target属性

自定义

iframe标签name属性

windowFeature

在第二个参数是打开新页面的情况下，加上本参数就可以定制窗口

history

标签页历史记录栈，之记录过程，不记录页面信息

length

跳转的页面长度

forward/back()

前进/后退一页

go(n)

前进/后退n页

跳转超出记录栈长度，会失效

location

URL解析对象

属性

href

当前页面URL

origin

protocol

hostname

port

search

用于页面传值，中文编译 encodeURI() / decodeURI() ⭐

hash

锚点

方法

跳转

location = url

location.href = url

location.assign(url)

不带记录的跳转

location.replace(url)

刷新

location.reload(是否强制刷新)

navigator

浏览器信息

userAgent + 正则

判别浏览器类型

onLine

设备是否在线

raf

requestAnimationFrame(fn) 在浏览器下次刷新时执行函数 -- 实现流畅的动画

cancelAnimationFrame(requestId) 取消raf设定的内容

根据时间比例来设定的动画 = 时序动画

已过时间 / 总时间

扭曲时间与进程的比例，可得到不同的动画效果

jQuery

介绍：JS框架，封装了JS代码，实现了很多DOM操作的函数功能。宗旨：write less, do more。是 JS 框架，简化了DOM/JS操作

引入

1. 引入方式

下载到本地

使用 CDN

2. 引入类型

正常 - 开发版本

可以查看源码

压缩 - 生产版本

更小的体积，更快的加载速度

3. 版本

1.xx 兼容IE678，社区内容多，最好选用 1.7.0之后

2.xx 删除了IE678的支持，精简了部分API，不推荐使用

3.xx 目前仍在更新

使用

接收函数作为参数

作为入口函数使用，替代 window.onload

接收选择器作为参数

ID/类名/标签名

父类/交集/并集

+ > ~

属性

筛选

:eq(index)

:lt(index)

:gt(index)

:first/last/contains...

jQ对象

本质：由符合筛选条件的DOM元素组成的伪数组

转成DOM

$ele[index]

$ele.get(index)

DOM 转jQ

$(DOM)

特性

1. 链式调用

jQ方法多数可以返回jQ对象本身，可以继续调用其它方法进行操作

2. 隐式迭代

调用jQ方法，会默认对jQ选中的所有节点进行对应操作

jQ方法

属性操作

prop/attr

区别：prop是对 DOM 对象进行的操作，attr 是对标签属性进行的操作

prop(key)

prop(key,value)

prop({ key: value, key:value, ... })

removeProp(key)

样式操作

css(key)

css(key,value)

css({ key:value, key:value, ... })

类名

addClass()

removeClass()

hasClass()

toggleClass()

内容

html()

text()

val()

不加参数表示获取，加上参数表示设置

元素

before()

prepend()

append()

after()

replaceWith()

remove()

clone(是否克隆事件)

参数为：DOM/jQ对象/HTML字符串/普通文本

关系节点

父选择

parent()

parents()

parentUntil()

children()

前兄弟元素选择

prev()

prevAll()

prevUntil()

后兄弟元素选择

next()

nextAll()

nextUntil()

siblings()

eq(index)

find()

上述所有方法均可接收元素选择器作为参数

事件

$ele.事件名(事件处理函数)

$ele.on(事件名多个, [委托元素], [事件参数], 事件处理函数)

$ele.off([事件名], [委托元素], [事件处理函数名])

动画

语法

$ele.animate({ 样式终点对象 }, [duration], [easing], [callback])

样式终点值可以不带单位，或者设置为 "toggle"

颜色动画 / 更多的动画曲线需要借助插件

jquery.color.js

jquery.easing.js

动画队列

jQ给同一个元素绑定多个动画，动画会进入队列状态，按顺序执行

快捷动画

.show/hide/toogle()

.slideDown/slideUp/slideToggle()

.fadeIn/Out/Toggle()

均可接收和动画一样的参数

动画延时

delay(time)

停止

stop(stopAll?,toEnd?)

stop(true,true)

stop(true,false)

stop(false,false)

stop(false,true

finish()

注：停止可以将延时也取消

插件

Swiper 轮播

引入 css、js

复制页面代码，修改内容

根据 API 设置Swiper实例

new Swiper(容器选择器, { 配置 })

animate.css 动画样式库

预定义动画的库

@keyframes 动画名 { 进程 }

引入之后给元素添加类名即可呈现动画

1. animate__animated

2. animate__动画名

3. animate__delay-2/3/4/5s

4. animate__repeat-1/2/3/infinite

5. animate__slow/slower/fast/faster

可用CSS变量

--animate-duration: 1s;

持续时长

--animate-delay: 1s;

延时时长

--animate-repeat: 1;

次数

WOW.js 元素出场动画

1、引入依赖的 animate.css

2、引入 wow.js

3、给页面出场动画元素添加 wow 类名以及出场的动画类名

4、初始化wow

new WOW({ 配置 }).init()

兼容新版动画库，设置 animateClass: animate__animated

变量和数据类型

变量

定义

可变的量（保存的值可以变化），设置一个变量（起个名字），让其代表某个数据

创建变量

var

var a = 3；

创建/定义/声明一个变量 a ,赋值为3

var a; a = 3;

var 声明变量的关键字

function

function foo(){}; 声明函数

变量命名规则

只能使用字母/数字/下划线_/$

严格区分大小写

不能以数字开头

不能使用js中的关键字保留字

使用驼峰命名法

firstName

getName

命名语义化/见名知意

add/insert/create

新增/插入/创建

update

更新

del/delete/remove

删除

select/query/get

查询/获取

数据类型

基本数据类型

字符串 string

数字 number

布尔值 boolean

未定义 undefined

null 空对象指针

symbol es6新增

引用数据类型

对象

{.....}

数组

[......]

函数

function foo(){.....}

数据类型转换

显式转换

其他数据类型====> string类型

1. +'' (利用字符串的拼接功能)

2. toString( )

3. String( )

一般来讲,转换为的字符串就是自身值加上引号

其它数据类型====> number类型

Number( )

只有纯数字字符串才能转换成 number

true==>1/false==>0

undefined==>NaN

null==>0

其它数据类型====> boolean类型

Boolean( )

undefined/null/0/NaN/空字符串''===>false

隐式转换

隐式转换采用的转换规则分别是 String() / Number() /Boolean() 三者的规则

parseInt()/parseFloat()

parseInt

把字符串变为整数

parseFloat

把字符串变为小数

专门用来对付字符串

运算符

赋值运算符 =

var a = 10;

将 = 号右边的值,赋给左边

算术运算符

+

如果有一方是字符串类型，会把参与运算的数据都变成字符串类型，执行的是拼接字符串的操作

如果参与运算的没有字符串，就转换为数字进行加法运算

-

*

/

%

取余

（）

有括号，先算括号里边的

注意: 参与算术运算的如果不是数字类型,会隐式转换成数字类型(+特殊)

自增和自减

+=

a = a + num;可以简写成: a+=num;

a = a + 1

a++

++a

两者的区分

相同点: 都实现了a的自增1(开发常用)

不同点:

var n = a++;

n的值是 a没加1时的值

var n = ++a;

n的值是 a加1之后的值

比较运算符

存在隐式转换

>

<

>=

<=

==

!=

参与比较的如果不是数字类型,会先隐式转换成数字类型,在进行比较

如果参与比较的两边都是 string类型,就一位位比较对应的unicode编码值

严格比较

先比较数据类型，数据类型一致，再接着比

数据类型不一致，直接false

严格等于 ===

严格不等于！==

注意：如果不等于的情况不好理解，就考虑等于的情况，再取反即可

比较运算的结果只有两个 true或者false

逻辑运算符

理解

与、且 &&

同时符合条件，才算符合条件

或 ||

只要有一个满足条件，就算满足条件

非！

取反

短路运算

且运算

如果第一个表达式结果为false，就可以判定整体结果为false，所以后续的表达式不再执行

或运算

如果第一个表达式结果为true，就可以判定整体结果为true，所以后续的表达式不再执行

逻辑运算的结果（返回值）

整个逻辑运算的结果由哪个表达式决定，最后结果就是哪个表达式的值

且运算

表达式1&&表达式2

表达式1结果为true，返回值是表达式2的结果

表达式1结果为false，返回值是表达式1的结果

总结：遇到false就返回

或运算

表达式1||表达式2

表达式1结果为true，返回值是表达式1的结果

表达式1结果为false，返回值是表达式2的结果

总结：遇到true就返回

流程控制

选择语句

if语句

条件判断语句

if...else语句

多分支if语句

switch语句

适合场景: 罗列表达式的所有可能结果,针对不同的结果执行相应的代码

循环语句

for循环

while循环

循环嵌套

内层循环执行结束,才会开始外层循环的下一轮

退出循环

break: 退出整个循环

continue: 退出当次循环, 继续下一次循环

数组(Array)

定义

保存某一类数据的集合

引用数据类型(特殊的对象)，typeof 检测数据类型时返回object

准确判断是不是数组时，可以使用instanceof

特性

索引

每个数组元素对应都有一个索引

索引从0开始，依次递增

length

数组具有长度属性，指的是数组元素的个数

一般是最大索引+1

基本使用

我们对数组的CURD都是基于索引的

获取元素

arr[index]

添加元素

arr[index] = 3;

修改元素

arr[index] = 4;

删除元素

arr.length--;可以实现删除数组最后一个元素

数组元素的遍历

for循环

数组的方法

push()/pop()/shift()/unshift()

concat()

split()/join()

sort()

reverse()

indexOf()/lastIndexOf()

slice()

splice()

.....

数组的排序和去重

排序

冒泡排序

选择排序

插入排序

....

去重

....

总结

我们从服务器获取的数据一般都是对象或者数组,而且结构层级嵌套也比较多

所以学会数组和对象的操作,根据需求把获取的数据进行相应的解析和处理,是前端开发学习的重点

JS对象

描述

简介：无序属性的集合，用于描述一个事物

属性有键值对组成

普通属性

值为函数的属性，又名方法

常规取值/赋值

. 操作符

obj.xx

obj.xx = xx

计算属性

[] 操作符，常用于属性名是变量或表达式的返回值

obj[xx]

obj[xx] = xx

属性描述符

数据属性描述符

configurable

属性描述符是否可更改配置，属性能否被删除

enumerable

属性能否被遍历

writable

属性能否写入值

value

属性值存储的位置，默认为 undefined

访问器属性描述符

configurable

enumerable

get

监听属性被读取操作

set

监听属性写入操作，接受一个参数为写入的值

直接在对象字面量中书写

{ get propName(){ } }

{ set propName(v){ } }

操作属性描述符方法

Object.defineProperty(对象, 属性名, { 属性描述符对象 })

Object.defineProperties(对象, { 属性名: { 属性描述符 }, ... })

限制属性

禁止扩展

Object.preventExtensions(obj)

Object.isExtensible(obj)

阻止扩展与删除

Object.seal(obj)

Object.isSealed(obj)

阻止扩展/删除/修改

Object.freeze(obj)

Object.isFrozen(obj)

对象克隆

深克隆

简单类型值属性的对象

含有引用类型属性的对象

递归深克隆

lodash的方法

浅克隆

克隆对象与源对象的存在地址相同的引用

获取所有属性

属性名

Object.keys(obj)

属性名可遍历

Object.getOwnPropertyNames(obj)

不论属性名是否可遍历

属性值

Object.values(obj)

遍历对象

for .. in ..

可以获取对象所有可访问的属性，包括对象原型上的属性

判断对象属性是否存在

使用 in 操作符

key in obj

删除对象属性

使用 delete 操作符

delete obj.属性名

函数

作用

1、封装代码，作为功能集

普通函数

2、创建对象

构造函数

首字母大写（人为区分）

代码中以 this 添加属性

通过 new 方式调用

属性

length

函数形参个数

name

函数名，函数名不一定可用

prototype

返回函数原型对象

生成

1、声明函数

function fnName() {}

2、函数表达式

var fnName = function(){}

区别：函数声明优先于变量声明，且带值提升。函数表达式使用变量声明

3、构造函数

形参

定义：实参的占位符，本质上是函数内声明的变量

个数

多于实参，多余的形参值为 undefined

少于实参，多余的实参被忽略，可以通过 arguments 找到

值类型

简单类型：函数内部改变不影响传入的值

引用类型：函数内部改变影响传入的值

arguments

由实参组成的伪数组

在非严格模式下，形参于arguments中对应的实参互为映射

非严格模式下 argument.callee 代表函数本身

默认参

简单类型值

三元运算式

短路语句

ES6

引用类型值

对象合并 Object.assign()

不定参

使用 arguments

ES6 剩余参数 ...参数名

函数执行上下文

1、找函数形参

2、函数内声明函数提升

3、函数内变量提升

4、实参赋值

5、函数赋值

6、执行函数

函数类别

立即执行

(function [fn](){})()

(function [fn](){}())

var fn = function(){}()

!function(){}()

闭包

定义：能访问到被销毁作用域的函数中变量的函数

作用：创建封闭环境变量或者函数

弊端：因变量无法回收，使用过多可能会导致内存溢出

递归函数

自己调用自己的函数

优化：尾递归

回调函数

执行完某个操作之后执行的函数

函数方法

call

fn.call(thisObj, arg1, arg2...)

调用函数，改变this

apply

fn.apply(thisObj, [arg1, arg2...])

常用于函数转移，将函数 this 以及所有参数转移给另一个函数使用

bind

fn.bind(thisObj, arg1, ..arg2...)

返回一个改变了this指向的函数，可以固定一部分参数

固定部分参数的函数称为偏函数

柯里化

将 f(a,b,c..) => f(a)(b)(c)...的方式

高级柯里化

可以像原函数一样调用

可以制作偏函数

可以柯里化使用

this

普通函数：指向 window

对象方法：指向调用的对象

使用 new 方式，指向实例（即生成的对象）

DOM事件：指向绑定事件的DOM元素

作用域

作用：提供变量查找值的顺序

词法作用域，又名静态作用域

内部变量使用声明时所在的作用域

原型

作用：自身属性可以被实例对象共享使用

原型链：一个对象的原型可以是另一个对象的实例，由此形成的递进关系称为原型链。它提供了对象访问属性的查找顺序。终点是 null

函数

fn.prototype

Object的实例

fn.__proto__

Function

通过 new 构造() 创建的对象 -- 实例

对象

obj.__proto__

Object.getProtypeOf(obj)

Object.setPrototypeOf(obj, 原型对象)

constuctor

标识原型是哪一个构造函数的原型

继承

寄生式组合继承

构造函数实现私有属性继承

构造函数原型 = { __proto__: 父类原型 } 实现父类原型属性的继承

数据结构与算法

学习准备

vscode快捷键

leecode

刷题

数据结构

数组

两数之和

二分搜索

删除有序数组中的重复项

对象

链表

环形链表

链表中间节点

栈和队列

有效的括号

树

二叉树

前中后序遍历

翻转二叉树

算法

时间和空间复杂度

递归

动态规划

AJAX

简介

在不刷新当前页面的情况下，获取另一个URL信息，并将其呈现的技术

客户端：获取数据的主机 / 服务端：分享数据的主机

服务端分享形式

1、分享文件

http://www.baidu.com/index.html

https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js

2、拦截路由，设置返回内容

http://bufanui.com/h5

https://new.qq.com/ch/milite/

核心对象

new XMLHttpRequest()

属性和方法

readyState

请求进度状态码

0-4

0 未发出请求

实例.UNSENT

1 建立请求

实例.OPENED

2 发出请求

实例.HEADERS_RECEIVED

3 获得部分数据

实例.LOADING

4 获得全部数据，请求结束

实例.DONE

onreadystatechange

监听改变过程

status

标识 HTTP 状态码

200

请求成功

400

参数格式有误

404

URL问题

415

文件格式有误

500

服务器内部错误

onloadstart

发出请求前

onload

请求成功

相当于 xhr.readyState == 4

onerror

请求出现意外情况，例如断网等

onprogress

请求过程监听

event.lengthComputable

判断进度事件是否可用

event.loaded

已加载字节数

event.total

预加载字节数

onloadend

请求结束

open(method, url, 是否异步)

设置请求方式以及路径

默认为异步，同步已经被取消了

setRequestHeader(key, value)

设置请求头

身份验证

参数格式 Content-Type

text/plain 默认

application/json

application/x-www-form-urlencoded

multipart/form-data

send(请求体)

发送请求，GET请求没有请求体

jQ.ajax

相当于ajax方法的封装

$.ajax({ setting })

url

请求地址

type

请求方式

data

请求参数

contentType

请求参数类型

header

请求头设置

timeout

超时时间设置

dataType

预期服务器返回数据类型

beforeSend

发送请求前的回调

dataFilter

在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。

success

请求成功的回调，默认服务器返回值为实参

error

请求失败的回调，函数默认接收三个参数

XMLHttpRequest 对象

错误信息

null

timeout

error

notmodified

parsererror

（可选）捕获的异常对象

complete

无论请求成功或失败都会执行的函数

$.post/get()

跨域

origin不一致：限制ajax访问/dom

document.domain + iframe

两个页面同主域或者同IP，可以使用此方法

postMessage

anotherWindow.postMessage(content, anotherPageOrigin)

anotherPage可以通过 window.onmessage 事件接受发来的消息

event.data

消息内容

event.source

消息来源页面的window对象

event.origin

消息来源页面的源

通过 event.source.postMessage("消息内容", event.origin); 可以传回消息

jsonp

利用 script 标签可以发出 GET 请求，不受跨域限制，且可以将得到的内容解析为 JS 执行代码的特性，实现前后端跨域请求

一般做法：前端定义好接受返回值的函数，将函数名发送给后端，后端返回一段函数调用的文本，将数据作为实参写入

CORS

直接由服务端定义，实现前端的跨域访问，最喜欢了

WebSocket

作用：实现客户端与服务端的双向通讯

用途：聊天、K线图等

使用

1. 声明实例 -- 参数：链接地址

var ws = new WebSocket(ws://xxx)

2. 过程监听

onopen

通讯建立的监听函数

onerror

通讯出现异常的监听函数

onclose

通讯关闭的监听函数

onmessage

获取到服务端消息的监听函数

event.data 获取消息内容

3. 发送数据

ws.send(数据)

4. 关闭

ws.close()