JS权威指南学习笔记

[Fadingvision]

JS权威指南学习笔记

一、类型、值和变量

1. 一元+号会将其操作数变为数字，+运算符会将一个变为字符串，!!会将操作数变为布尔值。
2. toFixed可以根据小数点后面的指定位数将数字转换为字符串。

parseFloat('123.456').toFixed(5)
// 123.45600

3. 由于js没有块级作用域，所有一些程序员特意将变量声明放在函数体顶部，而不是将声明靠近放在使用变量的地方，这种做法使得他们的源代码非常清晰的反映了真实的变量作用域。

二、表达式和运算符

1. viod运算符可以将一个数返回undefined值。
2. in可以测试属性是否存在
3. 通过 x === x来判断是否为NAN.
4. instanceof左侧是实例，右侧是对象。
5. 区分对象和原始类型用typeof,区分对象用instanceof

三、语句

1. {}是一个语句块，后面不需要分号。
2. ,是一个空语句。
3. 如果语句各自独占一行，通常可以省略语句之间的分号。
4. 两种风格：

• 在所有语句的结束都使用分号，
• 在任何可以省略分号的地方都将其省略，只有在不得不用的时候才使用分号

5. finally用于清理try中的异常，即时在try中用了return，也会在finally执行之后再执行return.
6. 不推荐使用with语句

四、类和模块

1. r instanceof Range检查r是否是继承自Range.prototype。
2. 使用Instanceof的缺点是在多个执行上下文中存在构造函数的多个副本的时候，检测结果会出错。
3. toString方法返回一个可以表示这个对象的字符串。valueOf方法，将对象转化为原始值。
4. 将代码组织到类中的一个重要原因是，让代码更加模块化，可以在很多不同场景中实现代码的重用。一般来讲，模块四一个独立的js文件。

五、语言的扩展

这些扩展很多在es6中已经成为了标准。

1. let和const.
2. 解构赋值
3. 迭代器
4. 生成器(yield).

客户端js

1. document.readystate的属性值的顺序依次是：

• 'loading' ---- 创建document对象，解析Html元素和文本内容。
• 'interactive' ---- 文档解析完成
• 'complete' ---- 文档和脚本完成载入

2. 用功能性测试而是浏览器检测来解决兼容性问题
3. 防止xss攻击的方式，在使用任何不可信的数据来动态的创建文档内容之前，从中移除html标签。

name = name.replace(/</g, '&lt;').replace(/>/g, '&gt;'); 

4. 子窗口的浏览历史记录会插入到主窗口的历史记录中。
5. window.parent来指向父窗口， window.top指向顶级窗口。
6. 子窗口可以由document.getElementById('iframe1').currentWindow或者window.iframes[index]来获取

childNodes --- children
firstChild --- firstElementChild
lastChild --- lastElementChild
nextSibling --- nextElementSibling
nodeValue
nodeName
parentNode
createElement()
createTextNode()
createDocumentFragment()
parentNode.appendChild()
parentNode.insertBefore()
removeChild()

8. 文档视图和窗口视图

// 滚动条距离
window.pageYoffset || document.body.scrollTop || document.documentElement.scrollTop
// 视窗尺寸
- window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth

9. getBoundingClientRect判断元素的四口位置
10. document.elementFromPoint()判断指定位置上有什么元素
11. 通过循环累加offsetLeft和offsetTop可以判断元素的在文档位置
12. 用classList代替class操作

HTML5部分

目录：

1. html5的新标签 ----
2. getElementsByclassName，querySelectorAll, dataset ---
3. ClassList --
4. XHR2 -- 新增的load,progress事件可以查看进度，新增的formData允许文件上传，新增的cors可以支持跨域请求。 ---
5. localStorage, sessionStroage, indexDB, 等新的web存储api ---
6. audio, video, canvas, svg, webgl。 ---

cookie

1. cookie的设计初衷是给服务端脚本用来存储少量数据的。所以一般不允许超过300个cookie,且每个cookie的大小不能超过4KB.

多媒体和图形编程

1. CANVAS

• 可以调用canvas的getContext()方法获得上下文对象，并在上下文对象来调用canvas的api。

其他的html5 API

1. 地理位置API

支持地理位置的API允许JS想程序向浏览器询问用户真实的地理位置。

• navigator.geolocation.getCurrentPosition获取用户当前位置。该方法允许传一个回调函数，pos对象会传入该回调函数的参数。第二个回调函数指定获取位置失败时的函数方法。

navigator.geolocation.getCurrentPosition((pos) => {
    // 经纬度
    console.log(pos.coords.latitude, pos.coords.longitude);
}, (err) => {
    // do something to handle the error msg...
})

• navigator.geolocation.wathcPosition监视用户当前位置。
• navigator.geolocation.clearWatch停止监视。

2. 历史管理API

早期的history API是用于服务器间的文档切换，而现代的浏览器是动态的生成或载入网页，并在无需刷新页面的情况下就显示新的状态，所以必须提供一套API供程序员自己管理history。

• 如果路由管理不是很复杂，可以用location.hash和监听window.onhashchange事件来实现路由页面的切换。
• 更健壮的路由管理方法：history.pushState()和popState()方法可以将状态添加到浏览器的浏览历史记录中。

history.pushState(obj, title, currentUrl);
// 用新的状态代替当前的历史状态
history.replaceState(// 同上);

3. 非同源文档传递消息的API

window.postMessage()方法，允许有限的通信，通过异步消息传递的方式，称为跨文档消息传递。

// 该方法第一个参数是要传递的消息，第二个参数是指定要传递的地址。
window.postMessage(msg, url);
// 其他窗口可以监听message事件来获取传递的信息。

4. worker线程（web worker）

JS的一个特征就是单线程，比如：浏览器无法同时运行两个事件处理程序，这个死因为客服端的js函数必须不能运行太长时间，否则会导致循环事件。

5. Blob, File, FileReader, BlobUrl
6. IndexDB API
7. websocket