update

Author: amaler

part2-jquery/02-jquery-deferred.md

@@ -0,0 +1,119 @@
+# jQuery deferred
+
+上一节讲到 jquery v1.5 版本开始，`$.ajax`可以使用类似当前`Promise`的`then`函数以及链式操作。那么它到底是如何实现的呢？在此之前所用到的`callback`在这其中又起到了什么作用？本节给出答案
+
+本节使用的代码参见[这里](./test.html)
+
+## 本节内容概述
+
+- 写一个传统的异步操作
+- 使用`$.Deferred`封装
+- 应用`then`方法
+- 有什么问题？
+
+## 写一个传统的异步操作
+
+给出一段非常简单的异步操作代码，使用`setTimeout`函数。
+
+```javascript
+var wait = function () {
+    var task = function () {
+        console.log('执行完成')
+    }
+    setTimeout(task, 2000)
+}
+wait()
+```
+
+以上这些代码执行的结果大家应该都比较明确了，即 2s 之后打印出`执行完成`。**但是我如果再加一个需求 ———— 要在执行完成之后进行某些特别复杂的操作，代码可能会很多，而且分好几个步骤 ———— 那该怎么办？** 大家思考一下！
+
+如果你不看下面的内容，而且目前还没有`Promise`的这个思维，那估计你会说：直接在`task`函数中写就是了！不过相信你看完下面的内容之后，会放弃你现在的想法。
+
+## 使用`$.Deferred`封装
+
+好，接下来我们让刚才简单的几行代码变得更加复杂。**为何要变得更加复杂？是因为让以后更加复杂的地方变得简单**。这里我们使用了 jquery 的`$.Deferred`，至于这个是个什么鬼，大家先不用关心，**只需要知道`$.Deferred()`会返回一个`deferred`对象**，先看代码，`deferred`对象的作用我们会面会说。
+
+```javascript
+function waitHandle() {
+    var dtd = $.Deferred()  // 创建一个 deferred 对象
+
+    var wait = function (dtd) {  // 要求传入一个 deferred 对象
+        var task = function () {
+            console.log('执行完成')
+            dtd.resolve()  // 表示异步任务已经完成
+        }
+        setTimeout(task, 2000)
+        return dtd  // 要求返回 deferred 对象
+    }
+
+    // 注意，这里一定要有返回值
+    return wait(dtd)
+}
+```
+
+以上代码中，又使用一个`waitHandle`方法对`wait`方法进行再次的封装。`waitHandle`内部代码，我们分步骤来分析。跟着我的节奏慢慢来，保证你不会乱。
+
+- 使用`var dtd = $.Deferred()`创建`deferred`对象。通过上一节我们知道，一个`deferred`对象会有`done` `fail`和`then`方法（不明白的去看上一节）
+- 重新定义`wait`函数，但是：第一，要传入一个`deferred`对象（`dtd`参数）；第二，当`task`函数（即`callback`）执行完成之后，要执行`dtd.resolve()`告诉传入的`deferred`对象，革命已经成功。第三；将这个`deferred`对象返回。
+- 返回`wait(dtd)`的执行结果。因为`wait`函数中返回的是一个`deferred`对象（`dtd`参数），因此`wait(dtd)`返回的就是`dtd`————如果你感觉这里很乱，没关系，慢慢捋，一行一行看，相信两三分钟就能捋顺！
+
+最后总结一下，`waitHandle`函数最终`return wait(dtd)`即最终返回`dtd`（一个`deferred`）对象。针对一个`deferred`对象，它有`done` `fail`和`then`方法（上一节说过），它还有`resolve()`方法（其实和`resolve`相对的还有一个`reject`方法，后面会提到）
+
+
+## 应用`then`方法
+
+接着上面的代码继续写
+
+```javascript
+var w = waitHandle()
+w.then(function () {
+    console.log('ok 1')
+}, function () {
+    console.log('err 1')
+}).then(function () {
+    console.log('ok 2')
+}, function () {
+    console.log('err 2')
+})
+```
+
+上面已经说过，`waitHandle`函数最终返回一个`deferred`对象，而`deferred`对象具有`done` `fail` `then`方法，现在我们正在使用的是`then`方法。至于`then`方法的作用，我们上一节已经讲过了，不明白的同学抓紧回去补课。
+
+执行这段代码，我们打印出来以下结果。可以将结果对标以下代码时哪一行。
+
+```
+执行完成
+ok 1
+ok 2
+```
+
+此时，你再回头想想我刚才说提出的需求（*要在执行完成之后进行某些特别复杂的操作，代码可能会很多，而且分好几个步骤*），是不是有更好的解决方案了？
+
+有同学肯定发现了，代码中`console.log('err 1')`和`console.log('err 2')`什么时候会执行呢 ———— 你自己把`waitHandle`函数中的`dtd.resolve()`改成`dtd.reject()`试一下就知道了。
+
+- `dtd.resolve()` 表示革命已经成功，会触发`then`中第一个参数（函数）的执行，
+- `dtd.reject()` 表示革命失败了，会触发`then`中第二个参数（函数）执行
+
+## 有什么问题？
+
+总结一下一个`deferred`对象具有的函数属性，并分为两组：
+
+- `dtd.resolve` `dtd.reject`
+- `dtd.then` `dtd.done` `dtd.fail`
+
+我为何要分成两组 ———— 这两组函数，从设计到执行之后的效果是完全不一样的。第一组是主动触发用来改变状态（成功或者失败），第二组是状态变化之后才会触发的监听函数。
+
+既然是完全不同的两组函数，就应该彻底的分开，否则很容易出现问题。例如，你在刚才执行代码的最后加上这么一行试试。
+
+```javascript
+w.reject()
+```
+
+那么如何解决这一个问题？请听下回分解！
+
+## 求打赏
+
+如果你看完了，感觉还不错，欢迎给我打赏 ———— 以激励我更多输出优质内容
+
+![](http://images2015.cnblogs.com/blog/138012/201702/138012-20170228112237798-1507196643.png)
+

part2-jquery/03-jquery-promise.md

@@ -0,0 +1,64 @@
+# jQuery promise
+
+上一节通过一些代码演示，知道了 jquery 的`deferred`对象是解决了异步中`callback`函数的问题，但是
+
+## 本节内容概述
+
+- 返回`promise`
+- 返回`promise`的好处
+- promise 的概念
+
+## 返回`promise`
+
+我们对上一节的的代码做一点小小的改动，只改动了一行，下面注释。
+
+```javascript
+function waitHandle() {
+    var dtd = $.Deferred()
+    var wait = function (dtd) {
+        var task = function () {
+            console.log('执行完成')
+            dtd.resolve()
+        }
+        setTimeout(task, 2000)
+        return dtd.promise()  // 注意，这里返回的是 primise 而不是直接返回 deferred 对象
+    }
+    return wait(dtd)
+}
+
+var w = waitHandle() // 经过上面的改动，w 接收的就是一个 promise 对象
+$.when(w)
+ .then(function () {
+    console.log('ok 1')
+ })
+ .then(function () {
+    console.log('ok 2')
+ })
+```
+
+改动的一行在这里`return dtd.promise()`，之前是`return dtd`。`dtd`是一个`deferred`对象，而`dtd.promise`就是一个`promise`对象。
+
+`promise`对象和`deferred`对象最重要的区别，记住了————**`promise`对象相比于`deferred`对象，缺少了`.resolve`和`.reject`这俩函数属性**。这么一来，可就完全不一样了。
+
+上一节我们提到一个问题，就是在程序的最后一行加一句`w.reject()`会导致乱套，你现在再在最后一行加`w.reject()`试试 ———— 保证乱套不了 ———— 而是你的程序不能执行，直接报错。因为，`w`是`promise`对象，不具备`.reject`属性。
+
+## 返回`promise`的好处
+
+上一节提到`deferred`对象有两组属性函数，而且提到应该把这两组彻底分开。现在通过上面一行代码的改动，就分开了。
+
+- `waitHandle`函数内部，使用`dtd.resolve()`来该表状态，做主动的修改操作
+- `waitHandle`最终返回`promise`对象，只能去被动监听变化（`then`函数），而不能去主动修改操作
+
+一个“主动”一个“被动”，完全分开了。
+
+## promise 的概念
+
+jquery v1.5 版本发布时间距离现在（2017年初春）已经老早之前了，那会儿大家网页标配都是 jquery 。无论里面的`deferred`和`promise`这个概念和想法最早是哪位提出来的，但是最早展示给全世界开发者的是 jquery ，这算是`Promise`这一概念最先的提出者。
+
+其实本次课程主要是给大家分析 ES6 的`Promise` `Generator`和`async-await`，但是为何要从 jquery 开始（大家现在用 jquery 越来越少）？就是要给大家展示一下这段历史的一些起点和发展的知识。有了这些基础，你再去接受最新的概念会非常容易，因为所有的东西都是从最初顺其自然发展进化而来的，我们要去用一个发展进化的眼光学习知识，而不是死记硬背。
+
+## 求打赏
+
+如果你看完了，感觉还不错，欢迎给我打赏 ———— 以激励我更多输出优质内容
+
+![](http://images2015.cnblogs.com/blog/138012/201702/138012-20170228112237798-1507196643.png)

part2-jquery/test.html

@@ -10,16 +10,81 @@
     <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')
+        // -------- 打印 $.ajax 返回值 -------
+        function fn1() {
+            var ajax = $.ajax({
+                url: '/data/data1.json',
+                success: function () {
+                    console.log('success')
+                },
+                error: function () {
+                    console.log('error')
+                }
+            })
+            console.log(ajax)
+        }
+        // fn1()
+        
+
+        // -------- 使用 $.Deferred() --------
+        function fn2() {
+            function waitHandle() {
+                var dtd = $.Deferred()  // 创建一个 deferred 对象
+                var wait = function (dtd) {  // 要求传入一个 deferred 对象
+                    var task = function () {
+                        console.log('执行完成')
+                        dtd.resolve()  // 改变 deferred 对象的执行状态
+                    }
+                    setTimeout(task, 2000)
+                    return dtd  // 要求返回 deferred 对象
+                }
+                return wait(dtd)
+            }
+            var w = waitHandle()
+            w.then(function () {
+                console.log('ok 1')
+            }, function () {
+                console.log('err 1')
+            }).then(function () {
+                console.log('ok 2')
+            }, function () {
+                console.log('err 2')
+            })
+
+            // deferred 对象直接暴露出来，很容易出现问题，如下代码
+            // w.reject()
+        }
+        // fn2()
+
+        // ------- 优化 返回 promise ------
+        function fn3() {
+            
+            function waitHandle() {
+                var dtd = $.Deferred()
+                var wait = function (dtd) {
+                    var task = function () {
+                        console.log('执行完成')
+                        dtd.resolve()
+                    }
+                    setTimeout(task, 2000)
+                    return dtd.promise()  // 注意，这里返回的是 primise 而不是直接返回 deferred 对象
+                }
+                return wait(dtd)
             }
-        })
-        console.log(ajax)
+
+            var w = waitHandle()
+            $.when(w)
+             .then(function () { 
+                console.log('ok 1')
+             })
+             .then(function () {
+                console.log('ok 2')
+             })
+
+             // w.resolve()  // 如果这里再想执行 resolve 就会直接报错，这样就避免了以上提出的问题
+
+        }
+        fn3()
 
     </script>
 </body>