update

Author: amaler

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["stage-3", "es2015"],
+  "plugins": ["transform-runtime"]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -1 +1,79 @@
-# js-async-tutorial
+# 深入理解 JavaScript 异步
+
+## 前言
+
+2014年秋季写完了《[深入理解javascript原型和闭包系列](http://www.cnblogs.com/wangfupeng1988/p/4001284.html)》，已经帮助过很多人走出了 js 原型、作用域、闭包的困惑，至今仍能经常受到好评的留言。
+
+很早之前我就总结了**JS三座大山**这个概念（虽然没有到处宣扬），前两座（原型、作用域）已经基本讲明白，而第三座（异步）也应该做一个总结。
+
+于是，2017年初春，我花费大约一周的业余时间来对 JS 异步做一个完整的总结，和各位同学共勉共进步！
+
+## 目录
+
+**基础部分**
+
+- [什么是异步](./part1/01-what-is-async.md)
+- [异步和 event-loop](./part1/02-event-loop.md)
+- 事件绑定算不算异步？
+- 最原始的 callback 处理异步
+
+**jQuery的解决方案**
+
+- jQuery 对异步的思考 - 上
+- jQuery 对异步的思考 - 下
+
+**Promise**
+
+- Promise 被 ES6 采用
+- Promise 在 ES6 中的具体应用
+- 对标一下 Promise/A+ 标准
+- Promise 真的取代 callback 了吗？
+- 用 Q.js 库来简化 Promise 并且兼容浏览器
+
+**Generator**
+
+- Generator 横空出世
+- Iterator 遍历器
+- 带着 Iterator 来看 Generator
+- Generator 与异步结合
+- 使用大名鼎鼎的 co 库
+- koa 中使用 Generator
+- Generator 的本质是什么？是否取代了 callback
+
+**async-await**
+
+- ES7 中引入 async-await
+- async-await 值不值得期待
+- async-await 的本质是什么？是否取代了 callback
+
+**最后**
+
+- 总结
+
+
+## 运行程序的说明
+
+要求本地 node 在`v6`或以上版本，然后执行以下命令下载代码并安装依赖的插件
+
+```shell
+$ cd ~
+$ git clone git@github.com:wangfupeng1988/js-async-tutorial.git
+$ cd js-async-tutorial
+$ npm i
+```
+
+最后，本地可能需要启动一个静态服务器来运行页面，我使用`http-server`插件
+
+```shell
+$ npm install http-server -g
+$ cd js-async-tutorial
+$ http-server -p 8881
+```
+
+然后浏览器访问`http://localhost:8881/xxx/xxx.html`即可
+
+## 求打赏
+
+如果你看完了，感觉还不错，欢迎给我打赏 ———— 以激励我更多输出优质内容
+
+![](http://images2015.cnblogs.com/blog/138012/201702/138012-20170228112237798-1507196643.png)

data/data1.json

@@ -0,0 +1 @@
+["a", "b", 100, true]

data/data2.json

@@ -0,0 +1,4 @@
+{
+    "a": 100,
+    "b": 200
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "js-async-tutorial",
+  "version": "1.0.0",
+  "description": "深入理解 JavaScript 异步",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wangfupeng1988/js-async-tutorial.git"
+  },
+  "author": "https://github.com/wangfupeng1988",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/wangfupeng1988/js-async-tutorial/issues"
+  },
+  "homepage": "https://github.com/wangfupeng1988/js-async-tutorial#readme",
+  "dependencies": {
+    "babel-core": "^6.23.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-3": "^6.22.0",
+    "babel-runtime": "^6.23.0",
+    "co": "^4.6.0",
+    "node-fetch": "^1.6.3",
+    "q": "^1.4.1",
+    "thunkify": "^2.1.2"
+  }
+}

part1/01-what-is-async.md

@@ -0,0 +1,78 @@
+# 什么是异步
+
+提醒：如果你是初学 js 的同学，尚未有太多项目经验和基础知识，请就此打住，不要看这篇教程
+
+我思考问题、写文章一般都不按讨论出牌，别人写过的东西我不会再照着抄一遍。因此，后面所有的内容，都是我看了许多资料之后，个人重新思考提炼总结出来的，这肯定不能算是初级教程。
+
+如果你是已有 js 开发经验，并了解异步的基础知识，到这里来想深入了解一下`Promise` `Generator`和`async-awati`，那就太好了，非常欢迎。
+
+
+
+## 本节内容概述
+
+- JS 为何会有异步
+- 异步的实现原理是什么
+- 常用的异步操作有哪些
+
+## JS 为何会有异步
+
+首先记住一句话 —— **JS 是单线程的语言**，所谓“单线程”就是一根筋，对于拿到的程序，一行一行的执行，上面的执行为完成，就傻傻的等着。例如
+
+```javascript
+var i, t = Date.now()
+for (i = 0; i < 100000000; i++) {
+}
+console.log(Date.now() - t)  // 250 （chrome浏览器）
+```
+
+上面的程序花费 250ms 的时间执行完成，执行过程中就会有卡顿，其他的事儿就先撂一边不管了。
+
+执行程序这样没有问题，但是对于 JS 最初使用的环境 ———— 浏览器客户端 ———— 就不一样了。因此在浏览器端运行的 js ，可能会有大量的网络请求，**而一个网络资源啥时候返回，这个时间是不可预估的。这种情况也要傻傻的等着、卡顿着、啥都不做吗？**———— 那肯定不行。
+
+因此，JS 对于这种场景就设计了异步 ———— 即，发起一个网络请求，就先不管这边了，先干其他事儿，网络请求啥时候返回结果，到时候再说。这样就能保证一个网页的流程运行。
+
+
+## 异步的实现原理
+
+先看一段比较常见的代码
+
+```javascript
+var ajax = $.ajax({
+    url: '/data/data1.json',
+    success: function () {
+        console.log('success')
+    }
+})
+```
+
+上面代码中`$.ajax()`需要传入两个参数进去，`url`和`success`，其中`url`是请求的路由，`success`是一个函数。这个函数传递过去不会立即执行，而是等着请求成功之后才能执行。**对于这种传递过去不执行，等出来结果之后再执行的函数，叫做`callback`，即回调函数**
+
+再看一段更加能说明回调函数的 nodejs 代码。和上面代码基本一样，唯一区别就是：上面代码时网络请求，而下面代码时 IO 操作。
+
+```javascript
+var fs = require('fs')
+fs.readFile('data1.json', (err, data) => {
+    console.log(data.toString())
+})
+```
+
+从上面两个 demo 看来，**实现异步的最核心原理，就是将`callback`作为参数传递给异步执行函数，当有结果返回之后再触发 `callback`执行**，就是如此简单！
+
+
+## 常用的异步操作
+
+开发中比较常用的异步操作有：
+
+- 网络请求，如`ajax` `http.get`
+- IO 操作，如`readFile` `readdir`
+- 定时函数，如`setTimeout` `setInterval`
+
+最后，**请思考，事件绑定是不是也是异步操作**？例如`$btn.on('click', function() {...})`。这个问题很有意思，我会再后面的章节经过分析之后给出答案，各位先自己想一下。
+
+## 求打赏
+
+如果你看完了，感觉还不错，欢迎给我打赏 ———— 以激励我更多输出优质内容
+
+![](http://images2015.cnblogs.com/blog/138012/201702/138012-20170228112237798-1507196643.png)
+
+

part1/02-event-loop.md

@@ -0,0 +1,81 @@
+# 异步和 event-loop
+
+提到异步，就必须提 event-loop 。event-loop 中文翻译叫做“时间轮询”，它是能体现出单线程中异步操作是如何被执行的。
+
+首先，**强烈大家观看一个歪果仁的视频《[what the hack is event loop](http://www.tudou.com/programs/view/ACDNKZJm6pQ/)》**，只有不到半个小时的时间，但是将的非常详细。*如果那个链接失效，访问[这里](http://pan.baidu.com/s/1c1E0rjM)（密码: xx9f）*
+
+其次，再结合阮一峰老师的《[什么是event loop](http://www.ruanyifeng.com/blog/2013/10/event_loop.html)》一起看一下。将这两个看完就基本了解 event loop 了
+
+最后，event-loop 是一块内容比较独立的技术性知识，它是什么样子就是什么样子，讲解起来可变通性非常小。因此，本节说一下我对 event-loop 的理解和体会
+
+## 本节内容概述
+
+- 举例说明
+- 核心概念
+- 思考两个问题
+
+## 举例说明
+
+给出一段简单的 js 代码
+
+```javascript
+console.log('line 1')
+setTimeout(console.log, 1000, 'line 2')
+console.log('line 3')
+```
+
+以上一共三行代码，该程序被执行的时候，会依次挨行执行，这被称作 **main-stack** 。
+
+- 第一步，执行第一行，将结果`line 1`打印出来
+- 第二步，执行第二行，注意此时会将这个操作暂时存储在一个叫做 **call-stack** 的内存地址中，因为`setTimeout`是一个异步执行操作。
+- 第三步，执行第三行，将结果`line 2`打印出出来
+- 第四步，等待 **main-stack** 的程序（一共三行）都全部执行完了，然后立马实时查看 **call-stack** 中是否还有未执行的异步回调，如果有（1000ms 之后）则把它拿到主线程中来执行
+- 第五步，主线程又被执行完了，再实时查看 **call-stack** 中是否还有未执行的异步回调。
+
+以上只拿了`setTimeout`举例子，但是对于网络请求、IO操作、事件绑定道理都是一样的。**如果我讲的简单例子你还是看不懂，一定要去看文章最初提到的《what the hack is event loop》视频，重要重要！！！**
+
+## 核心概念
+
+理解 event-loop 的核心概念是要明白以下几点：
+
+- **main-stack** 和 **call-stack** 的区别
+- 执行 **main-stack** 时将异步操作暂存到 **call-stack**
+- **main-stack** 执行完成之后，实时检查 **call-stack** 的任务是否应该被拿到 **main-stack** 中来执行
+
+
+## 思考三个问题
+
+**第一题，以下代码的输出顺序是什么**
+
+```javascript
+setTimeout(console.log, 0, 'a')
+console.log('b')
+console.log('c')
+```
+
+答案是`b c a`，有疑问的需要再去看上面的介绍或者那个视频。
+
+**第二题，以下代码中，最后输出的结果是否是 500**
+
+```javascript
+var i, t = Date.now()
+for (i = 0; i < 100000000; i++) {
+}
+function fn() {
+    console.log(Date.now() - t)  // 输出多少？？？
+}
+setTimeout(fn, 500)
+```
+
+答案是大于 500ms ，因为 for 函数需要花费一些时间，等 for 执行完之后再开始计算 500ms 之后执行 fn
+
+**第三题，事件绑定是不是异步操作？**
+
+这个问题大家根据 event-loop 的讲解和视频来思考，我们下一节再给出解答。
+
+
+## 求打赏
+
+如果你看完了，感觉还不错，欢迎给我打赏 ———— 以激励我更多输出优质内容
+
+![](http://images2015.cnblogs.com/blog/138012/201702/138012-20170228112237798-1507196643.png)