JS知识点梳理

函数执行的时候，都会形成一个全新的私有作用域（私有的栈内存）

目的是：

1）创建新节点

createDocumentFragment() //创建一个DOM 片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name 属性的值

getElementById() //通过元素Id，唯一性

一.闭包堆栈内存

> 多做题，进行汇总梳理

1. 变量提升

2. 作用域和作用域链

3. 堆栈内存释放问题

4. 闭包的作用及在项目中的应用

> JQ基于闭包完成的：部分JQ源码

> 高级单例模式

> 柯理化函数

> 循环做事件绑定，方法中需要使用循环的索引

> 模块化编程：ES6中模块的导入导出及NODE中的COMMON模块管理规范（AMD/CMD模块管理规范等）

> ...

二、面向对象

> 理解和归纳汇总

1. 对象、类、实例

2. 构造函数模式和原型以及原型链

3. instanceof：数据类型检测

4. hasOwnProperty

5. 类的继承(原型继承、CALL继承、寄生组合继承、ES6中的EXTENDS继承...)、封装、多态

6. 基于内置类的原型扩展方法

> 什么是面向对象，以及在实战项目中的应用：

> A：组件、插件、类库等封装一般都是基于创建类完成的

> B：看过部分JQ源码

> C：自己封装过一些组件和插件，例如：选项卡、轮播图、模态框、拖拽...（项目中常用的插件）

> D：VUE/REACT都是基于面向对象开发的，用的时候都是创建这些类的实例

> ...

三、THIS

> 归纳汇总

1. THIS的几种情况（六种 =>JS严格模式 =>括号表达式）

2. 能够动态把控THIS，让其变为我们想要的(例如：基于CALL/BIND改变THIS、基于箭头函数用它上下文中的THIS、设置_THIS代替THIS...)

3. 重点关注一下面向对象中的THIS，尤其是自己封装组件的时候

4. JQ应用中的THIS(EACH等方法中的THIS是当前遍历的那一项...)

5. 借用内置类原型上的方法，实现通过改变THIS操作其它类的实例（例如：[].slice.call(arguments)...）

四、同步异步编程

1. 运行机制及哪些是异步的（定时器、事件绑定、AJAX、回调函数）

2. 回调函数（自己封装过EACH、组件封装的时候基于回调函数创建钩子生命周期函数，在每一个阶段可以做不同的事情...）

3. 基于Promise设计模式可以管控异步编程（最重要的）

> Promise的基础使用

> Promise的原理

> 项目中会使用Promise：async await、发送ajax请求、一些异步操作、基于promise的一些插件...

五、AJAX

六、事件兼容、事件池及发布订阅

> 最好就是多做案例

1. 事件对象

目的：给当前元素的某个事件绑定方法（不管是基于Dom0还是Dom2）都是为了触发元素的相关行为的时候，能做点事情（也就是把绑定的方法执行）不仅把方法执行了，而且浏览器还给方法传递了一个实参信息值==>这个值就是事件对象

根据操作不同，事件对象又分为：

MouseEvent鼠标事件对象（鼠标操作的）

KeyboardEvent键盘事件对象（键盘操作的）

Event事件对象

...

事件对象中记录了很多的属性名和属性值，这些信息中包含了当前操作的基础信息，例如：鼠标点击位置的X/Y轴坐标，鼠标点击的是谁（事件源）等信息

【MouseEvent鼠标事件对象】

ev.target=>事件源（操作的是哪 个元素）

ev.clientX /ev.clientY :当前鼠标触发点距离当前窗口左上角的X/Y轴坐标

ev.pageX /ev.pageY 当前鼠标触发点距离BODY（第一屏）左上角的X/Y轴坐标

ev.preventDefault( ):阻止默认行为

ev.stopPropagation( )阻止事件的冒泡传播

ev.type 当前事件类型

【KeyboardEvent鼠键盘事件对象】

ev.code 当前按键 'KeyE'

ev.key 当前按键‘e’

ev.which(火狐) / ev.keyCode (IE)当前按键的键盘码 69（e）兼容问题

=>常用的键盘码

左 上 右 下：（37 38 39 40）

Backspace （8）

Enter （13）

Space （32）

Delete （46）

Shift （16）

Alt （18）

Ctrl （17）

F1-F12 （112-123）

0-9 数字键（48-57）

a-z 小写字母（65-90）

A-Z 大写字母（97-122）

box.click=function(ev){

在IE低版本浏览器中，浏览器执行绑定的方法，并没有把事件对象传递进来，此时ev==undefined 需要基于window.event来获取（由于是全局属性，鼠标每次操作都会把上一次操作的值替换掉）

if(! ev){

低版本中没有的属性，我们手动设置一下，按照自己有的先获取到值，然后赋值给和标准对应的新属性，（经过判断处理后，低版本中也有这些属性）后期再使用target/pageX/pageY的时候，直接按照高版本的使用即可

ev= window.event 事件对象

ev.target= ev.srcElement 事件源

ev.pageX 低版本浏览器的事件对象中不存在pageX/pageY

ev.pageX=ev.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft)

ev.pageY=ev.clientY+(document.documentElement.scrollTop || document.body.scrollTop )

ev.which=evkeyCode

preventDefault && stopPropagation 低版本下都没有

ev.preventDefault=function(){

ev.returnValue=false 低版本阻止默认行为

` }

ev.stopPropagation=function(){

ev.cancelBubble=true 低版本事件冒泡

}

}

直接按照高版本的规则来使用即可

console.log(ev.target)

}

事件默认行为：事件本身就是天生就有的，某些事件触发，即使你没有绑定方法，也会存在一些效果，这些默认效果就是事件的默认行为

A标签点击操作就存在默认行为

1.页面跳转

target="_blank"

2.锚点定位（HASH定位【哈希定位】）

href="#box" 首先会在当前页面URL地址栏末尾设置一个HASH值，浏览器检测到HASH值后，会默认定位到当前页面中ID和HASH相同的盒子的位置（基于HASH值我们还可以实现SPA单页面应用）

input标签也有自己的默认行为

1.输入内容可以呈现到文体框中

2.输入内容的时候会把之前输入的一些信息呈现出来 （并不是所有浏览器和所有情况下都有）

1.点击按钮页面会刷新

* <form action="www.zhufengpeixun.cn/">

<input type="submit" value="提交">

</form>

在FORM中设置ACTION，点击SUBMIT，会默认按照ACTION指定的地址进行页面跳转，并且把表单中的信息传递过去（非前后端分离项目中，由服务器进行页面渲染，由其它语言实现数据交互，一般都是这样处理）

2. DOM0/DOM2事件绑定（重点是机制和区别）

[DOM0事件绑定]

[element].onxxx=function( ev){

//=> 定义一个形参Ev用来接收方法执行的时候，浏览器传递的信息值（事件对象）

}

[DOM2事件绑定]

[element].addEventListener('xxx',function( ){ },false)

[element].attachEvent('xxx',function( ){ }) [IE6-8]

事件的传播机制

冒泡传播：触发当前元素的某一个事件（点击事件）行为，不仅当前元素事件行为触发，而且其祖先元素的相关事件行为也会依次被触发，这种机制就是“事件的冒泡传播机制”

xxx.onxxx=function(){} DOM0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的

xxx.addEventListener('xxx',function(){},false) 第三个参数FALSE也是控制绑定的方法在事件传播的冒泡阶段(或者目标阶段)执行；只有第三个参数为TRUE才代表让当前方法在事件传播的捕获阶段触发执行（这种捕获阶段执行没啥实际意义，项目中不用）；

* 不同浏览器对于最外层祖先元素的定义是不一样的

* 谷歌：window->document->html->body...

* IE高：window->html->body...

* IE低：html->body...

关于事件对象的一些理解

* 1.事件对象是用来存储当前本次操作的相关信息，和操作有关，和元素无必然关联

* 2.当我们基于鼠标或者键盘等操作的时候，浏览器会把本次操作的信息存储起来（标准浏览器存储到默认的内存中（自己找不到），IE低版本存储到window.event中了），存储的值是一个对象（堆内存）；操作肯定会触发元素的某个行为，也就会把绑定的方法执行，此时标准浏览器会把之前存储的对象（准确来说是堆内存地址）当做实参传递给每一个执行的方法，所以操作一次，即使再多方法中都有EV，但是存储的值都是一个（本次操作信息的对象而已）

3. 事件委托

4. 发布订阅（机制和实战应用）

5. PC端和移动端事件区别

6. 各种案例的实现思路（例如：鼠标跟随、折叠菜单、左侧导航菜单、拖拽等）

七、ES6（非常重要）

> 归纳汇总，重点是多看一些面试题，基于ES6把这些东西解决（例如：两个数交换位置、求数组中的最大值和最小值、数组去重...）

> 知识点虽然小，但是期望大家汇总一下，咱们之前项目中哪些用到这些内容了（例如：哪些地方用到三个点了...）

1. let/const

2. 结构赋值

3. 拓展（剩余、展开）运算符

4. 箭头函数

5. class

6. promise

7. Set/Map

8. 一些新增加的属性和方法，例如：Array\String\Object...

9. for of 迭代

...

八、常用算法

1. 递归

2. 去重

3. 排序：冒泡、快速、插入

...

九、正则

> 上网搜正则面试题、把咱们联系的案例掌握了

1. 常用元字符

2. 常用正则表达式

3. 正则捕获(replace)

4. 正则应用（表单验证\字符串需求处理...）

十、关于DOM的操作

1. 常用的属性方法（增删改查）

2. 操作样式（盒子模型那一套包括在内）

3. DOM的回流重绘（数据绑定 =>文档碎片和模板字符串）

十一、性能优化（非常重要的）

VUE

REACT

NODE

GIT

WEBPACK

小程序（公众号开发）

CANVAS