第25章 新兴的API
requestAnimationFrame()：
很长时间以来，计时器和循环间隔一直都是JavaScript动画的最核心技术。requestAnimationFrame告诉浏览器，有一个动画开始了，进而浏览器就可以确定重绘的最佳方式。
（1）早期动画循环
setInterval()方法来控制动画。
大多数电脑显示器的刷新频率是60HZ，大概相当于每秒钟重绘60次。因此，最平滑动画的最佳的循环间隔是1000ms/60，约等于17ms。
（2）循环间隔的问题
（3）mozRequestAnimationFrame
（4）webkitRequestAnimationFrame与msRequestAnimationFrame
Page Visibility API：
这个API就是为了让开发人员知道页面是否对用户可见推出的，由三部分组成：
document.hidden：表示页面是否隐藏的布尔值；
document.visibilityState：页面状态值；
visibilitychange事件：当文档从可见变为不可见或从不可见变为可见时，触发该事件。
Geolocation API：
Geolocation API在浏览器中的实现是navigator.geolocation对象，这个对象包含3个方法。
第一个方法是getCurrentPosition()，调用这个方法就会触发请求用户共享地理定位信息的对话框。接收3个参数：成功回调函数、可选的失败回调函数和可选的选项对象。
其中成功回调函数会接收一个Position对象参数，有coords和timestamp。coords对象中包含与位置相关的信息。
如果你希望跟踪用户的位置，那么可以使用另一个方法watchPosition()。这与定时调用getCurrentPosition()的效果相同。
File API：
不能直接访问用户计算机中的文件，一直都是web应用开发中的一大障碍。2000年以前，处理文件的唯一方式就是在表单中加入<input type=“file”>字段，仅此而已。
在通过文件输入字段选择了一个或多个文件时，files集合中将包含一组File对象，每个File对象对应着一个文件。每个File对象都有下列只读属性：name、size、type、lastModifiedDate。
通过侦听change事件并读取files集合就可以知道选择的每个文件的信息。
（1）FileReader类型
FileReader类型实现的是一种异步文件读取机制。可以把FileReader想象成XMLHttpRequest，区别只是它读取的是文件系统，而不是远程服务器。
FileReader也提供了几个事件，其中最有用的三个事件是progress、error和load，分别表示是否又读取了新数据、是否发生了错误以及是否已经读完了整个文件。
如果想中断读取过程，可以调用abort()方法，就会触发abort事件。在触发load、error或abort事件后，会触发另一个事件loadend。
（2）读取部分内容
有时候，我们只想读取文件的一部分而不是全部内容。为此，File对象还支持一个slice()方法。接收两个参数：起始字节及要读取的字节数。这个方法返回一个Blob的实例，Blob是File类型的父类型。
Blob类型有一个size属性和一个type属性，而且也支持slice()方法。
（3）对象URL
对象URL也被称为blob URL，指的是引用保存在File或Blob中数据的URL。好处是不必把文件内容读取到JavaScript中而直接使用文件内容。为此，只要在需要文件内容的地方提供对象URL即可。
Window.URL.createObjectURL()。
释放时调用window.URL.revokeObjectURL()。
（4）读取拖放的文件
结合使用HTML5拖放API和文件API，可以实现该功能。从桌面上把文件拖放到浏览器中也会触发drop事件，而且可以在event.dataTransfer.files中读取到被放置的文件，当然此时它是一个File对象。
结合XMLHttpRequest和拖放文件可以实现文件上传。
（5）使用XHR上传文件
把文件内容放到send()方法中，再通过POST请求，的确很容易实现文件上传，但这样服务器必须收集提交的内容，然后再把它们保存到另一个文件中。其实更好的做法是以表单提交的方式来上传文件。
使用FormData类型，然后调用append()方法并传入相应的File对象作为参数，然后把FormData对象传递给XHR的send()方法，结果与通过表单上传一模一样。
Web计时：
Web Timing API实际上已经成了W3C的建议标准。
Web计时机制的核心是window.performance对象，开始为它定义了两个属性：
1.performance.navigation属性是一个对象，包含着与页面导航有关的多个属性：
redirectCount：页面加载前的重定向次数；
Type：数值常量，表示刚刚发生的导航类型。
2.performance.timing属性也是一个对象，但这个对象的属性都是时间戳：
navigationStart：开始导航到当前页面的时间；
requestStart：浏览器开始请求页面的时间；
responseStart：浏览器接收到页面第一个字节的时间；
responseEnd：浏览器接收到页面所有内容的时间；
Web Workers：
长时间运行的JavaScript进程会导致浏览器冻结用户界面，让人感觉屏幕“冻结”了，Web Workers规范通过让JavaScript在后台运行解决了这个问题。
（1）使用Worker
Var worker = new Worker(“stufftodo.js”);
Worker.postMessage(“start!”);
worker.onmessage = function(event){};
Worker.onerror = function(){};
调用terminate()方法就可以停止Worker的工作。
（2）Worker全局作用域
它所执行的JavaScript代码完全在另一个作用域中，与当前网页中的代码不共享作用域。在Web Worker中，同样有一个全局对象和其他对象以及方法。但是，Web Worker中的代码不能访问DOM，也无法通过任何方式影响页面的外观。
Web Worker中的全局对象是worker对象本身。有一个最小化的运行环境：最小化的navigator对象、只读的location对象、setTimeout()、setInterval()、clearTimeout()和clearInterval()方法、XMLHttpRequest构造函数。
传递消息就是页面与Worker相互之间通信的方式。
排序的确是比较消耗时间的操作，因此转交给Worker做就不会阻塞用户界面了。另外，把彩色图像转换成灰阶图像以及加密解密之类的操作也是相当费时的。
（3）包含其他脚本
调用importScripts()方法。
（4）Web Workers的未来
本节讨论的都是“专用Worker“，不能在页面间共享。还有一个”共享Worker“的概念，这种Worker可以在浏览器的多个标签中打开的同一个页面间共享。
附录A ECMAScript Harmony
ECMAScript 3.1，最终改名为ECMAScript 5，很快完成了标准化。
一般性变化：
（1）常量
const常量声明
（2）块级作用域及其他作用域
let创建块级作用域
函数：
（1）剩余参数与分布参数
剩余参数的语法形式是三个点后跟一个标识符。使用这个语法可以定义可能会传进来的更多参数，然后把它们收集到一个数组中。
分布参数，可以向函数中传入一个数组，数组中的每个值映射到函数的每个参数上。语法就是在值前面加三个点。
（2）默认参数值
直接在参数名后面加上等于号和默认值。
（3）生成器
数组及其他结构：
（1）迭代器
（2）数组领悟
（3）解构赋值
新对象类型：
（1）代理对象
（2）代理函数
（3）映射与集合：Map类型和Set类型
（4）WeakMap
（5）StructType
（6）ArrayType
类：
ECMAScript 6引入了类的概念，但这个类只是一种语法糖，覆盖在目前基于构造函数和基于原型的方式和类型之上。
（1）私有成员
（2）getter和setter
（3）继承
extends关键字实现继承
模块：
附录B 严格模式
ECMAScript 5最早引入了“严格模式”的概念。
（1）选择使用：
”use strict”;
（2）变量：
不允许未声明变量等
（3）对象：
（4）函数：
在严格模式下，arguments对象的行为也有所不同，在非严格模式下，修改命名参数的值也会反映到arguments对象中，而在严格模式下这两个值是独立的。
严格模式中淘汰了arguments.callee和arguments.caller。
（5）eval()：严格模式下，不再创建变量或函数。
（6）eval与arguments：
严格模式已经明确禁止使用eval和arguments作为标识符，也不允许读写它们的值。
（7）抑制this：
（8）其他变化：
抛弃了with语句。
严格模式也去掉了JavaScript中的八进制字面量。
附录C JavaScript库
（1）通用库：
YUI、Prototype、Dojo Toolkit、MooTools、jQuery、MochiKit、Underscore.js
（2）互联网应用：
Backbone.js、Rico、qooxdoo
（3）动画和特效：
script.aculo.us、moo.fx、Lightbox
（4）加密：
JavaScript MD5、JavaScrypt
附录D JavaScript工具
（1）校验器
JSLint、JSHint、JavaScript Lint
（2）压缩器
JSMin、Dojo ShrinkSafe、YUI Compressor
（3）单元测试
JsUnit、YUI Test、DOH、qUnit
（4）文档生成器
JsDoc Toolkit、YUI Doc、AjaxDoc
（5）安全执行环境
ADsafe、Caja