Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions docs/async/general.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ JavaScript 之所以采用单线程,而不是多线程,跟历史有关系。

同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕,才能执行后一个任务。

异步任务是那些被引擎放在一边,不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有”堵塞“效应。
异步任务是那些被引擎放在一边,不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有“堵塞”效应。

举例来说,Ajax 操作可以当作同步任务处理,也可以当作异步任务处理,由开发者决定。如果是同步任务,主线程就等着 Ajax 操作返回结果,再往下执行;如果是异步任务,主线程在发出 Ajax 请求以后,就直接往下执行,等到 Ajax 操作有了结果,主线程再执行对应的回调函数。

Expand Down Expand Up @@ -101,11 +101,11 @@ function f1() {

上面代码中,`f1.trigger('done')`表示,执行完成后,立即触发`done`事件,从而开始执行`f2`。

这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以[去耦合](http://en.wikipedia.org/wiki/Decoupling)(decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。阅读代码的时候,很难看出主流程。
这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以[去耦合](http://en.wikipedia.org/wiki/Decoupling)(decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。阅读代码的时候,很难看出主流程。

### 发布/订阅

事件完全可以理解成”信号“,如果存在一个”信号中心“,某个任务执行完成,就向信号中心”发布“(publish)一个信号,其他任务可以向信号中心”订阅“(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做”[发布/订阅模式](http://en.wikipedia.org/wiki/Publish-subscribe_pattern)”(publish-subscribe pattern),又称“[观察者模式](http://en.wikipedia.org/wiki/Observer_pattern)”(observer pattern)。
事件完全可以理解成“信号”,如果存在一个“信号中心”,某个任务执行完成,就向信号中心“发布”(publish)一个信号,其他任务可以向信号中心“订阅”(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做”[发布/订阅模式](http://en.wikipedia.org/wiki/Publish-subscribe_pattern)”(publish-subscribe pattern),又称“[观察者模式](http://en.wikipedia.org/wiki/Observer_pattern)”(observer pattern)。

这个模式有多种[实现](http://msdn.microsoft.com/en-us/magazine/hh201955.aspx),下面采用的是 Ben Alman 的 [Tiny Pub/Sub](https://gist.github.com/661855),这是 jQuery 的一个插件。

Expand Down Expand Up @@ -278,4 +278,3 @@ launcher();
上面代码中,最多只能同时运行两个异步任务。变量`running`记录当前正在运行的任务数,只要低于门槛值,就再启动一个新的任务,如果等于`0`,就表示所有任务都执行完了,这时就执行`final`函数。

这段代码需要三秒完成整个脚本,处在串行执行和并行执行之间。通过调节`limit`变量,达到效率和资源的最佳平衡。

1 change: 0 additions & 1 deletion docs/async/timer.md
Original file line number Diff line number Diff line change
Expand Up @@ -363,4 +363,3 @@ timer = setTimeout(func, 0);
上面代码有两种写法,都是改变一个网页元素的背景色。写法一会造成浏览器“堵塞”,因为 JavaScript 执行速度远高于 DOM,会造成大量 DOM 操作“堆积”,而写法二就不会,这就是`setTimeout(f, 0)`的好处。

另一个使用这种技巧的例子是代码高亮的处理。如果代码块很大,一次性处理,可能会对性能造成很大的压力,那么将其分成一个个小块,一次处理一块,比如写成`setTimeout(highlightNext, 50)`的样子,性能压力就会减轻。

7 changes: 3 additions & 4 deletions docs/basic/grammar.md
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ var 临时变量 = 1;

## 注释

源码中被 JavaScript 引擎忽略的部分就叫做注释,它的作用是对代码进行解释。Javascript 提供两种注释的写法:一种是单行注释,用`//`起头;另一种是多行注释,放在`/*`和`*/`之间。
源码中被 JavaScript 引擎忽略的部分就叫做注释,它的作用是对代码进行解释。JavaScript 提供两种注释的写法:一种是单行注释,用`//`起头;另一种是多行注释,放在`/*`和`*/`之间。

```javascript
// 这是单行注释
Expand Down Expand Up @@ -333,7 +333,7 @@ else console.log('world');
```javascript
if (m !== 1) {
if (n === 2) {
console.log('hello');
console.log('hello');
} else {
console.log('world');
}
Expand All @@ -345,7 +345,7 @@ if (m !== 1) {
```javascript
if (m !== 1) {
if (n === 2) {
console.log('hello');
console.log('hello');
}
} else {
console.log('world');
Expand Down Expand Up @@ -728,4 +728,3 @@ top:
## 参考链接

- Axel Rauschmayer, [A quick overview of JavaScript](http://www.2ality.com/2011/10/javascript-overview.html)

5 changes: 2 additions & 3 deletions docs/basic/history.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,13 @@ ECMA-262 标准后来也被另一个国际标准化组织 ISO(International Or

2009年12月,ECMAScript 5.0版 正式发布。Harmony 项目则一分为二,一些较为可行的设想定名为 JavaScript.next 继续开发,后来演变成 ECMAScript 6;一些不是很成熟的设想,则被视为 JavaScript.next.next,在更远的将来再考虑推出。TC39 的总体考虑是,ECMAScript 5 与 ECMAScript 3 基本保持兼容,较大的语法修正和新功能加入,将由 JavaScript.next 完成。当时,JavaScript.next 指的是ECMAScript 6。第六版发布以后,将指 ECMAScript 7。TC39 预计,ECMAScript 5 会在2013年的年中成为 JavaScript 开发的主流标准,并在此后五年中一直保持这个位置。

2011年6月,ECMAscript 5.1版发布,并且成为 ISO 国际标准(ISO/IEC 16262:2011)。到了2012年底,所有主要浏览器都支持 ECMAScript 5.1版的全部功能。
2011年6月,ECMAScript 5.1版发布,并且成为 ISO 国际标准(ISO/IEC 16262:2011)。到了2012年底,所有主要浏览器都支持 ECMAScript 5.1版的全部功能。

2013年3月,ECMAScript 6 草案冻结,不再添加新功能。新的功能设想将被放到 ECMAScript 7。

2013年12月,ECMAScript 6 草案发布。然后是12个月的讨论期,听取各方反馈。

2015年6月,ECMAScript 6 正式发布,并且更名为“ECMAScript 2015”。这是因为 TC39 委员会计划,以后每年发布一个 ECMAScript 的版本,下一个版本在2016年发布,称为ECMAScript 2016”,2017年发布“ECMAScript 2017”,以此类推。
2015年6月,ECMAScript 6 正式发布,并且更名为“ECMAScript 2015”。这是因为 TC39 委员会计划,以后每年发布一个 ECMAScript 的版本,下一个版本在2016年发布,称为ECMAScript 2016”,2017年发布“ECMAScript 2017”,以此类推。

## 周边大事记

Expand Down Expand Up @@ -185,4 +185,3 @@ JavaScript 伴随着互联网的发展一起发展。互联网周边技术的快
- John Dalziel, [The race for speed part 4: The future for JavaScript](http://creativejs.com/2013/06/the-race-for-speed-part-4-the-future-for-javascript/)
- Axel Rauschmayer, [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html)
- resin.io, [Happy 18th Birthday JavaScript! A look at an unlikely past and bright future](http://resin.io/happy-18th-birthday-javascript/)

5 changes: 2 additions & 3 deletions docs/basic/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,11 @@ Mozilla 基金会的手机操作系统 Firefox OS,更是直接将 JavaScript

**(6)跨平台的桌面应用程序**

Chromium OS、Windows 8 等操作系统直接支持 JavaScript 编写应用程序。Mozilla 的 Open Web Apps 项目、Google 的 [Chrome App 项目](http://developer.chrome.com/apps/about_apps)、Github 的 [Electron 项目](http://electron.atom.io/)、以及 [TideSDK 项目](http://tidesdk.multipart.net/docs/user-dev/generated/),都可以用来编写运行于 Windows、Mac OS 和 Android 等多个桌面平台的程序,不依赖浏览器。
Chromium OS、Windows 8 等操作系统直接支持 JavaScript 编写应用程序。Mozilla 的 Open Web Apps 项目、Google 的 [Chrome App 项目](http://developer.chrome.com/apps/about_apps)、GitHub 的 [Electron 项目](http://electron.atom.io/)、以及 [TideSDK 项目](http://tidesdk.multipart.net/docs/user-dev/generated/),都可以用来编写运行于 Windows、Mac OS 和 Android 等多个桌面平台的程序,不依赖浏览器。

**(7)小结**

可以预期,JavaScript 最终将能让你只用一种语言,就开发出适应不同平台(包括桌面端、服务器端、手机端)的程序。早在2013年9月的[统计](http://adambard.com/blog/top-github-languages-for-2013-so-far/)之中,JavaScript 就是当年 Github 上使用量排名第一的语言。
可以预期,JavaScript 最终将能让你只用一种语言,就开发出适应不同平台(包括桌面端、服务器端、手机端)的程序。早在2013年9月的[统计](http://adambard.com/blog/top-github-languages-for-2013-so-far/)之中,JavaScript 就是当年 GitHub 上使用量排名第一的语言。

著名程序员 Jeff Atwood 甚至提出了一条 [“Atwood 定律”](http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html):

Expand Down Expand Up @@ -162,4 +162,3 @@ function greetMe(yourName) {
greetMe('World')
// Hello World
```

1 change: 0 additions & 1 deletion docs/bom/cookie.md
Original file line number Diff line number Diff line change
Expand Up @@ -259,4 +259,3 @@ document.cookie = 'fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT';
## 参考链接

- [HTTP cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), by MDN

14 changes: 7 additions & 7 deletions docs/bom/engine.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ URL 支持`javascript:`协议,即在 URL 的位置写入代码,使用这个
<a href="javascript:console.log('Hello')">点击</a>
```

浏览器的地址栏也可以执行`javascipt:`协议。将`javascript:console.log('Hello')`放入地址栏,按回车键也会执行这段代码。
浏览器的地址栏也可以执行`javascript:`协议。将`javascript:console.log('Hello')`放入地址栏,按回车键也会执行这段代码。

如果 JavaScript 代码返回一个字符串,浏览器就会新建一个文档,展示这个字符串的内容,原有文档的内容都会消失。

Expand Down Expand Up @@ -139,8 +139,8 @@ URL 支持`javascript:`协议,即在 URL 的位置写入代码,使用这个

1. 浏览器一边下载 HTML 网页,一边开始解析。也就是说,不等到下载完,就开始解析。
2. 解析过程中,浏览器发现`<script>`元素,就暂停解析,把网页渲染的控制权转交给 JavaScript 引擎。
4. 如果`<script>`元素引用了外部脚本,就下载该脚本再执行,否则就直接执行代码。
5. JavaScript 引擎执行完毕,控制权交还渲染引擎,恢复往下解析 HTML 网页。
3. 如果`<script>`元素引用了外部脚本,就下载该脚本再执行,否则就直接执行代码。
4. JavaScript 引擎执行完毕,控制权交还渲染引擎,恢复往下解析 HTML 网页。

加载外部脚本时,浏览器会暂停页面渲染,等待脚本下载并执行完成后,再继续渲染。原因是 JavaScript 代码可以修改 DOM,所以必须把控制权让给它,否则会导致复杂的线程竞赛的问题。

Expand Down Expand Up @@ -419,19 +419,19 @@ JavaScript 是一种解释型语言,也就是说,它不需要编译,由解

字节码不能直接运行,而是运行在一个虚拟机(Virtual Machine)之上,一般也把虚拟机称为 JavaScript 引擎。并非所有的 JavaScript 虚拟机运行时都有字节码,有的 JavaScript 虚拟机基于源码,即只要有可能,就通过 JIT(just in time)编译器直接把源码编译成机器码运行,省略字节码步骤。这一点与其他采用虚拟机(比如 Java)的语言不尽相同。这样做的目的,是为了尽可能地优化代码、提高性能。下面是目前最常见的一些 JavaScript 虚拟机:

- [Chakra](http://en.wikipedia.org/wiki/Chakra_(JScript_engine\))(Microsoft Internet Explorer)
- [Chakra](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) (Microsoft Internet Explorer)
- [Nitro/JavaScript Core](http://en.wikipedia.org/wiki/WebKit#JavaScriptCore) (Safari)
- [Carakan](http://dev.opera.com/articles/view/labs-carakan/) (Opera)
- [SpiderMonkey](https://developer.mozilla.org/en-US/docs/SpiderMonkey) (Firefox)
- [V8](http://en.wikipedia.org/wiki/V8_(JavaScript_engine\)) (Chrome, Chromium)
- [V8](https://en.wikipedia.org/wiki/Chrome_V8) (Chrome, Chromium)

## 参考链接

- John Dalziel, [The race for speed part 2: How JavaScript compilers work](http://creativejs.com/2013/06/the-race-for-speed-part-2-how-javascript-compilers-work/)
- Jake Archibald[Deep dive into the murky waters of script loading](http://www.html5rocks.com/en/tutorials/speed/script-loading/)
- Jake Archibald, [Deep dive into the murky waters of script loading](http://www.html5rocks.com/en/tutorials/speed/script-loading/)
- Mozilla Developer Network, [window.setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout)
- Remy Sharp, [Throttling function calls](http://remysharp.com/2010/07/21/throttling-function-calls/)
- Ayman Farhat, [An alternative to Javascript's evil setInterval](http://www.thecodeship.com/web-development/alternative-to-javascript-evil-setinterval/)
- Ayman Farhat, [An alternative to JavaScript's evil setInterval](http://www.thecodeship.com/web-development/alternative-to-javascript-evil-setinterval/)
- Ilya Grigorik, [Script-injected "async scripts" considered harmful](https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/)
- Axel Rauschmayer, [ECMAScript 6 promises (1/2): foundations](http://www.2ality.com/2014/09/es6-promises-foundations.html)
- Daniel Imms, [async vs defer attributes](http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
Expand Down
2 changes: 1 addition & 1 deletion docs/bom/file.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ FileReader 有以下的实例属性。
- FileReader.onload:`load`事件(读取操作完成)的监听函数,通常在这个函数里面使用`result`属性,拿到文件内容。
- FileReader.onloadstart:`loadstart`事件(读取操作开始)的监听函数。
- FileReader.onloadend:`loadend`事件(读取操作结束)的监听函数。
- FileReader.onprogress:`progess`事件(读取操作进行中)的监听函数。
- FileReader.onprogress:`progress`事件(读取操作进行中)的监听函数。

下面是监听`load`事件的一个例子。

Expand Down
11 changes: 5 additions & 6 deletions docs/bom/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ for (var value of formData.values()) {
// "value2"

for (var pair of formData.entries()) {
console.log(pair[0] + ': ' + pair[1]);
console.log(pair[0] + ': ' + pair[1]);
}
// key1: value1
// key2: value2
Expand Down Expand Up @@ -272,7 +272,7 @@ document.querySelector('form input').validationMessage
var myInput = document.getElementById('myinput');
if (!myInput.checkValidity()) {
document.getElementById('prompt').innerHTML = myInput.validationMessage;
}
}
```

### setCustomValidity()
Expand Down Expand Up @@ -306,15 +306,15 @@ function checkFileSize() {

该对象有以下属性,全部为只读属性。

- `ValidityState.badInput`:布尔值,表示浏览器是否不能将用户的输入转换成正确的类型,比如用户在数值框里面输入字符串。
- `ValidityState.badInput`:布尔值,表示浏览器是否不能将用户的输入转换成正确的类型,比如用户在数值框里面输入字符串。
- `ValidityState.customError`:布尔值,表示是否已经调用`setCustomValidity()`方法,将校验信息设置为一个非空字符串。
- `ValidityState.patternMismatch`:布尔值,表示用户输入的值是否不满足模式的要求。
- `ValidityState.rangeOverflow`:布尔值,表示用户输入的值是否大于最大范围。
- `ValidityState.rangeUnderflow`:布尔值,表示用户输入的值是否小于最小范围。
- `ValidityState.stepMismatch`:布尔值,表示用户输入的值不符合步长的设置(即不能被步长值整除)。
- `ValidityState.tooLong`:布尔值,表示用户输入的字数超出了最长字数。
- `ValidityState.tooShort`:布尔值,表示用户输入的字符少于最短字数。
- `ValidityState.typeMismatch`:布尔值,表示用户填入的值不符合类型要求(主要是类型为 Email 或 URL 的情况)。
- `ValidityState.typeMismatch`:布尔值,表示用户填入的值不符合类型要求(主要是类型为 Email 或 URL 的情况)。
- `ValidityState.valid`:布尔值,表示用户是否满足所有校验条件。
- `ValidityState.valueMissing`:布尔值,表示用户没有填入必填的值。

Expand Down Expand Up @@ -362,7 +362,7 @@ form.noValidate = true;
</form>
```

## enctype 属性
## enctype 属性

表单能够用四种编码,向服务器发送数据。编码格式由表单的`enctype`属性决定。

Expand Down Expand Up @@ -547,4 +547,3 @@ xhr.open('POST', 'myserver/uploads');
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);
```

3 changes: 1 addition & 2 deletions docs/bom/history.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ History 对象主要有两个属性。
// 当前窗口访问过多少个网页
window.history.length // 1

// Histroy 对象的当前状态
// History 对象的当前状态
// 通常是 undefined,即未设置
window.history.state // undefined
```
Expand Down Expand Up @@ -163,4 +163,3 @@ var currentState = history.state;
```

注意,页面第一次加载的时候,浏览器不会触发`popstate`事件。

10 changes: 5 additions & 5 deletions docs/bom/indexeddb.md
Original file line number Diff line number Diff line change
Expand Up @@ -597,7 +597,7 @@ DBOpenRequest.onsuccess = function (event) {
};

transaction.onerror = function (event) {
console.log('tansaction error: ' + transaction.error);
console.log('transaction error: ' + transaction.error);
};

var objectStore = transaction.objectStore('items');
Expand Down Expand Up @@ -819,11 +819,11 @@ DBOpenRequest.onsuccess = function(event) {
var transaction = db.transaction(['demo'], 'readwrite');

transaction.oncomplete = function (event) {
console.log('transaction success');
console.log('transaction success');
};

transaction.onerror = function (event) {
console.log('tansaction error: ' + transaction.error);
console.log('transaction error: ' + transaction.error);
};

var objectStore = transaction.objectStore('demo');
Expand Down Expand Up @@ -920,7 +920,7 @@ IDBIndex 对象有以下方法,它们都是异步的,立即返回的都是

## IDBCursor 对象

IDBCursor 对象代表指针对象,用来遍历数据仓库(IDBObjectStroe)或索引(IDBIndex)的记录。
IDBCursor 对象代表指针对象,用来遍历数据仓库(IDBObjectStore)或索引(IDBIndex)的记录。

IDBCursor 对象一般通过`IDBObjectStore.openCursor()`方法获得。

Expand Down Expand Up @@ -998,7 +998,7 @@ var r7 = IDBKeyRange.bound(x, y, true, false);
// All keys ≥ x &&< y
var r8 = IDBKeyRange.bound(x, y, false, true);

// The key = z
// The key = z
var r9 = IDBKeyRange.only(z);
```

Expand Down
Loading