update

Author: amaler

README.md

@@ -10,27 +10,27 @@
 
 ## 目录
 
-**基础部分**
+**part1 基础部分**
 
-- [什么是异步](./part1/01-what-is-async.md)
-- [异步和 event-loop](./part1/02-event-loop.md)
-- 事件绑定算不算异步？
-- 最原始的 callback 处理异步
+- [什么是异步](./part1-basic/01-what-is-async.md)
+- [异步和 event-loop](./part1-basic/02-event-loop.md)
+- [事件绑定算不算异步？](./part1-basic/03-event-bind.md)
 
-**jQuery的解决方案**
+**part2 jQuery的解决方案**
 
-- jQuery 对异步的思考 - 上
-- jQuery 对异步的思考 - 下
+- [jQuery-1.5 之后的 ajax](./part2-jquery/01-jquery-ajax.md)
+- [jQuery deferred](./part2-jquery/02-jquery-deferred.md)
+- [jQuery promise](./part2-jquery/03-jquery-promise.md)
 
-**Promise**
+**part3 Promise**
 
 - Promise 被 ES6 采用
 - Promise 在 ES6 中的具体应用
 - 对标一下 Promise/A+ 标准
 - Promise 真的取代 callback 了吗？
 - 用 Q.js 库来简化 Promise 并且兼容浏览器
 
-**Generator**
+**part4 Generator**
 
 - Generator 横空出世
 - Iterator 遍历器
@@ -40,7 +40,7 @@
 - koa 中使用 Generator
 - Generator 的本质是什么？是否取代了 callback
 
-**async-await**
+**part5 async-await**
 
 - ES7 中引入 async-await
 - async-await 值不值得期待

part1/01-what-is-async.md renamed to part1-basic/01-what-is-async.md

@@ -28,7 +28,7 @@ console.log('line 3')
 
 - 第一步，执行第一行，将结果`line 1`打印出来
 - 第二步，执行第二行，注意此时会将这个操作暂时存储在一个叫做 **call-stack** 的内存地址中，因为`setTimeout`是一个异步执行操作。
-- 第三步，执行第三行，将结果`line 2`打印出出来
+- 第三步，执行第三行，将结果`line 3`打印出出来
 - 第四步，等待 **main-stack** 的程序（一共三行）都全部执行完了，然后立马实时查看 **call-stack** 中是否还有未执行的异步回调，如果有（1000ms 之后）则把它拿到主线程中来执行
 - 第五步，主线程又被执行完了，再实时查看 **call-stack** 中是否还有未执行的异步回调。
 

part1/02-event-loop.md renamed to part1-basic/02-event-loop.md

@@ -0,0 +1,55 @@
+# 事件绑定算不算异步？
+
+如果你认真看了上一节的 event-loop 的，你会发现原来事件绑定和异步操作的实现机制是一样的，那么事件绑定是不是就是异步操作呢？（生命一下，这里说的事件绑定是如下代码的形式）
+
+```javascript
+$btn.on('click', function (e) {
+    console.log('你点击了按钮')
+})
+```
+
+**PS：这个问题貌似没有加过有人讨论或者发起讨论，但是当我了解了 event-loop 之后，我就发现这两者有很大联系，很早就像讨论一下这个话题。不知道哪位同仁跟我有一样的想法？**
+
+## 本节内容概述
+
+- 共同之处
+- 不同之处
+- 我的观点
+
+## 共同之处
+
+从技术实现以及书写方法上来讲，他们是一样的。例如事件绑定和 IO 操作的写法基本相同
+
+```javascript
+$btn.on('click', function (e) {
+    console.log('你点击了按钮')
+})
+fs.readFile('data1.json', function (err, data) {
+    // 获取数据
+})
+```
+
+最终执行的方式也基本一样，都会被放在 **call-stack** 中通过 event-loop 来调用。
+
+## 不同之处
+
+在我看来至少有两处不同。
+
+第一，event-loop 执行时，调用的源不一样。异步操作是系统自动调用，无论是`setTimeout`时间到了还是`$.ajax`请求返回了，系统会自动调用。而事件绑定就需要用户手动触发
+
+第二，从设计上来将，事件绑定有着明显的“订阅-发布”的设计模式，而异步操作却没有。
+
+## 我的观点
+
+我个人看代码比较偏重设计，一个东西是什么要看它是未什么而设计的。因此，我倾向于**事件绑定不是异步操作**。虽然它也是通过 event-loop 实现调用的，但是它的设计目录却和异步操作完全不一样。
+
+其实，事件绑定在 js 中扮演着非常重要的角色，各个地方都会用到事件绑定的形式。例如 web 页面监控鼠标、键盘，以及 nodejs 中的 `EventEmitter` 应用非常广泛（特别是涉及到数据流时）。而事件绑定被应用到非常广泛，却没有发生像异步操作带来的程序逻辑问题，反而大家用的非常开心————这又一个两者不一样的例证。
+
+如果你觉得我的观点有问题，也可以大胆提出自己的建议和意见，发表出来！说对说错都无所谓，也不会扣你落户积分，只要能自圆其说就是好的。
+
+## 求打赏
+
+如果你看完了，感觉还不错，欢迎给我打赏 ———— 以激励我更多输出优质内容
+
+![](http://images2015.cnblogs.com/blog/138012/201702/138012-20170228112237798-1507196643.png)
+

part1-basic/03-event-bind.md

@@ -0,0 +1,98 @@
+# jQuery-1.5 之后的 ajax
+
+`$.ajax`这个函数各位应该都比较熟悉了，要完整的讲解 js 的异步操作，就必须先从`$.ajax`这个方法说起。
+
+想要学到全面的知识，大家就不要着急，跟随我的节奏来，并且相信我。我安排的内容，肯定都是有用的，对主题无用的东西，我不会拿来占用大家的时间。
+
+## 本节内容概述
+
+- 传统的`$.ajax`
+- 1.5 版本之后的`$.ajax`
+- 改进之后的好处
+- 和后来的`Promise`的关系
+- 如何实现的？
+
+## 传统的`$.ajax`
+
+先来一段最常见的`$.ajax`的代码，当然是使用万恶的`callback`方式
+
+```javascript
+var ajax = $.ajax({
+    url: 'data.json',
+    success: function () {
+        console.log('success')
+    },
+    error: function () {
+        console.log('error')
+    }
+})
+
+console.log(ajax) // 返回一个 XHR 对象
+
+```
+
+至于这么做会产生什么样子的诟病，我想大家应该都很明白了。不明白的自己私下去查，但是你也可以继续往下看，你只需要记住这样做很不好就是了，要不然 jquery 也不会再后面进行改进
+
+## 1.5 版本之后的`$.ajax`
+
+但是从`v1.5`开始，以上代码就可以这样写了：可以链式的执行`done`或者`fail`方法
+
+```javascript
+var ajax = $.ajax('data.json')
+ajax.done(function () {
+        console.log('success 1')
+    })
+    .fail(function () {
+        console.log('error')
+    })
+    .done(function () {
+         console.log('success 2')
+    })
+
+console.log(ajax) // 返回一个 deferred 对象
+```
+
+大家注意看以上两段代码中都有一个`console.log(ajax)`，但是返回值是完全不一样的。
+
+- `v1.5`之前，返回的是一个`XHR`对象，这个对象不可能有`done`或者`fail`的方法的
+- `v1.5`开始，返回一个`deferred`对象，这个对象就带有`done`和`fail`的方法，并且是等着请求返回之后再去调用
+
+## 改进之后的好处
+
+这是一个标志性的改造，不管这个概念是谁最先提出的，它在 jquery 中首先大量使用并让全球开发者都知道原来 ajax 请求还可以这样写。这为以后的`Promise`标准制定提供了很大意义的参考，你可以以为这就是后面`Promise`的原型。
+
+记住一句话————**虽然 JS 是异步执行的语言，但是人的思维是同步的**————因此，开发者总是在寻求如何使用逻辑上看似同步的代码来完成 JS 的异步请求。而 jquery 的这一次更新，让开发者在一定程度上得到了这样的好处。
+
+之前无论是什么操作，我都需要一股脑写到`callback`中，现在不用了。现在成功了就写到`done`中，失败了就写到`fail`中，如果成功了有多个步骤的操作，那我就写很多个`done`，然后链式连接起来就 OK 了。
+
+## 和后来的`Promise`的关系
+
+以上的这段代码，我们还可以这样写。即不用`done`和`fail`函数，而是用`then`函数。`then`函数的第一个参数是成功之后执行的函数（即之前的`done`），第二个参数是失败之后执行的函数（即之前的`fail`）。而且`then`函数还可以链式连接。
+
+```javascript
+var ajax = $.ajax('data.json')
+ajax.then(function () {
+        console.log('success 1')
+    }, function () {
+        console.log('error 1')
+    })
+    .then(function () {
+        console.log('success 2')
+    }, function () {
+        console.log('error 2')
+    })
+```
+
+如果你对现在 ES6 的`Promise`有了解，应该能看出其中的相似之处。不了解也没关系，你只需要知道它已经和`Promise`比较接近了。后面马上会去讲`Promise`
+
+## 如何实现的？
+
+明眼人都知道，jquery 不可能改变异步操作需要`callback`的本质，它只不过是自己定义了一些特殊的 API，并对异步操作的`callback`进行了封装而已。
+
+那么 jquery 是如何实现这一步的呢？请听下回分解！
+
+## 求打赏
+
+如果你看完了，感觉还不错，欢迎给我打赏 ———— 以激励我更多输出优质内容
+
+![](http://images2015.cnblogs.com/blog/138012/201702/138012-20170228112237798-1507196643.png)

part2-jquery/01-jquery-ajax.md

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>jquery test</title>
+</head>
+<body>
+    <p>jquery test</p>
+    
+    <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
+    <script type="text/javascript">
+        
+        var ajax = $.ajax({
+            url: '/data/data1.json',
+            success: function () {
+                console.log('success')
+            },
+            error: function () {
+                console.log('error')
+            }
+        })
+        console.log(ajax)
+
+    </script>
+</body>
+</html>