拜读阮一峰JavaScript教程笔记续
来源：互联网 发布：centos 下载 编辑：程序博客网 时间：2024/06/05 22:32
。。。中间写的全没了，后面再补
防止脚本阻塞：
1.defer属性，遇到script脚本，继续解析html，同时下载，即使这是下载完，也要等html解析完在执行代码，下载的代码不能有document.write()，可以保证js的顺序，对于内嵌脚本和动态生成的script脚本无效
2.async属性，遇到脚本，继续解析html，同时下载，这是脚本下载完，马上执行脚本，执行完脚本在继续解析html，不能保证js的顺序，同时有两张属性，优先执行async
动态加载js
(function() {
var scripts = document.getElementsByTagName('script')[0];
function load(url) {
var script = document_createElement_x_x_x_x_x_x_x_x_x_x_x_x_x_x('script');
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
}
load('//apis.google.com/js/plusone.js');
load('//platform.twitter.com/widgets.js');
load('//s.thirdpartywidget.com/widget.js');
}());
如果想保证顺序，可把async设置为false，
['a.js', 'b.js'].forEach(function(src) {
var script = document_createElement_x_x_x_x_x_x_x_x_x_x_x_x_x_x('script');
script.src = src;
script.async = false;
document.head.a(script);
});
动态加载的js要等css文件加载完成，才会去下载，但是静态不会，静态是和css同时下载
浏览器的组成
1.渲染引擎：
Firefox：Gecko引擎
Safari：WebKit引擎
Chrome：Blink引擎
IE: Trident引擎
Edge: EdgeHTML引擎
流程：
1解析html代码为dom树，css代码为css object model
2.对象合成，把两者合成渲染树
3，布局，计算渲染树的layout
4.绘制，把渲染时绘制到屏幕
并不是严格按顺序，可能第一步还没完成，第二和第三就开始了，所以可能出现，html代码还未下载完，浏览器已经显示内容了
重流：重新进行“布局流”，一定会导致重绘
重绘： 重新绘制，开销较小（比如改变颜色）
优化技巧：
读取DOM或者写入DOM，尽量写在一起，不要混杂
缓存DOM信息
不要一项一项地改变样式，而是使用CSS class一次性改变样式
使用document fragment操作DOM
动画时使用absolute定位或fixed定位，这样可以减少对其他元素的影响
只在必要时才显示元素
使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流
使用虚拟DOM（virtual DOM）库
2JavaScript引擎
js是一种解释语言，不需要编译，是实时运行的，好处是修改方便，刷新就可看到效果，坏处是每次都要调用解释器，系统开销大，运行速度比编译语言慢,代码-》（翻译器）字节码-》（解释器）机器码
为了加快速度，现在才有即时编译JIT，用到哪行，就编译哪行（一般只用到一小部分），然后缓存，有的直接把代码编译成机器码，入chrome的V8引擎
Window对象
窗口对象，所有全局变量都是他的属性
window.window === this //true
属性：
1.name窗口名字，不是doucument.title
2.location,关于url的一个对象 等于document.location
3.closed是否关闭
4.opener打开这个窗口的父窗口，如果是同源，可以用来通信
5.window.frames 类数组对象，所有框架窗口对应的window对象，如果iframe有id或name，直接window.名字就可返回包括iframe和frame元素，window是frames的别名，window.length === window.frames.length,如果没有框架元素返回0
6.screenX,screenY
7.innerWidth，innerHeight，视口尺寸，包括滚动条，如果没有滚动条等于document.documentELement.clien。。。
放大比例会改变，
8.outerHeight，outerWidth,浏览器尺寸，包括菜单栏，边框等，
9.pageXoffset，pageYoffset滚动条距离
10.navigator，对象，它的属性有：
userAgent，浏览器厂商和版本信息，mobi字符可以来识别手机浏览器，/mobi/i.test(ua)，若识别跟多：/mobi|android|touch|mini/i.test(ua)
plugins， 类数组对象，安装的插件
platform 操作系统信息
onLine 用户是否在线
geolocation 用户地理信息
方法有：
javaEnabled（）是否可以运行java applet小程序
cookieEnabled 是否可以储存cookie，只是代表能力，但是具体存不存无关，用户可以设置某个网站不得存，但是浏览器的这个属性还是true
11 screen对象，设备信息，属性有：
width，height：分辨率
availWidth...可用尺寸
colorDepth颜色深度，一般16或24位
12关于多窗口的：
top 顶层窗口
self本身
parent父窗口，
a标签，open方法，form标签的target=“_top”“_self”"_parent"指定对应窗口打开
window的方法：
1.moveTo（x,y）移动浏览器到屏幕某个位置
2,moveBy(w,l)移动某段拒绝
3.scrollTo 滚动条
4.scrollBy滚动条，滚到一屏 （0，windows.innerHeight）
5,open(地址（若省略，默认about:blank），名字（省略，__blank无名，如果已存在就跳到那个窗口，前提必须是同源），字符串（‘height=200,widht=200’,键值对，窗口的一些属性），布尔值（是否把history的当前记录替换成新的）)
6。close（）只对顶层窗口有效，框架不能
7.print（）打开打印对话框
8.getComputedStyle（）
9.matchMedia（）
10.focus（）
11getSelection（）selection对象，表示选中的文本 ，通过toString()可以获取文本
多窗口
iframe的window对象：
1.var w = doucument.getElementById('i').contentWindow window对象
2.doucument.getElementById('i')。contentDocument document对象
3.w.function()获取变量和属性，iframe特有
4.w.title子窗口标题，特有
5.w.frameElement 所在父窗口的节点，无，返回null。
事件
1.load，文档加载完，回调函数window.onload
2.error,错误（js语言错误，脚本文件不存在，图像文件不存在，若是css文件不存在，iframe文件不存在，不报错），回调函数
onerror(信息，脚本地址，行号，列号，错误对象)
URL编码和解码
URL元字符：分号（;），逗号（’,’），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）
语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（\），圆括号（()`）
除以上的其他字符都要转移，%+两个大写16进制字母
编码方式
encodeURI 把元字符和语义字符之外的都转义
decodeURI() 解码
encodeURIComponent 元字符也会转义，一般参数不是完整的url，而是路径或者参数值，只是片段
decodeURIComponent()解码
window交互方法：
alert
prompt（文本，默认输入框文本（可省））有输入框
confirm（文本）比alert多了个取消
History对象
属性：
1.Length
方法：
1.go（偏移量）go(0)刷新页面，go（1）= forward(),go(-1)=back（）
2.pushState（指定网址的相关状态对象， 新页面的title， url) 会在historty对象上添加一个元素，但是这个不会对页面有任何影响，只是对url地址会有影响，如果此时页面跳到一个新的页面，点击返回键，页面显示的还是原来的页面，打算地址栏显示的事新添加的地址，再按一次地址栏显示原来页面的地址，页面不变，总之不会触发页面刷新，如果添加一个hash，也不会触发haschange事件，也不会触发popstate事件
3.replaceState(参数同上)，会把当前页面在history里面的替换成新的，不会触发haschange事件
History对象
属性：
1.Length
2.state
方法：
1.go（偏移量）go(0)刷新页面，go（1）= forward(),go(-1)=back（）
2.pushState（指定网址的相关状态对象， 新页面的title， url) 会在historty对象上添加一个元素，但是这个不会对页面有任何影响，只是对url地址会有影响，如果此时页面跳到一个新的页面，点击返回键，页面显示的还是原来的页面，打算地址栏显示的事新添加的地址，再按一次地址栏显示原来页面的地址，页面不变，总之不会触发页面刷新，如果添加一个hash，也不会触发haschange事件，也不会触发popstate事件
3.replaceState(参数同上)，会把当前页面在history里面的替换成新的，
history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3
事件
popstate事件只有用户点击前进后退，或者用js 指向go，forward，back才出发，事件对象event有个state属性，对应上面的事件中的第一个参数,
接口：
URLSearchParams对象（不是所有浏览器都兼容），chrome中本身是一个interator对象，，url参数
var paramsString = 'q=URLUtils.searchParams&topic=api';
var searchParams = new URLSearchParams(paramsString);
方法：
has（键名）
get（键名）
getAll（键名）数组，
set(名，值)
delete()
append(名，值)
toString（）url参数形式
keys（）键名数组
values（）
entries（）
Cookie
服务器存储在浏览器的信息，一般浏览器累加长度不超过4kb，firebox最多50个，safari和chrome没限制数量
获取document.cookie 返回所有 "c1=sss;c2=aaa"用分号隔开
设置document.cookie="c3=ddd;expires=某个toUTCstring();path=/bbb;domain=百度.com"，只能设置一个或者
发送请求时的设置：
Set-Cookie: key1=value2; domain=example.com; path=/blog只能设置一个
Cookie: key1=value1; key2=value2可以发送多个
value
path路径，
expires过期时间,默认会话关闭时失效
domain域名
secure只能在发送https服务器时才能发送cookie，不需要指定，在通信协议是https的时候就会自动添加
max-age有效期，时段，几秒之类的
HttpOnly:是否可以被js获取，document.cookie读不到，只能用来向服务器发送
path生效的前提是domain匹配
如果一个服务器要改变cookie，必须key,domain,secure,path匹配
cookie共享，一般同源的两个页面才能共享，但是不要求协议相同
Web Storage，chrome2.5mb， firebox（由一级域名决定，就是a.a.com和b.a.com共享5mb）和opera 5mb， ie 10mb
1.sessionStorage 会话后被清空
2.localStorage 长期存在
window.seesionStorage
....localStorage
方法：
setItem（k,v）
getItem(k)
removeItem(k)
seesionStorage.clear()
localStorage.clear()清空
.key(index)返回第index位置的键名
storage事件，数据变化时会触发，但是不在当前页面触发，会在其他页面触发，但是只有ie会连自己也触发
window.addEventListener("storage",onStorageChange);
事件的属性：
key 键名
oldValue
newValue
url 触发事件的网页地址
同源政策
域名相同，协议相同，端口相同
影响范围：
cookie，localStorage indexedDB无法读取
dom无法获得
ajax无法发送
规避方法
1.通过domain相同，一级域名相同即可，可以实现cookie和iframe和用window.open打开的窗口通信，但localstorage和indexedDB还是不行
2.完全不同源的网站，跨窗口通信用：
片段识别符（fragment identifier）
http://example.com/x.html#fragment的#fragment，里面写了窗口的信息，改变不会刷新页面，通过监听hashchange改变可以得到事件
父窗口可以把信息，写入子窗口的片段标识符。
var src = originURL + '#' + data;
document.getElementById_x_x_x_x_x_x_x_x_x_x_x('myIFrame').src = src;
子窗口通过监听hashchange事件得到通知。
window.onhashchange = checkMessage;
function checkMessage() {
var message = window.location.hash;
// ...
}r
同样的，子窗口也可以改变父窗口的片段标识符。
parent.location.href= target + “#” + hash;
跨文档通信API（Cross-document messaging）h5，对localstorage也同样游戏哦啊
window.postMessage(信息，接受的源（协议+域名+ 端口，或者直接*表示所有）)
通过监听message事件
事件属性
source 发送消息的窗口，window对象
origin 接受的网址
data 内容
3.ajax
jsonp 不受同源限制，只能获取数据，只能get请求，在页面添加一个script元素，服务返回数据放在一个指定回调函数参数里返回callback(data(是对象，不是字符串)),如果浏览器定义了该函数，就会执行
websocket ws://非加密， wss://加密，不受同源限制，可以跨源，但要服务器支持
cors 跨源资源共享，w3c标准，，可以发送任何请求
Ajax 同源限制，
浏览器通信采用http协议，ajax可以支持http协议通信，也可
以支持其他协议如file和ftp，可同步也可异步，
一般的异步请求过程
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){
if (xhr.status === 200){
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.open('GET', '/endpoint', true);
xhr.send(null);
open方法的第三个参数是一个布尔值，表示是否为异步请求。
如果设为false，就表示这个请求是同步的，下面是一个例子。
var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);
request.send(null);
if (request.status === 200) {
console.log(request.responseText);
}
XMLHttpRequest对象
属性：
1.readyState，
0，对应常量UNSENT，表示XMLHttpRequest实例已经生成，但
是open()方法还没有被调用。
1，对应常量OPENED，表示send()方法还没有被调用，仍然可
以使用setRequestHeader()，设定HTTP请求的头信息。
2，对应常量HEADERS_RECEIVED，表示send()方法已经执行，
并且头信息和状态码已经收到。
3，对应常量LOADING，表示正在接收服务器传来的body部分的
数据，如果responseType属性是text或者空字符串，
responseText就会包含已经收到的部分信息。
4，对应常量DONE，表示服务器数据已经完全接收，或者本次接
收已经失败了。
readyState改变会触发readyStateChange事件
2。onreadyStateChange，以上事件的回调函数
3.response 只读，收到的数据体即body部分，他的类型多种
，有responseType的值决定
4.responseType服务器返回的数据类型
”“：字符串（默认值）
“arraybuffer”：ArrayBuffer对象
“blob”：Blob对象 二进制数据，比如图片
“document”：Document对象 适合xml文档，会自动被解析为
dom对象，直接可以用dom的方法
“json”：JSON对象，会自动对返回的数据进行JSON.parse()
处理，从response的得到的就是一个对象了，而不是字符串
“text”：字符串
5.responseText 只读，接受的字符串，如果是json，
JSON.parse(responseText) = response
6.responseXML 接受的document对象，只读
7.status 正常： 2XX或304
200, OK，访问正常
301, Moved Permanently，永久移动
302, Move temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误
8.statusText 字符串，状态信息，如“200 OK”
9.timeout 设置超时时间，如果设为0，表示没有限制
10.其他回调事件：
onloadstart 请求发出
onprogress 正在发送和加载数据
onabort 请求被中止，比如用户调用了abort()方法
onerror 请求失败， 如果发生的是网络错误，无法获取报错
信息，只能显示报错
onload 请求成功完成
ontimeout 用户指定的时限到期，请求还未完成
onloadend 请求完成，不管成果或失败
11.withCredentials 是否允许跨域，默认false，为了让这个
属性生效，服务器必须显式返回Access-Control-Allow-
Credentials这个头信息。打开时可以发生cookie，也会设置
远程的cookie，但是js依然获取不到
方法：
1.abort()终止请求
2.getAllResponseHeaders()
3.getResponseHeader(指定字段)
4.open(方法，地址，是否异步，认证的用户名，认证密码)，
如果两次用，相当于abort()
5.send(),参数放body，需要发送的数据，
send();
send(ArrayBufferView data);
send(Blob data);
send(Document data);发送之前会被串行化
send(String data);
send(FormData data);
6.setRequestHeader(字段，值)，在open和send之间调用次
7.overrideMimeType()设置返回数据的mime类型，现在用
responseType替换
事件：添加在xhr对象上
xhr.addEventListener()
1.readyStateChange
2.progress 回到函数xhr.upload.onprogress
3.load 接收完，并且是成功的
4.error错误
5.abort被制止
6.loadend 结束，可能失败，成功或被制止
例子：文件上传，省略。。。
Fetch
通过数据流传送，所以只能接收一次，在接收一次就是新的数
据流了，所以在接收前用clone先克隆一下，而ajax是放在缓
存中，一次性吐出来
检查是否支持 fetch in window
fetch(url).then(function (response) {
return response.json();
}).then(function (jsonData) {
console.log(jsonData);
}).catch(function () {
console.log('出错了');
});
对response的处理：
.text()：返回字符串
.json()：返回一个JSON对象
.formData()：返回一个FormData对象
.blob()：返回一个blob对象
.arrayBuffer()：返回一个二进制数组
.clone()克隆返回
fetch(url,配置（可以是对象，）).then(function
(response){})
response.json（）
response.ok 是否为200
response.headers.get()
response.status
response.statusText
response.type回应的类型，
basic：正常的同域请求
cors：CORS机制下的跨域请求，请求是mode:'cors'
opaque：非CORS机制下的跨域请求，这时无法读取返回的数据
，也无法判断是否请求成功，
注意请求中的mode选项：same-origin、no-cors（默认值）、
cors。当设置为same-origin时，只能向同域的URL发出请求，
否则会报错。
default
error
response.url
Header对象，
或者
reqHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});
方法：
has(字段)
set(字段，值)
get(字段)
getAll(字段)返回数值，指定志短的所有值
delete（字段）
Request对象
var headers = new Headers();
headers.append("Accept", "application/json");
headers.append("Content-Type", "text/plain");
var request = new Request(URL, {headers:headers});
或者
var request = new Request(URL, {headers: {}});
fetch(request).then(function(response) {
console.log(response.headers);
});
属性：
method
url
Response对象
属性:看上面
方法;
Response.error() 返回一个type属性为error的Response对
象实例
Response.redirect(url, status) 返回的Response对象实例
会重定向到另一个URL
request和response的body属性类型:
ArrayBuffer
ArrayBufferView (Uint8Array等)
Blob/File
string
URLSearchParams
FormData
CORS 跨域资源共享，允许浏览器向跨源服务器，发出
XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
兼容性 ie10以上，浏览器自动完成，但是需要服务器支持
分为两种：
简单请求：
请求方法：head，get，post
头信息范围：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-
urlencoded、multipart/form-data、text/plain
在头信息加Origin字段，表示请求哪个源（疑问中），服务器
版的是否在白名单内，若否，返回的头信息没包含Access-
Control-Allow-Origin，就是出错，若是，响应头信息多了：
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
CORS请求时，XMLHttpRequest对象的getResponseHeader()方
法只能拿到6个基本字段：Cache-Control、Content-
Language、Content-Type、Expires、Last-Modified、
Pragma。如果想拿到其他字段，就必须在Access-Control-
Expose-Headers里面指定。上面的例子指定，
getResponseHeader('FooBar')可以返回FooBar字段的值
CORS请求默认不包含Cookie信息（以及HTTP认证信息等）。如
果需要包含Cookie信息，一方面要服务器同意，指定Access-
Control-Allow-Credentials字段。
另一方面，开发者必须在AJAX请求中打开withCredentials属
性。xhr.withCredentials = true;
如果要发送Cookie，Access-Control-Allow-Origin就不能设
为星号，必须指定明确的、与请求网页一致的域名。同时，
Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才
会上传，其他域名的Cookie并不会上传，且（跨源）原网页代
码中的document.cookie也无法读取服务器域名下的Cookie。
非简单请求：
会先预检，预检请求类似：
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age：（有效期时间段）
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
预检回应
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
如果不同意，会返回正常http回应，没有cors相关的头信息片
段
开始请求：
PUT /cors HTTP/1.1
Origin: http://api.bob.com 自动添加
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
正常回应：
Access-Control-Allow-Origin: http://api.bob.com 每次
正常回应必有的
Content-Type: text/html; charset=utf-8
IndexDB客户端的数据库，
不是关系型数据库，以对象仓库存储数据，建值对存储
特点： 键值对存储，异步，支持事务（一步失败，都撤销），同域限制，容量大（至少250mb，IE的储存上限是250MB，Chrome和Opera是剩余空间的某个百分比，Firefox则没有上限），支持二进制存储
目前safari完全不支持
"indexedDB" in window 检查是否支持
先写到这里
Notifications
Notification API是浏览器的通知接口，用于在用户的桌面（而不是网页上）显示通知信息，桌面电脑和手机都适用，比如通知用户收到了一封Email。具体的实现形式由浏览器自行部署，对于手机来说，一般显示在顶部的通知栏。
如果网页代码调用这个API，浏览器会询问用户是否接受。只有在用户同意的情况下，通知信息才会显示。
window.Notification 检查是否支持，Chrome和Firefox在桌面端部署了这个API，Firefox和Blackberry在手机端部署了这个API。
移动设备API
这里只讲下Viewport
width: viewport宽度
height: viewport高度
initial-scale: 初始缩放比例
maximum-scale: 最大缩放比例
minimum-scale: 最小缩放比例
user-scalable: 是否允许用户缩放
- 拜读阮一峰JavaScript教程笔记续
- 拜读阮一峰JavaScript教程笔记
- JavaScript 快捷教程 -笔记
- JavaScript教程&笔记
- JavaScript菜鸟教程笔记
- 笔记：菜鸟教程-JavaScript
- 笔记：菜鸟教程-JavaScript
- Javascript：Javascript教程，javascript入门,学习笔记
- Javascript标准参考教程（阮一峰）笔记总结---语法篇
- 拜读seajs
- 置顶拜读
- Javascript教程，javascript入门,学习笔记,Javascript Tutorials
- 廖雪峰javascript教程学习笔记
- JavaScript学习笔记_ReactRouter使用教程
- javascript学习笔记（廖雪峰javascript教程）
- 拜读《茶 经》
- 拜读强帖
- Mybatis源码拜读
- Invalid bitcode signature，App Match-O Linker
- Mysql
- 拜读阮一峰JavaScript教程笔记
- JavaScript基础（运算符）
- workbench模拟器simulator的使用之虚拟网卡的建立
- 拜读阮一峰JavaScript教程笔记续
- 面向对象-（4）
- java.lang.RuntimeException: java.lang.RuntimeException: com.opensymphony.xwork2.inject.DependencyExc
- Oracle12c中数据泵新特性之功能增强(expdp, impdp)
- 针对页面加载的问题
- 【数据结构】B树的详解
- leetcode-35. Search Insert Position
- C++中的STL以及库函数在ACM中的运用
- 简单的一个HttpUrlConnect的post请求
