JavaScript高级程序设计 第4版（中文高清）扫描版

1. JavaScript组成

1. 核心ECMAScript
2. 文档对象模型DOM
3. 浏览器对象模型BOM

1.2.1 ECMAScript

定义语言的基础
规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象
js nodejs 都实现了ECMAScript

1.2.2 DOM

文档对象模型 Document Object Model

针对XML但经扩展用于HTML的应用程序编程接口(API)
把整个页面映射为多层节点结构，每个节点包含不同类型的数据。
借助DOM API，可删除，添加，替换，修改任何节点

1.2.2.2 DOM级别

DOM1：

1. DOM核心:如何映射文档结构，简化对文档任意部分的访问操作
2. DOM HTML

DOM2:

1. 鼠标和用户界面事件，范围，便利(迭代DOM文档的方法)
2. 对css的支持

DOM3:

1. 引入统一方式加载和保存文档
2. DOM验证

1.2.3 BOM

访问和操作浏览器窗口和子窗口frame,通常把任何特定于浏览器的扩展都归于BOM范畴。

• 弹出浏览器窗口的能力
  移动，缩放，关闭浏览器的能力
  navigator：提供浏览器的详尽信息
  location：提供浏览器加载页面的详尽信息
  screen：提供关于用户屏幕分辨率的详尽信息
  performance:提供浏览器内存占用，导航行为，时间统计的详尽信息
  cookies：
  XHLHttpRepuest ActiveXObject

2. HTML中的JavaScript

2.1

1. async 异步脚本 脚本不需等待其他脚本，不阻碍文档渲染，异步加载 立即下载脚本，但不妨碍页面其他操作 一定在load事件前执行
2. charset 代码字符集，浏览器不在乎它的值
3. crossorigin 配置相关请求的CORS设置。默认不适用CORS设置。corossorigin="anonymous"配置文件请求不必设置凭据标志。corossorigin="use-crednetials"设置凭据标志
4. defer 延迟脚本 脚本可延迟到文档完全解析和显示后执行。立即下载，延迟执行
5. integrity 允许对接收到的资源的签名与指定的加密签名验证资源完整性
6. src 文件路径url
7. type 语言内容类型MIME类型。这个值始终是“text/javascript"

不存在defer,saync属性，浏览器会按script在页面中的先后顺序依次解析，第一个解析完后，第二个才会被解析。

对不推迟执行的脚本，必须解释完位于js标签内的的全部代码，才能继续渲染页面

在解释外部js文件时，页面会被阻塞（阻塞时间包含文件下载时间）

可跨域取得相应资源，不受同源策略限制。

放在head中，必须等JavaScript都被下载，解析，执行完后才呈现页面

把脚本放在页面底部

2.1.4 动态加载脚本

let script =document.createElemnet('script'）
script.src='aa.js'
document.head.apendChild(script)

会严重影响性能

在XHTML中的用法

XHTML模式会在页面的MIME类型被指定为application/xhtml+xml时触发。

a < b中的 < 在XHTML中被当作新标签解析。但作为标签，< 后不能跟空格，
解决：

1. < 替换 <

2. 用CData片段包含JavaScript,包含不需要解析的任意个数的文本内容

2.3 文档模式

通过文档类型 doctype切换实现

主要体现在css渲染方面，但对js也会有一些副作用。

• 混杂模式 ：省略doctype声明 未发现文档类型声明，默认开启混杂模式，

• 标准模式
  开启标准模式：

• 标准准模式(处理图片间隙，表格中使用)

2.4 元素

js被禁用时出现

3. 语言基础

3.1 语法

区分大小写

标识符：

• 第一个字符必须是字母，下划线(_),美元符号（$)
• 剩余字符可以说字母，下划线，美元符，数字
• 按惯例使用驼峰式命名

注释

C语言风格

严格模式 strict mode

js不同解析和执行模式，ECMAScript3中的不确定行为得到处理，不安全的操作会抛出错误
整个脚本启用，顶部添加
“use strict”;
指定函数在严格模式下执行

语句

末尾；
语句块{}

关键字

break do instanceof typeof case else new var catch finally return void continue for switch while debugger* function this with default if throw
delete in try

保留字

abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native

3.3 变量

var

不初始化时，变量保存undefined
函数作用域，在函数退出时被销毁
函数内定义时省略var，可创建一个全局变量（不推荐，全局变量很难维护）
严格模式下不能定义eval,arguments的变量

声明提升，自动提升到函数作用域的顶部

let

块作用域
不允许出现冗余声明
不会在作用域中被提升
在全局作用域中生命的变量不会成为window对象的属性

• 条件声明：不确定前面是否声明过同名变量，可假定它还没声明。

不可能检查前面受否已经使用let声明过同名变量，不可能在没有声明的情况下声明它
不能使用let进行条件声明

只有图片非来自其他域，才可取得图像数据

canvas跨域问题解决方案

https://github.com/zhbhun/frontend-learning/blob/master/issues/canvs-image-cross-domain/ajax.html
https://segmentfault.com/a/1190000016423028

合成

WebGL

19. 表单脚本

19.1 表单基础知识

HTMLFormElement类型，继承自HTMLElement类型，拥有html元素的默认属性外，拥有自己的属性方法。

• acceptCharset:服务器能处理的字符集；accept-charset
• action:接受请求的url;action
• elements:表单中所有控件的集合
• enctype:请求编码类型；enctype
• length:表单中控件的数量
• method:要发送的http请求类型：get,post;methos
• name:表单的名字
• reset():将表单域重置为默认值
• submit():提交表单
• target:发送请求和接受响应的窗口的名称

取得元素的引用

1. document.getElementById(“form1”)
2. document.forms可取得页面所有表单，通过数字索引或名字name来取得特定的表单
   document.forms[0]
   document.forms[“form2”]

19.1.1 提交表单

提交表单的方式：

Sbumit

只要表单中存在上面任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可提交该表单。textarea例外，回车换行。没有提交按钮，回车不会换行。

这种方式提交表单时，浏览器会在请求发给服务器之前触发submit事件。这样可验证表单数据，并决定是否允许表单提交。
阻止这个事件的默认行为就可以取消表单提交。
一般来说，表单数据无效，不能发给服务器时，可使用。

let form =document.getElementById("myForm")
form.addEventListener("submit",(e)=>{
	//阻止表单提交
	e.preventDefault();
}

//使用编程方式调用sbumit()方法提交
form.submit()

调用submit()的形式提交表单时，不会触发submit()事件，

防重复提交：在第一次提交表单后就禁用提交按钮。利用onsbumit事件取消后续的表单提交操作。

19.1.2 重置表单

恢复到页面刚加载完毕时的初始值。

reset

点击重置按钮重置表单时，会触发reset事件。

调用reset()方法会像单击重置按钮一样触发reset事件

19.1.3 表单字段

表单元素可以像页面其他元素一样使用原生DOM访问。
elements属性：表单中所有元素的集合。是一个有序列表，包含这表单中的所有字段，可按位置和name特性来访问。

共有的表单字段属性

除，所有的表单字段都拥有相同的属性。

• disabled:禁用

• form:所属表单的指针

• name:

• readOnly:当前字段是否只读

• tabIndex:切换序号

• type:类型，checkbox,radio

• value:被提交给服务器的值

方法

focus()
将浏览器的焦点设置到表单字段了，激活表单字段，使其可以响应键盘事件。
autofocus

blur()

事件

blur：失去焦点是触发

change：input,textarea,在失去焦点且value值改变时触发；select，选项改变时触发

focus:获得焦点时触发

文本框脚本

text
value:设置初始值
maxlength:最大接受的字符数
size:能够显示的字符数

textarea
row:文本框的字符行数
cols:文本框的字符列数

选择文本

select()
文本获取焦点时，选择文本框中所有的文本

select事件

选择文本框的文本时会触发

取得选择的文本

selectionStart
selectionEnd

selection.

选择部分文本

setSelectionRange()
createTextRange()
自动完成建议的文本框

过滤输入

特定数据，特定格式

屏蔽字符

要求输入的文本中不能包含某些特殊字符
响应文本框中插入字符操作的是keypress事件。阻止事件的默认行为来屏蔽此类字符。

//只允许输入数值
var charCode=e.getCharCode()
//非字符触发的keypress事件字符编码<0
//检测用户没有按下Ctrl
if(!/d/.test(String.fromCharCode(charCode) && charCode>9 && !e.ctrlKey){
	e.preventDefault()
}

操作剪贴板

copy:发生复制操作时触发
cut:剪切
paste:粘贴

clipboardData

自动切换焦点

function tabForward(e){
	var tearget=e.targe
	if(target.value.length == target.maxLength){
		var form=target.form
		for(var i=0,len=form.elements.length;i

HTML5约束验证API

js被禁，

必填

required

其他类型

email
url

数值范围

input.setpUp(1)
input.setpDown(1)

输入模式

pattern

禁用验证

novalidate

选择框脚本

• add(newOption,relOption):向控件插入新元素，在相关项之前
• multiple:是否允许多选
• options
• remove(index):移除给定位置的选项
• selectedIndex:基于0的选中项的索引，没选中项，-1
• size:选择框中可见的行数

• index:当前选项在options集合中的索引
• label:
• selected:受否被选中
• text：
• value

选择选项

对于只允许选一项的选择框 ，selectdIndex

选择多项的选择框：selected

添加选项

var newOption=document.createdElement("option")
newOption.appendChild(document.createTextNode("text"))
newOption.setAttribute("value","text")

var newOption=new Option("text","text")

selectbox.appChild(newOption)

selectbox.add(newOption,undefined)

移除选项

//移除第一项
selectbox.removeChild(selectbox,option[0]);
selectbox.remove(0)
selectbox.options[0]=null

移动和重排选项

appendChild()
insertBefore()

表单序列化

表单提交时，浏览器如何将数据发送给服务器

• 对表单字段的名称和值进行URL编码，使用&分割
• 不发送禁用的表单字段
• 只发送勾选的复选框和单选按钮
• 不发送type为reset,button的按钮
• 多选框中每个选中的值单独一个条目
• 在单击提交按钮提交的情况下，会发送提交按钮，
• select元素的值就是option元素的value值

hasAttribute()
specified

富文本编辑

包含html页面的iframe,通过设置designMode属性，这个空白的html页面就可被编辑，而编辑对象是该页面body元素的HTML代码。

使用contenteditable属性

另一种富文本编辑的方式

操作富文本

document.execCommand()
参数：要执行的命令名称，表示浏览器是否需提供用户界面，执行命令的必须值

命令

值（第三个参数）

说明

backcolor

颜色字符串

文档的背景颜色

bold

null

将选择的文本转换为粗体

copy

null

将选择的文本复制到剪贴板

createlink

url字符串

将选择的文本转换为一个链接

cut

null

delete

null

fontname

字体名字

fontsize

1~7

将选择的文本修改为指定的字体大小

forecolor

颜色字符串

将选择的文本修改为指定的颜色

insertimage

图像url

插入一个图像

selectall

null

选择所有文本

underline

null

为选择的文本添加下划线

document.execCommand("bold",false,null)
document.execCommand("createlink",false,"http://www.")
document.execCommand("formatblock",false,"
")

20. HTML5脚本编程 JavaScript API

详细介绍

跨文档消息传递

postMessage()

原生拖放

拖放事件

媒体元素

属性

属性

数据类型

说明

autoplay

B

取得或设置autoplay

controls

B

取得或设置controls属性，用于显示或隐藏浏览器内置的控件

currentLoop

Int

媒体文件已循环的次数

currentSrc

S

当前播放媒体文件的URL

currentTime

F

已经播放的秒数

defaultPlaybackRate

F

取得或设置默认默认播放速度

duration

F

媒体总播放时间

ended

B

是否播放完成

loop

B

取得或设置媒体文件播放完成后是否从头开始播放

muted

B

取得或设置是否静音

历史状态管理

haschange事件
知道url参数什么时候发生变化

history.pushState()
状态管理API，在不加载页面的情况下改变浏览器的url,
参数：状态对象，新状态的标题，相对url
第二个参数可传入一个空字符串
会创建新的历史状态，可“后退”，会触发popstate事件。

popstate事件
有一个state属性，包含当初第一个参数传给pushState()的状态对象
得到状态对象后，需自己把页面重置为状态对象中数据表示的状态。

replaceState()
跟新当前状态，不会在历史状态栈中创建新状态，只会重写当前状态。

history.replaceState({name:"cc"},"")

21. 错误处理和调试

详细介绍

错误处理

服务端团队在错误处理机制上投入精力。按照类型，频率，对错误进行分类

22. 处理 XML

23. Json

语法

简单值

“hello”

对象

{
“name”:“cc”,
“age”:29
}

数组

[25,“hi”,true]

解析与序列化

JSON对象

eval()

stringify()
把js对象序列化为JSON字符串
第二个参数：可是数组，函数
第三个参数：是否在json字符串中保留缩进

toJSON()

parse()
把JSON字符串解析为js对象

24. 网络请求与远程资源

Ajax与Comet
XHR比较难用，迅速被fetch API替代，支持期约promise,服务线程service worker.

XMLHttpRequest对象

var xhr=new XMLHttpRequest()

XHR的用法

open()
调用open()不会实际发送请求，只是为发送请求做好准备。

//参数：要发送的请求类型（get,post),请求url,是否异步发送请求
xhr.open("get","example.php", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}

send()
要发送定义好的请求
参数：作为氢气主体发送的数据,如果不需要发送请求体，则必须传null，

同步请求，收到响应后，响应的数据会自动填充XHR对象的属性

• responseText:作为响应主体被返回的文本
• responseXML:如响应内容类型是text/xml,application/xml,那就是包含响应数据的XML DOM 文档。
• status:响应的HTTP状态
• statusText:http状态的说明

异步请求，检测XHR对象的readyState属性

• 0：未初始化，尚未调用open()
• 1:启动，已调用open(),未调用send()
• 2:发送，已调用send(),未接收到响应
• 3：接收，已接收到部分数据
• 4：完成，已接收到全部响应数据

readyState属性的值变化时，会触发readystatechange事件。

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get", "example.txt", true);
xhr.send(null);

abort()
取消异步请求
调用后，XHR对象停止触发事件，不在可访问与响应相关的对象属性。

HTTP头部信息

• Accept:浏览器能处理的内容类型
• Accept-Charset:浏览器能显示的字符集
• Accept-Encoding:浏览器能处理的压缩编码
• Accept-Language:浏览器当前设置的语言
• Connection:浏览器与服务器间链接的类型
• Cookie:当前页面设置的任何Cookie
• Host:发出请求的页面所在的域
• Referer:发出请求页面的url
• User-Agent：浏览器的用户代理字符串。

setRequsetHeader()
可设置自定义的头部信息

getResponseHeader()
取得响应头部信息

getAllResponseHeader()
返回包含所有响应头部的字符串

GET请求

用于向服务器查询某些信息
发送GET 请求最常见的一个错误是查询字符串格式不对。查询字符串中的每个名和值都必须使用
encodeURIComponent()编码，所有名/值对必须以和号（&）分隔，如下面的例子所示：
xhr.open(“get”, “example.phpname1=value1&name2=value2”, true);

POST请求

模仿web表单提交
Content-Type:application/x-www-formurlencoded

xhr.open("post", "postexample.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
let form = document.getElementById("user-info");
xhr.send(serialize(form));

PHP 文件
postexample.php 随后可以通过$_POST 取得POST 的数据。

假如没有发送Content-Type 头部，PHP 的全局$_POST 变量中就不会包含数据，而需要通过
$HTTP_RAW_POST_DATA 来获取。

XMLHttpRequest 2级

FormData

表单数据序列化
序列化表单，创建与表单格式相同的数据

var data=new FormData()
data.append("name","cc")

append()方法接收两个参数：键和值，相当于表单字段名称和该字段的值。可以像这样添加任意
多个键/值对数据。此外，通过直接给FormData 构造函数传入一个表单元素，也可以将表单中的数据作为键/值对填充进去：

let data = new FormData(document.forms[0]);
有了FormData 实例，可以像下面这样直接传给XHR 对象的send()方法：
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("post", "postexample.php", true);
let form = document.getElementById("user-info");
xhr.send(new FormData(form));

使用FormData 的另一个方便之处是不再需要给XHR 对象显式设置任何请求头部了。XHR 对象能
够识别作为FormData 实例传入的数据类型并自动配置相应的头部。

超时设定

timeout

xhr.timeout = 1000; // 设置1 秒超时
xhr.ontimeout = function() {
alert("Request did not return in a second.");
};

overrideMimeType()

用于重写XHR 响应的MIME 类型。

let xhr = new XMLHttpRequest();
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml");
xhr.send(null);

进度事件

loadstart
在接收到响应数据的第一个字节时触发

progress
在接收响应期间不断触发
e.target XHR对象
e.target.lengthComputable 进度信息是否可用
e.target.position 已接收的字节数
e.target.totalSize 预期字节数

xhr.onprogress = function(event) {
let divStatus = document.getElementById("status");
if (event.lengthComputable) {
divStatus.innerHTML = "Received " + event.position + " of " +
event.totalSize +
" bytes";
}
};

error
请求错误时触发

abort
因调用abort()方法终止连接时触发

load
接收到完整响应数据时触发 在成功接收完响应时触发

load 事件在响应接收完成后立即触发，这样就不用检查readyState 属性
了。onload 事件处理程序会收到一个event 对象，其target 属性设置为XHR 实例，在这个实例上
可以访问所有XHR 对象属性和方法。

let xhr = new XMLHttpRequest();
xhr.onload = function() {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

loadend
在通信完成，error,abort,load

跨域资源共享

只能访问同源URL，也就是域名相同、端口相同、协议相同

CORS: 使用自定义的HTTP 头部允许浏览器和服务器相互了解，以确实请求或响应应该成功还是失败。

Origin:发送请求时附加,头部包含发送请求的页面的源（协议、域名和端口），以便服务器确定是否为其提供响应。
Origin:http://www.com

服务器返回
Access-Control-Allow-Origin: http://www.nczonline.net
Access-Control-Allow-Origin:"*" //公共资源

默认情况下，跨源请求不提供凭据（cookie、HTTP 认证和客户端SSL 证书）。可以通过将
withCredentials 属性设置为true 来表明请求会发送凭据。如果服务器允许带凭据的请求，那么可
以在响应中包含如下HTTP 头部：
Access-Control-Allow-Credentials: true

替代性跨域技术

不需要修改服务器

图片探测

图片探测的缺点是只能发
送GET 请求和无法获取服务器响应的内容。这也是只能利用图片探测实现浏览器与服务器单向通信的
原因。

let img = new Image();
img.onload = img.onerror = function() {
alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas";

24.4.2 JSONP

JSONP 是从不同的域拉取可执行代码

跟JSON 一样，只是会被包在一个函数调用里，比如：
callback({ “name”: “Nicholas” });
JSONP 格式包含两个部分：回调和数据。回调是在页面接收到响应之后应该调用的函数，通常回调
函数的名称是通过请求来动态指定的。而数据就是作为参数传给回调函数的JSON 数据。下面是一个典
型的JSONP 请求：
http://freegeoip.net/json/callback=handleResponse

function handleResponse(response) {
console.log(`
You're at IP address ${response.ip}, which is in
${response.city}, ${response.region_name}`);
}
let script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

Fectch API

必须是异步
API 也能够应用在服务线程
（service worker）中，提供拦截、重定向和修改通过fetch()生成的请求接口。

24.5.1 基本用法

1. 分派请求
   fetch()只有一个必需的参数input。多数情况下，这个参数是要获取资源的URL。这个方法返回
   一个期约：

   let r = fetch(’/bar’);
   console.log®; // Promise
   fetch(‘bar.txt’)
   .then((response) => {
   console.log(response);
   });
   // Response { type: “basic”, url: … }

2. 读取响应
   读取响应内容的最简单方式是取得纯文本格式的内容，这要用到text()方法。这个方法返回一个
   期约，会解决为取得资源的完整内容：
   fetch(‘bar.txt’)
   .then((response) => {
   response.text().then((data) => {
   console.log(data);
   });
   });
   // bar.txt 的内容
   内容的结构通常是打平的：
   fetch(‘bar.txt’)
   .then((response) => response.text())
   .then((data) => console.log(data));
   // bar.txt 的内容

3. 处理状态码和请求失败
   Fetch API 支持通过Response 的status（状态码）和statusText（状态文本）属性检查响应状
   态。成功获取响应的请求通常会产生值为200 的状态码，如下所示：
   fetch(’/bar’)
   .then((response) => {
   console.log(response.status); // 200
   console.log(response.statusText); // OK
   });
   请求不存在的资源通常会产生值为404 的状态码：

因为服务器没有响应而导致浏览器超时，这样真正的fetch()失败会导致期约被拒绝：
fetch(’/hangs-forever’)
.then((response) => {
console.log(response);
}, (err) => {
console.log(err);
});
//（浏览器超时后）
// TypeError: “NetworkError when attempting to fetch resource.”
4. 自定义选项
可选参数init对象

24.5.2 常见Fetch 请求模式

1. 发送JSON 数据
   可以像下面这样发送简单JSON 字符串：
   let payload = JSON.stringify({
   foo: ‘bar’
   });
   let jsonHeaders = new Headers({
   ‘Content-Type’: ‘application/json’
   });
   fetch(’/send-me-json’, {
   method: ‘POST’, // 发送请求体时必须使用一种HTTP 方法
   body: payload,
   headers: jsonHeaders
   });
2. 在请求体中发送参数
   因为请求体支持任意字符串值，所以可以通过它发送请求参数：
   let payload = ‘foo=bar&baz=qux’;
   let paramHeaders = new Headers({
   ‘Content-Type’: ‘application/x-www-form-urlencoded; charset=UTF-8’
   });
   fetch(’/send-me-params’, {
   method: ‘POST’, // 发送请求体时必须使用一种HTTP 方法
   body: payload,
   headers: paramHeaders
   });
3. 发送文件
   因为请求体支持FormData 实现，所以fetch()也可以序列化并发送文件字段中的文件：
   let imageFormData = new FormData();
   let imageInput = document.querySelector(“input[type=‘file’]”);
   imageFormData.append(‘image’, imageInput.files[0]);
   fetch(’/img-upload’, {
   method: ‘POST’,
   body: imageFormData
   });
   这个fetch()实现可以支持多个文件：
   let imageFormData = new FormData();
   let imageInput = document.querySelector(“input[type=‘file’][multiple]”);
   for (let i = 0; i < imageInput.files.length; ++i) {
   imageFormData.append(‘image’, imageInput.files[i]);
   }
   fetch(’/img-upload’, {
   method: ‘POST’,
   body: imageFormData
   });
4. 加载Blob 文件
   Fetch API 也能提供Blob 类型的响应，而Blob 又可以兼容多种浏览器API。一种常见的做法是明确将
   图片文件加载到内存，然后将其添加到HTML图片元素。为此，可以使用响应对象上暴露的blob()方法。
   这个方法返回一个期约，解决为一个Blob 的实例。然后，可以将这个实例传给URL.createObjectUrl()
   以生成可以添加给图片元素src 属性的值：
   const imageElement = document.querySelector(‘img’);
   fetch(‘my-image.png’)
   .then((response) => response.blob())
   .then((blob) => {
   imageElement.src = URL.createObjectURL(blob);
   });
5. 发送跨源请求
   从不同的源请求资源，响应要包含CORS 头部才能保证浏览器收到响应。没有这些头部，跨源请求会失败并抛出错误。
   fetch(’//cross-origin.com’);
   // TypeError: Failed to fetch
   // No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
   如果代码不需要访问响应，也可以发送no-cors 请求。此时响应的type 属性值为opaque，因此无法读取响应内容。这种方式适合发送探测请求或者将响应缓存起来供以后使用。
   fetch(’//cross-origin.com’, { method: ‘no-cors’ })
   .then((response) => console.log(response.type));
   // opaque
6. 中断请求
   Fetch API 支持通过AbortController/AbortSignal 对中断请求。调用AbortController.
   abort()会中断所有网络传输，特别适合希望停止传输大型负载的情况。中断进行中的fetch()请求会
   导致包含错误的拒绝。
   let abortController = new AbortController();
   fetch(‘wikipedia.zip’, { signal: abortController.signal })
   .catch(() => console.log(‘aborted!’);
   // 10 毫秒后中断请求
   setTimeout(() => abortController.abort(), 10);
   // 已经中断

24.5.3 Headers 对象

Headers 与Map 类型都有get()、set()、has()和delete()
等实例方法，如下面的代码所示：
let h = new Headers();
let m = new Map();
// 设置键
h.set(‘foo’, ‘bar’);
m.set(‘foo’, ‘bar’);
// 检查键
console.log(h.has(‘foo’)); // true
console.log(m.has(‘foo’)); // true
console.log(h.has(‘qux’)); // false
console.log(m.has(‘qux’)); // false
// 获取值
console.log(h.get(‘foo’)); // bar
console.log(m.get(‘foo’)); // bar
// 更新值
h.set(‘foo’, ‘baz’);
m.set(‘foo’, ‘baz’);

24.6 Beacon API

在unload 事件触发时，分析工具要停止收集信息并把收集到的数据发给服务器。这时候有一个问题，
因为unload 事件对浏览器意味着没有理由再发送任何结果未知的网络请求（因为页面都要被销毁了）。
例如，在unload 事件处理程序中创建的任何异步请求都会被浏览器取消。为此，异步XMLHttpRequest
或fetch()不适合这个任务。分析工具可以使用同步XMLHttpRequest 强制发送请求，但这样做会导
致用户体验问题。浏览器会因为要等待unload 事件处理程序完成而延迟导航到下一个页面。
为解决这个问题，W3C 引入了补充性的Beacon API。这个API 给navigator 对象增加了一个
sendBeacon()方法。这个简单的方法接收一个URL 和一个数据有效载荷参数，并会发送一个POST
请求。可选的数据有效载荷参数有ArrayBufferView、Blob、DOMString、FormData 实例。如果请
求成功进入了最终要发送的任务队列，则这个方法返回true，否则返回false。
可以像下面这样使用这个方法：
// 发送POST 请求
// URL: ‘https://example.com/analytics-reporting-url’
// 请求负载：’{foo: “bar”}’
navigator.sendBeacon(‘https://example.com/analytics-reporting-url’, ‘{foo: “bar”}’);
这个方法虽然看起来只不过是POST 请求的一个语法糖，但它有几个重要的特性。
sendBeacon()并不是只能在页面生命周期末尾使用，而是任何时候都可以使用。
调用sendBeacon()后，浏览器会把请求添加到一个内部的请求队列。浏览器会主动地发送队
列中的请求。
浏览器保证在原始页面已经关闭的情况下也会发送请求。
状态码、超时和其他网络原因造成的失败完全是不透明的，不能通过编程方式处理。
信标（beacon）请求会携带调用sendBeacon()时所有相关的cookie

Web Sockets

let socket = new WebSocket(“ws://www.example.com/server.php”);
let stringData = “Hello world!”;
let arrayBufferData = Uint8Array.from([‘f’, ‘o’, ‘o’]);
let blobData = new Blob([‘f’, ‘o’, ‘o’]);
socket.send(stringData);
socket.send(arrayBufferData.buffer);
socket.send(blobData);
socket.onmessage = function(event) {
let data = event.data;
// 对数据执行某些操作
};

安全

CSRF(Cross-Site Request Rorgery)
跨站点请求伪造

高级技巧

过程的方式
面向对象的方式

惰性载入函数

        function createXHR() {
            if (typeof XHRHttpRequest != "undefined") {
                return new XHRHttpRequest()
            } else if (typeof ActiveXObject != "undefined") {

            } else {
                throw new Error("")
            }
        }
        //一次支持后便永久支持
        function createXHR() {
            if (typeof XHRHttpRequest != "undefined") {
                createXHR = function () {
                    return new XHRHttpRequest()
                }

            } else if (typeof ActiveXObject != "undefined") {

            } else {
                createXHR = function () {
                    throw new Error("")
                }

            }
        }

函数绑定

在指定this环境中以指定参数调用另一个函数
常常和回调函数和事件处理程序一起使用，将函数作为变量使用的同时保留代码的执行环境

被绑定函数比普通函数相比有更多的开销，需更多的内存，比=因多重函数调用稍微慢些

函数柯里化

函数节流

某些代码不可以在没间断的情况下连续重复执行。
第一次调用函数时，创建一个定时器，在指定时间间隔后运行代码。第二次调用时会清除前一次的定时器并设置另一个。如前一个定时器已执行过了，这个操作就没有意义了。如前一个定时器未执行，将其替换为一个新的定时器。

   var processor={
            timeoutId:null,
            performProcessing:()=>{
                console.log(1)
            },
            //不可用箭头函数，
            process:function (){
                clearTimeout(this.timeoutId)
                var that=this
				//setTimeout中函数的环境是window
                this.timeoutId=setTimeout(function (){
                    that.performProcessing()
                },200)
            }
        }
        window.onscroll=window.onscroll=()=>{
processor.process()}

不是每隔100ms触发一次，而是停止触发超过100ms后触发一次。

//参数：要执行的函数，作用域，没给出作用域在全局作用域中执行
function throttle(method,context){
	clearTimeout(method.tId)
	method.tId=setTimeout(function(){
		method.call(context)
	},100)
}

自定义事件

观察者模式
创建一个管理事件的对象，让其他对象监听那些事件

        function EventTarget(){
            //储存媒体类型
            this.handlers={}
        }
        EventTarget.prototype={
            constructor:EventTarget,
            //注册给定类型事件的事件处理程序
            addHandler:function(type,handler){
                if(typeof this.handlers[type] == "undefined"){
                    this.handlers[type]=[]
                }
                this.handlers[type].push(handler)
            },
            //触发一个事件
            fire:function(event){
                if(!event.target){

                }
            },
            //注销事件处理程序
            removeHandler:function(type,handler){
                if(this.handlers[type] instanceof Array){
                    var handlers=this.handlers[type]
                    for(var i=0,len=handlers.length;i

拖放

绝对定位

25.离线应用和客户端储存

离线检测

navigator.onLine属性

online事件
网络从离线变为在线

offline事件

应用缓存

manifest

数据储存

Cookie

cookie的构成

名称
一个唯一确定的cookie名称，必须被url编码

值
储存在cookie中的字符串值，必须被url编码

域
对哪个域是有效的，所有向该域发送的请求都会包含这个cookie

路径
对指定域中的那个路径，应向服务器发送coolie

失效时间
何时应被删除

安全标识
SSL

JS中的cookie

document.cookie
返回一系列；分割的名值对
decodeURLComponent()解码

document.cookie=“name=cc;domain=.www.com;path=/”

//基本cookie操作：读取，写入，删除

25.2 Web Storage

26. 模块

详细介绍

27. 工作者线程

详细介绍

28. 最佳实践

详细介绍

附录 A ES2018 和 ES2019

详细介绍

附录 B 严格模式

详细介绍

附录 C ES2018 和 ES2019

详细介绍

附录 D ES2018 和 ES2019

详细介绍