highlight: a11y-dark

theme: channing-cyan

《JavaScript权威指南》第六版通读笔记

第一部分 javascript 核心

  1. var 声明的全局变量是全局对象(window)的属性,这是es规范中强制规定的。function同是,let、const则不是。

var a = "全局A" console.log(a) // 全局A console.log(window.a) // 全局A

  1. 函数内部的声明提前,是声明提前到函数顶部,但初始化赋值代码仍在原来的位置。
  2. javascript 中所有数字都是浮点型的,除法运算的结果也是浮点型的。
  3. 基本数据类型比较的时候会先转换为数字再进行比较,基本数据类型的比较是值的比较,对象的比较都是引用的比较。例如:

“1” == true // 结果为 true ,比较过程是 true 会转换为数字 1,“1”也会转换为数字 1,然后再比较。

  1. instanceof 运算符通过原型链 prototype 执行类型判断。所有对象都是 object 的示例,所有数组都是对象。
  2. var 在顶层代码中声明的变量是全局变量,无法通过 delete 删除,其作用域在整个 javascript 程序中;在函数体内使用 var 声明的变量则是局部变量,其作用域仅在该函数体内。
  3. Switch case 中的表达式和期望值是否相等的判断,是使用恒等“===”运算比较的。
  4. 当 Switch 在函数体内时可以使用 return 代替 break。
  5. 对象的序列化,是指将对象的状态转为字符串,也可将字符串还原为对象。es5提供了内置函数JSON.stingfy() 序列化对象,JSON.parse() 还原(反序列化)对象。
  6. 稀疏数组就是包含从0开始的不连续索引的数组。
  7. 闭包。函数对象可以通过作用域相互关联起来,函数体内部变量都可以保存在函数作用域内,这种特性在计算机科学文献中被称为闭包。

闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。

阮一峰的理解:闭包就是能够读取其他函数内部变量的函数。因此可以把闭包简单理解成"定义在一个函数内部的函数"。在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

```js var add = (function () {

var counter = 0; return function () {return counter += 1;} })();

add();

add(); add();

// 计数器为 3 // 实例解析 // 变量 add 指定了函数自我调用的返回字值。 // 自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。 // add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。 // 这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。 // 计数器受匿名函数的作用域保护,只能通过 add 方法修改。 ```

  1. 闭包的性能考量。如果不是某些特定任务需要使用闭包,在其它函数中创建函数是不明智的,因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。
  2. 闭包的用途。闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
  3. 正则表达式的匹配,选择|、分组()、引用,非贪婪的匹配
  4. var 会产生“声明提前”现象,而 let 和 const 也会提升。但在变量声明之前引用这个变量, 将抛出引用错误(ReferenceError)。这个变量将从代码块一开始的时候就处在一个“暂时性死区”,直到这个变量被声明为止。。
  5. 适当的使用解构赋值,可以提高代码的可读性,尤其是返回结果为一组数据时,但也可能使代码变得晦涩难懂。

第二部分 服务端 javascript

  1. javascript 在web浏览器之外运行的两个代表,Rhino 和 Node。Rhino 是基于 Java 的 JavaScript 解释器,实现了通过JavaScript程序访问整个Java API。Node 是Google的 V8 JavaScript 解释器的一个特别版本,它在底层绑定 POSIX(Unix)API,包括文件、进程、套接字等,并侧重于异步I/O、网络和http。
  2. “服务端”JavaScript,意味着“web浏览器之外的任何事情”。

第三部分 客户端 javascript

  1. 当浏览器解析器遇到script元素时,它默认必须先执行脚本,然后再恢复文档的解析和渲染。这对于内联脚本没什么问题,但如果脚本源码是src属性指定的一个外部文件,这意味着脚本后面的文档部分在下载和执行脚本之前,都不会“出现在浏览器”中。

ps:不会出现在浏览器中:这指的是文档的文本内容已载入,但并未被浏览器引擎解析为DOM树。DOM树的生成是受JavaScript代码执行影响的,JavaScript代码会“阻塞”页面UI的渲染。

  1. script 脚本的执行只在默认的情况下是同步和阻塞的。script标签可以有defer和asyn属性(延迟和异步),这可以改变脚本的执行方式(在支持他们的浏览器)。

延迟:这是指defer属性使得浏览器延迟脚本的执行,直到文档的载入和解析完成,并可以操作。

异步:async属性使得浏览器可以尽快地执行脚本,而不用在下载脚本时阻塞文档解析。

ps:defer和async属性像是在告诉浏览器,链接进来的脚本不会使用document.write(),也不会生成文档内容,因此浏览器在下载脚本时继续解析和渲染文档。

注意,延迟的脚本会按照他们在文档里的出现顺序执行。而异步脚本会在载入完成后执行,这意味着它们的执行顺序可能是无序的。

  1. 关于async和defer。

async属性是 HTML5 中的新属性。

async 属性规定一旦脚本可用,则会异步执行。

注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。

注释:有多种执行外部脚本的方法:

  • 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
  • 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
  • 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
  • 如果两者都在,则执行async,忽略defer。

只有 Internet Explorer 支持 defer 属性。async则被ie10+和其他现代浏览器支持。

  1. DocumentContentLoaded和onload的区别

DocumentContentLoaded在onload事件之前触发。DocumentContentLoaded在DOM树加载完之后立刻触发,DOM树加载完成之后,继续加载图片等外部文件,加载完成之后,onload事件触发。

5.客户端JavaScript时间线(执行顺序时间线)

document.readyState:loading=》interactive=》complete

①document.readyState=loading,浏览器创建dom对象,开始解析web页面。

②遇到没有defer和async属性的script元素,同步阻塞加载执行script指向的代码

③遇到有defer或async的script时,继续解析后面的文档内容,同时执行asyn的脚本或等待dom解析完生成可操作的dom树时执行defer指向的脚本。

④当文档解析完成,document.readystate=interactive。

⑤defer的脚本会按照出现顺序执行,可访问操作完整的dom树。asyn的脚本则是依据加载完成的先后来执行,这意味着它们是无序的。

⑥浏览器在dom树上触发DocumentContentLoaded事件,这意味着程序执行从同步脚本执行阶段转换到了异步事件驱动阶段。但要注意,这时可能还有异步脚本未执行完。

⑦这时文档已经完全解析完成,但浏览器可能还在等待其他内容的载入,如图片或异步脚本。当所有这些内容完全载入,且异步脚本完成载入和执行,document.readystate的值会变为“complete”,web浏览器触发window对象的onload事件。

⑧从此刻起,会调用异步事件,以异步响应用户输入事件、网络事件、计时器过期等。

  1. 判断网络状态:window.navigator.onLine,true为联网false为未联网。

onLine表示当前浏览器是否连接到网络。navigator.connection可以判断出网络具体状态,例如4g/3g,但无法监听到网络是在线还是离线。

```js const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

connection.addEventListener('change', () => { // connection.effectiveType返回的是具体的网络状态:4g/3g/2g console.log(connection.effectiveType); }); ```

  1. window.screen 提供窗口显示大小信息和可用的颜色数量信息。

availHeight 属性声明了显示浏览器的屏幕的可用高度,以像素计。

在 Windows 这样的操作系统中,这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏) 的垂直空间。

availWidth 属性声明了显示浏览器的屏幕的可用宽度,以像素计。

bufferDepth 属性设置或返回在 off-screen bitmap buffer 中调色板的比特深度。

colorDepth 属性返回目标设备或缓冲器上的调色板的比特深度。

height 属性声明了显示浏览器的屏幕的高度,以像素计。

width 属性声明了显示浏览器的屏幕的宽度,以像素计。

deviceXDPI 属性返回显示屏幕的每英寸水平点数。

deviceYDPI 属性返回显示屏幕的每英寸垂直点数。

logicalXDPI 属性可返回显示屏幕每英寸的水平方向的常规点数。

logicalYDPI 属性可返回显示屏幕每英寸的垂直方向的常规点数。

8.confirm、prompt会产生阻塞,在大多数的浏览器里alert也会产生阻塞。showModalDialog模态对话框。

9.html 数据集属性,给html元素增加非标准的属性,绑定额外的信息,可以通过setAttribute()和getAttribute() 来实现。但这付出的代价是文档将不是合法有效的html。一个更好的选择是使用html5规范提供的data-格式来写html元素的非标准属性。例如:

```js

```

10.文档坐标和视口坐标(也称窗口坐标),元素文档坐标相对于元素在文档的位置,元素视口坐标则是相对窗口的,当滚动滚动条时,视口坐标会跟着变化。

11.window.getSelection():获取文档中选中的内容,这在一些选中翻译和查询场景中会非常有用。

```js


Title

文本1111标题1

文本22标题1

文本333标题1

```

12.html可编辑的内容

实现可编辑的html的两个方法:

① contenteditable:true/false 设置元素是否可编辑

② designMode:on/off 设置文档对象是否(例如iframe)可编辑

```js


可编辑的内容

这是另一段内容



这是另一段内容



这是另一段内容



不可编辑



```

13...document.write 只有在解析文档时才能使用 write()方法生成输出html到当前文档中,理解这点非常重要。如果在文档解析渲染已经完成之后调用,可能导致自动调用window.open(),这会清空当前文档。

14.动态html(DHTML):给页面创造动画等视觉动态效果的JavaScript和CSS统称为动态html(DHTML)。现在这个术语已经不流行了,首次推出类似的脚本化视觉效果是革命性的。

15.层叠样式表(Cascading Style Sheet,CSS),是一种指定html文档视觉表现的标准。

16.CSS非标准属性。厂商在实现非标准的CSS属性时,通常会加上前缀,甚至在将来会实现的标准也加,当标准被发布后,厂商会将前缀移除。Firefox:-moz-,Chrome和Safari:-webkit-,IE:-ms-,Opera:-o-。书写建议私有属性(非标准)放在前面,标准属性写在后面,例如:

js -webkit-transform:rotate(-3deg); /* Chrome/Safari */ -moz-transform:rotate(-3deg); /* Firefox */ -ms-transform:rotate(-3deg); /* IE */ -o-transform:rotate(-3deg); /* Opera */ transform:rotate(-3deg); /* 标准属性写在后面 */

17.CSS 盒模型(框模型),是指包围一个html元素的盒子,它包括外边距、边框(图边框)、内边距和实际内容区。

  1. CSS裁剪属性clip,需要结合绝对定位或固定定位使用。例如

js clip: rect(0 20px 20px 10px); position: absolute; /* fixed */

  1. 建议在使用location、open()等window的属性的时候前面加上window.,因为Document和Window对象 会有一些相同的引用,比如location属性,在这两个对象中都有,这可能会造成一些“误会”。
  2. 事件冒泡是事件传播的第三个阶段。发生在文档元素上的事件大多数都会冒泡,值得注意的例外是focus、blur和。文档元素上的事件会冒泡。
  3. HTTP:Hypertext Transfer Protocol 超文本传输协议。
  4. http进度事件Progress。上传进度事件:onProgress,onUploadProgress。
  5. abort()。中止http请求事件:XMLHttpRequest的abort()。这在有时候会有用。
  6. comet。基于服务端推送事件的技术。
  7. web存储。web存储最初作为html5的一部分被定义成API的形式。但是后来被剥离出来作为一份独立的标准了。web存储所描述的localStorage和sessionStorage,这两个对象实际上是持久化关联数组,是名值对的映射表,名和值都是字符串。Cookie 的大小不超过4KB,且每次请求都会发送回服务器;LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同)。

localStorage和sessionStorage,这两个属性都带代表同一个storage对象,区别在于存储的有效期和作用域不同:数据可以存储多长时间,以及谁拥有数据的访问权。

  1. 离线web应用

那么在开发支持离线的 Web 应用时,就不能仅仅满足于静态页面的展现,还必需考虑如何让用户在离线状态下也可以操作数据。离线状态时,把数据存储在本地;在线以后,再把数据同步到服务器上。

涉及三个方面:①离线资源缓存、②在线状态检测、③本地数据存储

  1. web数据库:IndexedDB ,非关系型数据库,更接近NoSQL。
  2. html5 引入video、audio、canvas。canvas是一种图编辑技术,这是革命性的。
  3. WebGL是一个三维的绘图标准。WebGL也是HTML5规范的一部分,本质上是一个增强型的图形绘制库,与HTML5的2D Canvas类似,都使用了canvas元素。
  4. 跨域消息传递:postMessage()

使用场景:webview(嵌套在原生app中的网页与原生app的通信),跨iframe、跨页面、跨域。

  1. 客户端JavaScript的一个基本特性就是单线程。
  2. web worker,ie10等大多数现代浏览器都支持。 worker可以解决客户端JavaScript单线程的问题。
  3. blob(Binary Large Object),表示“二进制大对象”。在JavaScript中通常表示二进制数据。
  4. html5的draggable属性。元素设置draggable=“true”后,可拖动。例如图片拖动到左面可达到复制的效果。
  5. 文件系统api,html5文件系统API。火狐文档:https://developer.mozilla.org/zh-CN/docs/Web/API/FileSystem

HTML5的文件操作Api中

1.FileAPI,用于基础的客户端本地文件读取,目前大多数接口已经被主流浏览器支持,点击查看更多参考

2.FileSystemAPI,网络应用可以创建、读取、导航用户本地文件系统中的沙盒部分以及向其中写入数据。

  1. 客户端数据库。

Web SQL:关系型数据库。兼容性上Firefox和ie未实现,似乎也不打算实现,另外官方标准也停止了,他们更关注IndexedDB。

IndexedDB:一种对象数据库,而非关系型数据库。IndexedDB,他比支持SQL查询的数据库更简单,作用域也是限制在包含他们的文档源中,非同源页面不可访问,同源页面可以相互访问对方的数据库。在IndexedDB API中,一个数据库其实就是一个命名对象存储区(object store)的集合。

阮一峰老师关于indexedDB的介绍:http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

javascript权威指南 中文 pdf javascript权威指南电子书_javascript

  1. web套接字,websocket。

WebSocket 是一种网络通信协议,支持双向通信。

WebSocket 协议在2008年诞生,2011年成为国际标准。

WebSocket支持双向通信,服务器能主动向客户端推送信息,客户端也可以主动向服务器发送信息,属于服务器推送技术的一种。