写在前面：

这篇文章是我在学习《javascript高级程序设计（第三版）》时随书所做的笔记，由于使用word记录的笔记，转到markdown编辑器里有点吃力，所以文章排版可能会有点问题。感兴趣的朋友可以去github看看我的项目，这篇文章的word文档也在项目文件夹里放着。如果这个项目对你产生了帮助，记得帮我点个小星星呀~
另外，这篇文章更适合有基础的同学当作知识清单使用，可以帮助你回顾知识，大家可以去下载word文档并且打印出来，帮助自己回顾复习，梳理脉络，让我们一起努力学习前端吧！

JavaScript实现：

(1) 核心（ECMAScript）：提供核心语言标准
(2) 文档对象模型（DOM）：提供访问和操作网页内容的方法和接口
(3) 浏览器对象模型（BOM）：提供与浏览器交互的方法和接口

Function类型：

函数实际上是对象，每个函数都是Function类型的实例。除了通过function关键字定义以外，也可以使用new Function()的方式定义，但该方式需要多次解析代码，效率较低。
函数名仅仅是指向函数对象的指针。
函数对象有一个属性caller，保存了调用当该函数的函数的引用。还有一个对象属性prototype是保存他们实例方法的真正所在，该属性不可枚举，主要用于定义自定义引用类型和实现继承。
函数内部有两个特殊属性：arguments（保存参数）和this。arguments有个一叫做callee的属性，是一个指向拥有该arguments对象的函数的指针。
函数不能重载，但可通过特殊方法简单实现类似重载的效果，例如使用arguments对象或“…”操作符。
函数只是在特定环境下执行代码的对象，因此函数的作用域是可以改变的，通过apply()和call()可以改变函数内部this指针的指向，从而设置函数执行时的作用域。还可以用bind()方法。
函数本身可以作为参数传递给另一个函数，也可以在一个函数中返回另一个函数。

函数表达式：

函数表达式不同于函数声明，函数声明要有函数名，但函数表达式不需要，没有名字的函数表达式交叫做匿名函数（拉姆达函数）。解析器会优先读取函数声明，即函数声明提升，故执行语句可以放至声明语句之前，而函数表达式则不行。
递归：递归函数影应始终使用arguments.callee来递归地调用自身，不要使用函数名——函数名可能会发生变化。在无法确定如何引用函数的情况下，递归就会变得比较复杂。
闭包：指的是（有权访问另一个函数作用域中的变量的）函数。当在函数内部定义了其他函数时，就创建了闭包。
(1) 在后台的执行环境中，闭包的作用域链包含着自己的作用域、包含函数的作用域、和全局作用域。
(2) 通常函数的作用域会在函数执行完毕时销毁，但是当一个函数返回一个闭包时，这个函数的作用域将会一直存在到闭包不再存在为止。使用闭包可以在js中模仿块级作用域（js本身没有块级作用域的概念）。
(3) 创建并立即调用一个函数，既可以执行其中的代码，又不会在内存中留下对该函数的引用。但是结果就是函数总所有变量会被立即销毁——除非将某些变量赋值给了包含作用域（即外部作用域）中的变量。
(4) 闭包还可用于对象中创建私有变量，即便JavaScript中没有正式的私有变量的概念，但是可以使用闭包来实现公有方法，而通过公有方法可以访问在包含作用域中定义的变量。有权访问私有变量的公有方法叫做特权方法。
(5) 使用构造函数模式，原型模式来实现自定义类型的特权方法，也可以用模块模式，增强的模块模式来实现单例的特权方法。
(6) 每个函数都是闭包，只不过我们常说的闭包是在一个函数中返回另一个函数的这种情况。闭包可能会造成内存泄露（内存无法回收），要格外注意。
块级作用域：可以用匿名函数模拟。（function(){ /代码区域/ })()，给匿名函数声明套上括号再跟一对括号。相当于定义匿名函数后立即调用。这种方式可以减少闭包占用的内存问题，因为没有指向匿名函数的引用，所以只要函数执行完毕就可以立即销毁其作用域链了。
私有变量：函数参数、局部变量、函数内部定义的函数。

引用类型：

1. 属性：

Object.getOwnPropertyDescriptor(obj,name)可以取得给定属性的描述符，返回值是一个对象，具有configurable，enumberable属性，若是数据属性还具有writerable、value，若是访问器属性则具还有get，set属性。另外，这些属性的可以自行修改，使用方法Object.defineProperty(obj,name,{})。任何对象都适用。

2. 创建对象：

(1) 工厂模式：使用简单函数创建对象，为对象添加属性和方法，然后返回对象。该方法没有解决对象识别问题，后被构造函数模式代替。
(2) 构造函数模式：可以创建自定义引用类型，可以像创建内置对象实例一样使用new操作符。特点：没有显式创建对象，直接将属性和方法赋值给this对象，没有return语句。问题：成员无法复用，包括属性和方法。由于函数不局限于对象，不局限于执行环境，所以没有理由不复用。
(3) 原型模式：向构造函数的原型对象(prototype)中添加属性，使得创建的实例之间共享这些属性。
问题：
a. 如果原型对象中包含引用类型属性，例如Array类型，会导致所有实例共享修改这一属性。
b. 在创建实例后修改原型对象，会切断现有实例和新原型之间的联系。
(4) 组合模式：使用构造函数模式和原型模式。前者用于定义实例属性，后者用于定义方法和共享属性。
① 优点：最大限度的节省了内存。
② 缺点：构造函数和原型分开编写，没有整体的感觉，可能会给编程人员带来困惑。
(5) 动态原型模式：将组合模式中的的两部分代码封装到一起。对于需要创建的方法进行判断，若不存在则创建，否则什么也不干（原型部分只会在初次调用构造函数时创建，且不能使用对象字面量方式定义，会切断已创建实例与原型之间的联系）。
(6) 寄生构造函数模式：通过构造函数末尾添加return语句，重写调用构造函数时的默认返回值。特殊情况下（如创建一个有额外方法的特殊数组，因为不能直接修改Array构造函数）使用。
缺点：返回对象与构造函数或其原型属性没有关系，与在构造函数外部直接创建对象等价，本质上是工厂模式的一个变形。
(7) 稳妥构造函数模式：模式基本与寄生模式先相同，但不用new，也不用this。返回一个稳妥的对象。特点：安全性高，类似于c++中的类，可以包含私有属性。该方法创建的对象和寄生构造函数模式一样，与构造函数之间没有什么关系，是工厂模式的变形。

3. 继承

构造函数与函数原型的关系：构造函数Person（对象）有个属性prototype（指针）指向原型对象。 Person.prototype（原型对象，实质也是对象）他有个属性constructor（指针），又指向 Person函数对象。constructor属性指向创建此对象的构造函数的引用
原型链继承：原型对象等于另一个类型的实例，进而构成原型链。是javascript的主要继承手段。问题：包含引用类型的原型会导致共享修改。创建子类时不太容易向父类传递参数（使用借用构造函数的方式）。故一般不会单独使用。
借用构造函数继承：函数只是在特定环境下执行代码的对象，因此通过使用apply()，call()方法，可以在新创建的对象上执行构造函数并传递相应参数。但是由于使用了构造函数，无法避免构造函数模式下的一些问题——方法都在构造函数中定义无法复用。因此该方法一般不单独使用。
组合继承：将原型链方式和借用构造函数方式的继承思想结合，原型链继承公共属性和方法，借用构造函数继承实例属性。问题：无论什么情况下，总会调用两次父类的构造函数，一次是创建子类原型时，一次是在子类构造函数内部。解决办法——寄生组合式继承。
原型式继承：Object.create(父类，属性值)或object(父类)。将返回一个将父类作为原型的对象。本质上是对给定对象的浅复制，用于只想让一个对象和另一个对象保持类似，不必兴师动众的创建构造函数时。注意包含引用类型的值属性始终共享。
寄生式继承：创建一个仅用于封装继承过程的函数，函数内部克隆对象，增强并返回该对象（object和create函数不是必须的）。基本思路类似于寄生构造函数与工厂模式。缺点也类似，由于不能复用函数而降低效率等。
a. 调用函数复制父类原型创建一个新对象（利用Object.create()或object()）。
b. 通过某些步骤增强该对象，例如添加方法。
c. 返回创建的新对象。
寄生组合式继承：通过借用构造函数继承属性，通过原型链混成形式来继承方法。本质上是使用寄生式继承父类的原型来继承属性（替代了之前在子类型里调用父类构造函数的过程，我们所需的不过是父类原型的一个副本而已），然后再将结果指定给子类原型。
a. 复制父类原型。
b. 添加因重写原型失去的constructor属性。
c. 将复制的原型赋值给子类原型。
其高效性体现在只调用了一次父类的构造函数，避免了在子类原型中创建不必要的多余的属性。与此同时原型链也不变。可以利用instanceof和isPrototypeOf()确定类型。开发人员普遍认为该方式是引用类型最理想的继承范式。

4. BOM

浏览器对象模型（BOM）以window对象为依托，表示浏览器窗口以及页面可见区域。同时，window对象还是ECMAScript中的Global对象，因而所有全局对象都是他的属性，所有原生构造函数以及其他函数也都存在于他的命名空间下。

使用框架时，每个框架有自己的window对象以及所有原生构造函数和其他函数的副本。每个框架都保存再frames的集合中，可以通过位置或者名称来访问到。
有一些窗口指针可以用来引用其他框架，包括父框架。
top对象始终指向最外围的框架，也就是整个浏览器窗口。
parent对象表示包含当前框架的框架，即父框架，而self对象则指向window。
使用location对象可以通过便程的方式来访问浏览器中的导航系统。设置相应的属性，可以逐段或者整体性地修改浏览器的URL。
调用页面的replace()方法可以导航到一个新的URL，同时该URL会替换浏览器历史记录中当前显示的页面。
navigator对象提供了与浏览器相关的信息。到底提供哪些信息，很大程度上取决于用户的浏览器；不过，也有一些公共的属性例如userAgent存在于所有浏览器中。

BOM中还有两个对象：screen和history，但他们的功能有限。screen对象中包含着与客户端显示器有关的信息，这些信息一般只用于站点分析。history对象为访问浏览器历史记录开了一个缝隙，开发人员可以据此判断历史纪录的数量，也可以在历史中向后或者向前导航到任意界面。

5. DOM

DOM用于访问和操作HTML和XML文档。DOM1级将HTML和XML文档视作节点树，可以使用js操作，改变其外观和结构。DOM由各种节点构成。

最基本的节点类型是Node，用于抽象表示文档中一个独立的部分；所有其他类型都继承自Node。
Document类型表示整个文档，是一组分层节点的根节点。再JavaScript中，document对象是Document类型的一个实例。使用document对象可以查找并获取节点。
Element类型节点表示文档中所有HTML和XML元素，可以用来操作这些元素的内容和特性。
还有一些节点类型，Text，Comment，Attr,DocumentType，CDATASection，DocumentFragment等
理解DOM的关键在于理解DOM对性能的影响。DOM操作往往是JavaScript中开销最大的部分，而因访问NodeList导致的问题最多。NodeList对象都是“动态的”，这意味着每次访问都会运行一次查询。有鉴于此，最好的办法是尽量减少DOM操作。

6. 事件（注意点）

有必要限制页面中事件处理程序的数量，数量太多会导致占用大量内存，降低性能。
可以使用建立在事件冒泡机制上的事件委托技术，可以有效减少事件处理程序的数量。
建议在浏览器卸载页面之前移除页面中所有的事件处理程序，防止内存泄漏。

7. JSON

EMCAScript5定义了原生的JSON对象，可以用来将对象序列化为JSON字符串（JSON.stringify()方法）或者将JSON数据解析为JavaScript对象（JOSN.parse()方法）。

1.JSON.stringify()方法

a) 接受三个参数，第一个参数是相应的JavaScript对象，必须。其他两个非必须。
b) 第二个参数用来过滤结果，可以是数组，或函数。若是数组则过滤后的结果只包含数组中列出的属性，若是函数则会执行更精确的操作。函数接受两个参数（key，value），并返回过滤结果
c) 第三个参控制缩进，若是数字则是空格缩进，数字代表空格数量，最大为10。若是字符串，则会用字符串作为缩进，最大长度也为10，多余会截取
d) toJSON()方法可以作为函数过滤器的补充。可以为任何对象添加toJSON()方法，返回其自身的JSON数据格式
stringify()方法执行过程：

若存在toJSON()方法，，而且能通过它取得有效的值，则调用该方法。否则返回对象本身。
如果提供了第二个参数，应用这个过滤器，传入的值是第一步返回的值
对第二部返回的值进行相应的序列化。
如果提供了第三个参数，执行相应的格式化。

2. JSON.parse()方法

可接受两个参数，第一个是JSON字符串，必须。另一个是还原函数，可选。
在将JSON字符串中的日期对象转换为Date对象时，经常需要用到还原函数，参数（key, value），类似于过滤函数，也需要返回值。

8. 表单脚本

1. 表单基础操作：submit事件，change事件，focus事件等。

2. 文本框脚本：

选择文本——包括select事件。
1. 取得选择的文本——selectionStart，seletionEnd等。
2. 选取部分文本——setSelectionRange()，利用DOM范围。
过滤输入——不同浏览器对剪切板对象的访问具有不同限制。如chrome只允许在发生相关的剪切板事件的时候才允许访问剪切板对象。
1. 屏蔽字符——利用keypress事件检测按键，屏蔽掉不合法的输入字符。
2. 剪切板事件——ocopy，beforecopy，paste，beforepaste等，利用event.clipboardData对象访问数据，主要方法：
1. getData(取得数据的格式，text或者text/plain)
2. setData(格式，值)
3. clearData()。
自动切换焦点——如电话号码，身份证号，生日等，可以由多个输入框控制输入，当一个输入框达到最大字符限制的时候，自动将焦点切换至下个输入框。
HTML5约束验证API
1. 必填字段——require
2. 其他输入类型——url，email
3. 数值范围——number，range，datetime，datetime-local，date，month，week，time，min，max，step等
4. 输入模式——pattern属性，值为正则表达式，用来验证输入内容
5. 检测有效性——必填字段无值或与pattern属性不匹配都视为无效。使用checkValidity()检测，可于表单整体检测，也可于某一个表单元素上检测。还有一个更精细的检测，使用validity属性。
6. 禁用验证——通过设置表单的novalidate属性，可以告诉表单不进行验证。如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性。

3. 选择框脚本：选择框基本元素——<select>、<option>。

相关属性和方法：add(newOption, relOPtion)，multiple，options，selectedIndex，size。相关事件——change事件，选择后立即触发。
相关属性：index，label，seleted，text，value。推荐使用这些属性操作选项，不推荐使DOM方法，因为不同浏览器存在略微差异。
选择选项——将option的seleted属性设置为true即可。（设置为false不会取消选择）
添加选项
1. 原生DOM方法——createElement()+appendChild()
2. 使用option构造函数，new Option(text, value)+appendChild()
3. 使用<select>的add方法。
移除选项
① DOM的removeChild()方法
② 选项框调用remove()方法
③ 相应选项设置为null
移动和重排选项——appendChild()传入已有元素会删除原元素并添加到指定为位置，类似的还有insertBefore()

4. 表单序列化要点：

对表单字段名称和值进行URL编码，使用“&”分隔
不发送禁用的表单字段
直达送勾选的复选框和单选按钮
不发送type为“reset”和“button”的按钮
多选框中每个选中的值单独一个条目
单击按钮提交表单，也会发送提交按钮；否则不发送提交按钮。也包括type为image的input元素。
<select>元素的值就是选中的<option>元素的value值。若<option>元素没有value，则是其文本值

5.富文本编辑——设置document.designMode = “on”

使用contenteditable属性——true，false，inherit。默认值要直接添加上去即可，无需设置值
操作富文本
- document.execCommand(命令，false，值(null))，执行操作
- document.queryCommandEnabled(命令)，检测是否可对当前文本，或当前插入字符所在位置执行某个命令
- document.queryCommandState(命令)，检测是否已经将命令应用到了指定文本
- document.queryCommandValue(命令)，取得执行命令时传入的值，即为execCommand的第三个参数
富文本选区——使用框架的getSelection()方法，返回一个表示当前选择文本的Selection对象。常用方法toString()返回选取所包含的文本内容。要取得富文本编辑器中的文本，首先要创建一个文本范围
表单与富文本：通常可以添加一个隐藏表单字段让他的值等于从框架中提取出的HTML。具体就是在提交表单之前，从框架中提取出HTML插入到隐藏字段中

9. DOM2和DOM3

1. DOM变化——具体看书

2. 样式

访问元素样式
1. 每一个支持样式的实例都有一个style属性，这个属性是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，即行内CSS代码。但不包含外部样式与嵌入样式层叠而来的样式信息。
2. 通过style属性指定样式信息需要将短横线写法转换为驼峰写法（只有float属性例外，属于保留字，需用cssFloat访问）。
3. style对象包含一些属性和方法，其中较为常用的是
- cssText：该属性可以访问到CSS代码，若修改则会重写该元素的CSS
- parentRule：表示CSS信息所属的CSSRule对象
- removeProperty(propertyName)：从样式中删除指定属性，在不清楚某个给定的CSS属性拥有什么默认值的情况下，可以移除，之后就会自动应用默认值。
- length和item()配合使用，可以迭代CSS属性
- insertRule(CSSRule, index)和deleteRule(index)：IE不支持。
1. 计算元素样式——getComputedStyle(元素，伪元素)，第二个参数一般不需要，设置null即可。IE中有currentStyle属性同理。计算样式全部是只读的。
2. 操作样式表
  1. 应用于文档中的所有样式表是通过document.styleSheets集合来表示的，通过方括号或者item()方法可以访问这些对象，这些对象继承自StyeSheet对象，继承了一些常用方法。
    - disabled：唯一可写的属性，设置为true禁用样式表
    - href：若是通过link包含的样式表，则返回其URL，否则为null
    - cssRules：样式表中包含样式规则的集合，其中包含了CSSRule对象。
  2. CSSRule对象（CSS规则）：如：div{ color: green; background-color: white } 即为一个CSSRule对象，即为一条规则。最常用的属性有三个：
    - cssText属性：返回整条样式规则的文本，是只读的。注意与style.cssText的区分。
    - style属性：即为上面提到的style属性，是一个CSSStyleDeclaretion对象的实例。
    - selectorText：返回当前规则的选择符文本。
  3. 大多数情况下，仅使用style属性便可以完成需求。
    - 创建规则——使用insertRule(CSSRule, index)插入规则即可，IE中使用addRule(selectorText, cssText, position)
    - 删除规则——deleteRule(index)，IE中使用removeRule(index)。
3. 元素大小确定
  1. 偏移量：元素在屏幕上占用的所有可见空间
    - offsetHeight：元素垂直方向上占用的空间大小，包括滚动条、边框高度
    - offsetWidth：元素水平方向上占用的空间大小，包括滚动条、边框宽度
    - offsetLeft：元素左边框距离父元素的距离
    - offsetTop：元素顶部距离父元素的距离
    - 包含元素的引用保存在offsetParent中
  2. 客户区大小：元素内部空间大小
    - clientWidth：元素内容区宽度 + 左右内边距宽度
    - clientHeight：元素内容区高度 + 上下内边距高度
  3. 滚动大小：包含滚动内容的元素的大小
    - scrollHeight：没有滚动条时，元素内容的总高度
    - scrollWidth：没有滚动条时，元素内同的总宽度
    - scrollLeft：由于滚动被隐藏的左侧内容宽度，设置值可以改变滚动位置
    - scrollTop：由于滚动被隐藏的上方内容高度，设置值可以改变滚动位置
    - getBoundingClientRect()方法返回一个矩形对象，包含四个值：left、top、right、bottom，表示出了元素在页面中相对于视口的位置。但是浏览器之间存在少许差别。

3. 遍历元素节点——NodeIterator和TreeWalker，深度优先的遍历。

a) NodeIterator：一个简单接口，只允许以一个节点的步幅前后移动
i. 通过document.createNodeIterator(rootNode, whatToShow, filter, false)创建遍历对象
ii. wahtToShow：表示节点类型代码，表示要显示那些节点
iii. filter：过滤器

可以指定一个自定义的NodeFilter对象，该对象只需要包含一个acceptNode()方法，该方法返回NodeFilter.FILTER_ACCEPT表示接受，NodeFilter.FILTER_SKIP表示拒绝。NodeFilter是一个抽象的类型，不能直接创建实例
可以直接编写一个过滤函数，实现与acceptNode()类似的功能
不指定过滤器则传入null
iv. iterator.nextNode()与iterator.previousNode()控制遍历的前进和后退。
b) TreeWalker
i. 通过document.createTreeWalker(rootNode, whatToShow, filter, false)创建遍历对象
ii. filter：TreeWalker过滤器返回值在NodeIterator基础上增加了NodeFilter.FILTER_REJECT，跳过相应节点及其整个子节点树。
iii. iterator.nextNode()与iterator.previousNode()控制遍历的前进和后退。除此之外还有更灵活的遍历跳转方法：
parentNode()：遍历到当前节点的父节点
first/lastChild()：遍历到当前节点的第一/最后一个节点
next/previousSibling()：遍历到当前节点的下一/上一个同辈节点
iv. currentNode属性：可以通过设置该值，修改遍历继续行进的起点。很好用的属性，大大增加了遍历的灵活性。

4. DOM范围

a) 相关属性：
i. startContainer：范围起点的父节点
ii. startOffset：起点节点在父节点childNodes集合中的索引
iii. endContainer：范围终点的父节点
iv. endOffset：终点节点在父节点childNodes集合中的索引
v. commonAncestorContainer：startContainer和endContainer最近的共同父节点
b) 创建范围：var range = document.createRange()
c) 利用范围实现简单选择：range.selectNode(node)、range.selectNodeContents(node)。区别在于前者选择整个节点，后者选择节点的子节点。
d) 更精确的设置范围
i. setStartBefore/After(refNode)：将范围起点设置在refNode之前/后
ii. setEndBefore/After(refNode)：将范围终点设置在refNode之前/后
e) 更复杂的范围控制，这两个函数都接受两个参数，一个参照节点和一个偏移量值
i. setStart()：参照节点  startContainer、偏移量  startOffset
ii. setEnd()：参照节点  endContainer、偏移量  endOffset
iii. 可以使用户这两个方法来模拟前面的简单选择方法，但这并不是主要用途，这两个方法更胜一筹的地方在于可以选择结点的一部分，选择之后便可操作选区。
f) 操作DOM范围中的内容：
i. 创建范围时，内部会为这个范围创建一个文档片段（DocumentFragment），范围内所属节点全部被添加至这个文档片段中。
ii. 范围知道自己缺少了那些开标签和闭标签，他能够重新构建有效的DOM结构以便我们对其进行操作。使用范围选区可以在删除文档中某些部分的同时，保持文档结构格式良好。
iii. 表示范围的内部文档片段中的所有节点，都只是指向文档中相应节点的指针。
iv. 一些常用方法：

deleteContents()/extractContents()：从文档中移除范围选区，但是后者可以返回范围的文档片段，利用这个返回的值可以将其插入至文档其他地方。
cloneContents()：创建一个范围对象的副本。返回的文档片段包含的是范围节点的副本，而不是实际节点。
g) 插入DOM范围中的内容
i. InsertNode(node)：向范围起点处插入一个节点
ii. surroundContents(node)：环绕范围插入内容。常用于突显网页中某些词句。具体原理如下：
提取出范围内的内容，类似于执行extractContents()
将指定的节点插入到文档中原来的范围所在位置上
将文档片段中的内容添加到给定节点中
h) 折叠DOM范围
range.collapse(true)：传入true折叠至范围起点，传入false折叠至范围终点
range.collapsed属性：检测某个范围是否处于折叠状态，可以利用该属性测试范围中两个节点是否紧密相连。
i) 比较DOM范围——range1.compareBoundaryPoints(Range.START_TO_START, range2)
第一个参数值为要比较的方式的常量值，第二个参数是要比较的另一个范围
第一个参数值可根据字面意思理解，还有START_TO_END、END_TO_START、END_TO_END
若相等返回0，第一个节点位于之前返回-1，位于之后返回1
j) 复制DOM范围——range.cloneRange()，创建并返回一个副本。
k) 清理DOM范围——建议使用完范围之后清理掉范围释放内存。一旦分离范围，就不能再恢复使用了
调用range.detach()方法，从创建范围的文档中分理出该范围
设置range = null，从而触发垃圾回收机制，释放内存
l) IE中也有范围，具体内容看书

10. HTML5脚本编程

(1) 跨文档消息传递：

① 核心——postMessage(“消息内容”, “限制接收方域名的字符串”)。第一个参数最好还是只传入字符串，并非所有浏览器都支持。若第二个参数为”*”，则不做域名限制（不推荐）。
② 接收：接收到消息之后会触发window对象的message事件。该事件异步触发，其event对象包含三个属性

data：postMessage()的第一个参数
origin：发送消息的文档所在的域
source：发送消息的文档的window对象的代理。主要用于在发送上一条消息的窗口中调用postMessage()方法。若发送消息的窗口来自同一个域，那么这个对象计师window

(2) 原生拖放

① 拖放事件：这个是父元素

dragstart
drag
dragend
② 当某个元素被拖到有效的放置窗口时，会触发下列事件：这个是子元素
dragenter：进入目标范围时触发
dragvoer：拖动元素在目标范围内会持续触发该事件
dragleave或drop：拖出目标触发dragleave事件，成功放入目标触发drop事件
③ 自定义放置的目标：拖动元素经过无效放置目标时，光标会变成禁止图案。若拖动元素经过不能放置的元素则不可能触发drop事件。但是可以通过重写dragenter和dragover事件的默认行为来将任何元素设置为有效的放置元素。在ondragover中一定要执行 preventDefault()，否则ondrop事件不会被触发。

(3) dataTransfer对象

① 两个主要方法：getData(数据格式)和setData(数据格式, 值)，数据格式通常为”Text”，且dataTransfer对象中保存的数据只能在ondrop处理过程中读取
② 在拖动文本，链接或者图像时，浏览器会自动调用setData()方法将拖动的文本，链接，图像等以text格式保存到dataTransfer对象中，可以通过getData()读取到。也可以自己定义数据
③ dropEffect与effectAllowed——设置元素允许的拖动方式

dropEffect：该属性可以知道被拖动的元素能够执行那种放置行为
effectAllowed：表示允许元素以哪种dropEffect拖动
dropEffect属性搭配effectAllowed属性使用。
在被移动元素的dragstart事件处理程序中设置effectAllowed属性，在dragenter事件处理程序中设置dropEffect属性。dropEffect 的每个可能值都会导致光标显示为不同的符号。

(4) 可拖动性：默认情况加添加draggable = “false”即可让元素可以拖动

(5) 其他成员方法：

① addElement(element)：为拖动操作添加一个元素
② clearData(format)：清除以特定格式保存的数据
③ setDragImage(element, x, y)：拖动时在光标下方指定一幅图像，该方法较常用
④ types：当前保存的数据类型，是一个类似数组的集合

(6) 媒体元素——<video>，<audio>

① 属性：包括一套完善的js接口，例如总时长，当前播放时长等属性
② 事件：如暂停，开始播放，播放时间变化等事件
③ 自定义播放器：利用play()，pause()等方法，配合媒体元素的属性和事件来控制
④ Audio类型：new Audio(src)，即可新建音频元素

(7) 历史状态管理

现代web页面每次操作不一定会打开全新页面，导致前进和后退事件失去了作用，HTML5弥补了这一缺陷，完善了history对象。

① history.pushState(状态对象, null, 相对地址)：执行该方法后，新的状态信息将被加入历史信息状态栈，第二个参数暂时没有浏览器实现，可以忽略，传入null即可。
② popstate事件：在此之后，前进后退按钮可用，会触发该事件，事件对象event包含state属性，值为pushState()方法的第一个参数。注意单机后退按钮返回浏览器的第一个按钮时，event.state为null。
③ history.replace(状态对象, null)：该方法不会在历史状态栈中新建状态，只会重写当前状态。

11. Ajax与Comet

(1) XMLHttpRequest对象

调用open(“get/post”, 请求内容, 是否异步)：启动一个请求以备发送，并不会真正发送
调用setRequesHeader()：可选，设置自定义请求头。该方法必须在open之后send之前调用。
调用send(data)：如不需要发送值，必须传入null，调用send()之后，请求被发送出去，在收到响应后，响应的数据会自动填充XHR对象相应的属性
1. responseText：作为相应主体被返回的额文本
2. status：响应的HTTP状态，一般可以将200作为成功值。状态为成功时即可访问响应数据ready
3. statusText：HTTP状态的说明
4. readyState：表示请求/响应过程的当前活动阶段。一般用于异步时判断状态。一般只关注readyState == 4时的情况，因为此时所有数据已经准备就绪。记得在open调用之前设置onreadystatechange事件以确保浏览器兼容性。
调用abort()可以结束ajax请求，终止ajax请求后，应对XHR对象解引用
调用getResponseHeader()方法，并传入头部字段名称，可获得响应头部信息
调用getAllResopnseHeaders()方法，可以获得一个包含所有头部信息的长字符串

(2) GET请求：

常用于向服务器查询某些信息，必要时可将查询字符串参数追加值URL的末尾，以便将信息发送给服务器。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码。

(3) POST请求：

使用频率仅次于GET，通常用于向服务器发送应该被保存的数据。post将数据作为请求的主题发送，即send(data)。

(4) XMLHttpRequest 2级

FormData：为序列化表单以及创建与表单格式相同的数据提供了便利。
创建FormData：var data = new FormData()，另外如果向构造函数中传入表单元素，也可以用表单元素的数据预先向起哄填入键值对，如new FormData(document.forms[0])
增加数据：使用data.append(key, value)的形式
优点：使用FormData的好处在于不必明确的在XHR对象中设置请求头部，XHR对象能够自动识别传入的数据类型是FormData的实例，并自动设置请求头部。

(5) 超时设定——timeout事件

设置xhr.timeout数值，单位毫秒。
设置xhr.ontimeout事件处理程序。
最好是将相关代码写在open之后send之前。

(6) overrideMimeType()方法

重写XHR响应的MIME类型，如overrideMimeType(“text/html”)。由于返回对额MIME类型决定了浏览器如何处理他，所以提供一种方法重写MIME类型是很有必要的。仍然在send之前open之后

(7) 进度事件：

load事件：在接受完整响应数据时触发。由于浏览器接收到服务器响应就会触发该事件，所以需要检查status属性确认数据是否真的可用。
progress事件：在接收响应期间持续触发，其事件处理程序包含三个额外属性：lengthComputable、position、totalSize，分别表示进度信息是否可用、已接收字节数、根据Content-Length头部确定的预期字节数。为确保正常执行，该事件处理程序需要在open方法之前添加

(8) 跨域资源共享（CORS）：

默认情况下，XHR对象只能访问同源资源（协议、域名、端口完全相同）。CORS的思想是利用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应式是否应该成功。

IE实现——利用XDomainRequest对象，这个对象与XHR对象类似。
其他浏览器——XHR对象中闯入绝对URL即可，但跨域XHR有些限制：
1. 不能使用setRequestHeader()设置自定义头部
2. 不能发送和接收cookie
3. 使用getResponseHeaders()总会返回空字符串
4. 由于无论同源请求还是跨域请求都是使用的相同的接口，因此，在访问本地资源时最好使用相对URL，在访问远程资源时再使用绝对URL。这样做可以消除歧义，避免出现限制访问头部或本地cookie信息等问题。
其他跨域技术
1. 图像ping：与服务器进行简单单向跨域通信的一种方式，但只能发送get请求且不能访问响应文本。
2. JSONP：动态创建script元素，为src指定一个跨域URL，由于JSONP是有效的js代码，所以请求完成后将script元素添加至页面即可立即执行。具体过程如下：
  1. 客户端访问接口时传递一个本地函数名作为回调函数
  2. 接口获取参数得知回调函数名称，最后返回一段js字符串，调用本地函数，并将要返回的数据作为参数传入该回调函数
  3. 后端代码通过参数获取，字符串平凑等，返回一段类似于： callbcak({“name”:“Danny”})的js代码
  4. 客户端接收到之后构建script元素并插入文档中，相当于调用了该本地定义的回调函数，其参数即为收到的数据，如此便完成了跨域

(9) Comet——一种服务器向页面推送数据的技术，主要有两种实现方式，长轮询和HTTP流

长轮询指的是：页面发起一个请求到服务器，服务器一直保持连接打开，直到有数据可以发送，。发送完数据之后浏览器关闭连接，紧接着又发起一个新请求到服务器。这个过程在页面打开期间持续不断
轮询可以使用setTimeOut和XHR对象实现
HTTP流是指浏览器向服务器发送一个请求，服务器保持连接打开，然后周期性地向浏览器发送数据
HTTP流可通过监听页面的readystatechange事件并检测readyState值是否为3，就可以利用XHR对象实现HTTP流

(10) 服务器发送事件——SSE API：用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream

(11) Web-Sockets：是一种与服务器进项全双工、双向通信的信道。与其他方案不同的是，Web Sockets不使用HTTP协议，而是用一种自定义的协议。这种协议专门为快速传输小数据设计。虽然要求使用不同的web服务器，但却具有速度上的优势。

javascrpt知识要点梳理——知识清单相关推荐

天正多条线段长度lisp下载_预习丨人教版六年级数学（上册）全册知识要点梳理，可下载...
完整版电子版下载方法: 公众号底部对话框回复关键词:上册综合第一单元分数乘法 (一)分数乘法意义: 1.分数乘整数的意义与整数乘法的意义相同,就是求几个相同加数的和的简便运算. "分数乘整 ...
《机器学习思维导图》，一图掌握机器学习知识要点
来源:专知本文附长图,建议阅读5分钟一图掌握机器学习知识要点. mindmap of Machine Learning 基本上是总结李宏毅老师的ML课原图及相关资料见链接: https://gith ...
八年级上册计算机知识点总结,八年级数学上册知识要点归纳
八年级数学上册知识要点归纳八年级的学生数学成绩总是不理想,大部分是因为课本的知识概念没有弄明白,公式和定理没有掌握好.下面是百分网小编为大家整理的八年级数学知识总结,希望对大家有用! 八年级数学上册 ...
CentOs7下systemd管理知识要点
centOs7的一个巨大的变动就是用systemd取代了原来的System V init.systemd是一个完整的软件包,安装完成后有很多物理文件组成,大致分布为,配置文件位于/etc/system ...
送书福利 | 浙江大学陈华钧教授新作，全面梳理知识图谱技术体系
陈华钧著电子工业出版社-博文视点 2021-05-01 ISBN: 9787121406997 定价: 108.00 元新书推荐 ????今日福利 |关于本书| 知识图谱的发展历史源远流长,从经 ...
知识图谱最新论文清单，高阶炼丹师为你逐一解读
精选 6 篇来自 EMNLP 2018.ISWC 2018.NAACL 2018.ACL 2018 和 IJCAI 2018 的知识图谱相关工作,带你快速了解知识图谱领域最新研究进展. 本期内容选编自 ...
入门Java你需要了解的几个知识要点！
很多Java编程初学者在刚接触Java语言程序的时候,不知道该学习掌握哪些必要的基础知识.本文小千总结了入门Java你需要知道的几个基础知识要点,希望能够对刚入门的Java新手有帮助. 一.先了解什么 ...
计算机专业考试基础知识,计算机专业基础知识要点及考试考试.docx
计算机专业基础知识要点及考试考试 PAGE PAGE 27 数据结构要点第一章概论数据就是指能够被计算机识别.存储和加工处理的信息的载体.数据元素是数据的基本单位,可以由若干个数据项组成.数据项是 ...
javascript必须知道的知识要点（一）
该文章不详细叙述各知识要点的具体内容,仅把要点列出来,供大家学习的时候参照,或者检测自己是否熟练掌握了javascript,清楚各个部分的内容. 语句注释输出字面量变量数据类型 typeof ...

javascrpt知识要点梳理——知识清单