1.jQueryä¸çDeferredåpromise çåºå«
2.手写一个(jQuery版)ajax
3.JQuery 的 deferred . promise对象
4.jQuery中的Deferred和promise 的区别
jQueryä¸çDeferredåpromise çåºå«
Deferred å Promise
ES6 å jQuery é½æ Deffered å Promiseï¼ä½æ¯ç¥æä¸åãä¸è¿å®ä»¬çä½ç¨å¯ä»¥ç®åçç¨ä¸¤å¥è¯æ¥æè¿°
Deffered 触å resolve æ reject
Promise ä¸ç³æ resolve æ reject ååºè¯¥åä»ä¹ï¼åè°ï¼
å¨ jQuery ä¸
var deferred = $.Deferred(); var promise = deferred.promise();
å¨ ES6 ä¸
var deferred = Promise.defer(); var promise= defered.promise;
MDN å®£å¸ Deferred å¨ Gecko ä¸è¢«ç³æ为è¿æï¼ä¸åºè¯¥å使ç¨ï¼èåºè¯¥ç¨ new Promise() æ¥ä»£æ¿ãå ³äº new Promise() å°å¨åé¢è¯´æã
jQuery ç Deferred/Promise
jQuery ä¸æ常ç¨ç Promise å¯¹è±¡æ¯ $.ajax() è¿åçï¼æ常ç¨çæ¹æ³ä¸æ¯ then ï¼èæ¯ done ã fail å always ãé¤äº $.ajax() å¤ï¼jQuery ä¹æä¾äº $.get() ã $.post() å $.getJSON() çç®å Ajax è°ç¨ï¼å®ä»¬è¿åçå $.ajax() çè¿åå¼ä¸æ ·ï¼æ¯ä¸ª Promise 对象ã
å®é ä¸ $.ajax() è¿åçæ¯ä¸ä¸ª jqXHR 对象 ãä½ jqXHR å®ç°äº jQuery ç Promise æ¥å£ï¼æ以ä¹æ¯ä¸ä¸ª Promise 对象ã
done() ã fail() å always()
done() æ·»å deferred.resolve() çåè°ï¼ fail() æ·»å deferred.reject() çåè°ãæä»¥å¨ Ajax è°ç¨æåçæ åµä¸æ§è¡ done() æ·»å çåè°ï¼è°ç¨å¤±è´¥æ¶æ§è¡ fail() æ·»å çåè°ãä½ä¸ç®¡æåä¸å¦ï¼é½ä¼æ§è¡ always() æ·»å çåè°ã
è¿é done() ã fail() å always() é½æ¯ä»¥ç±»ä¼¼äºä»¶çæ¹å¼æ·»å åè°ï¼ä¹å°±æå³çï¼ä¸ç®¡æ§è¡å¤æ¬¡æ¬¡ done() ã fail() æ always() ï¼å®ä»¬æ·»å çè¥å¹²åè°é½ä¼å¨ç¬¦åçæ¡ä»¶ä¸ä¾æ¬¡æ§è¡ã
ä¸è¬æ åµä¸ä¼è¿æ ·æ§è¡ Ajax
// ç¦ç¨æé®ä»¥é¿å éå¤æ交 $("#theButton").prop({ disabled: true }); // è°ç¨ Ajax æ交æ°æ®ï¼å设è¿åçæ¯ JSON æ°æ® var jqxhr = $.ajax("do/example", { type: "post", dataType: "json", data: getFormData() }); jqxhr.done(function(jsonObject) { // Ajax è°ç¨æå console.log("success with data", jsonObject); }).fail(function() { // Ajax è°ç¨å¤±è´¥ console.log("failed") }).always(function() { // ä¸ç®¡æåä¸å¦ï¼é½ä¼æ§è¡ï¼åæ¶æé®çç¦ç¨ç¶æ $("#theButton").prop({ disabled: false }); });
ä¸é¢æ¯ææ®éæ常ç¨çç¨æ³ï¼ä½æ¯å¨ä¸ä¸ªé¡¹ç®ä¸æ»æ¯è¿ä¹å Ajaxï¼æç¹ç´¯ï¼ç¨å¾®çº¦å®ä¸ä¸åå°è£ ä¸ä¸å°±ä½¿ç¨èµ·æ¥å°±ä¼ä¾¿æ·å¾å¤ãé¦å ï¼å设æ们å®ä¹è¿åç JSON æ¯è¿æ ·çæ ¼å¼ï¼
{ "code": "int, 0 表示æåï¼å ¶å®å¼è¡¨ç¤ºåºé", "message": "string, éå çæ¶æ¯ï¼å¯é", "data": "objectï¼éå çæ°æ®ï¼å¯é }
ç¶å为项ç®å ¬å ±ç±» app å®ä¹ä¸ä¸ª ajax æ¹æ³
app.ajax = function(button, url, data) { if (button) { button.prop("disabled", true); } return $.ajax(url, { type: "post", dataType: "json", data: data }).done(function(json) [ if (json.code !== 0) { showError(json.message || "æä½åçé误"); } }).fail(function() { showError("æå¡å¨é误ï¼è¯·ç¨ååè¯"); }).always(function() { if (button) { button.prop("disabled", false); } }); }; // è°ç¨ app.ajax("do/example", getFormData().done(function(json) { if (json.code === 0) { // åªéè¦å¤çæ£ç¡®çæ åµå¦ } });
手写一个(jQuery版)ajax
手工实现ajax,基于先前的原生js实现jsonp和ajax文章,我们只需对原生js进行优化,形成简洁的api。(因此,本文的板块资金 源码实现将从原生版ajax开始。)
阅读本文后,你将掌握以下内容:
1.通过对象传参的方式简化参数表
2.使用ES6的解构赋值去除冗余
3.通过Promise和then分离参数表中的函数
4.应用上述技巧
5.其他相关知识点
一、对象传参套路
1.当函数拥有多个参数时,调用可能不够直观,难以理解每个参数的具体含义
例如:process(null, 1, null, 2, null, null, null, 3)
这时可以考虑将参数打包成具有结构的对象,传递一个对象参数
使用对象传参的优势在于,逻辑更加清晰,无需考虑参数的具体位置,参数的对应关系可以直接从键值对中解析。此外,扩展更加简单。
细节:在传参时,通常将形式参数命名为options。网站源码小刀
2.效果:
before:多个参数传入
after:一个对象传入
二、ES6语法:解构赋值与交换赋值
1.解构赋值
若对象options = { key1: value1, key2:value2, key3:value3}
则可以通过以下语句一次性获取options内部的三个值
2.交换赋值
顾名思义,就是将两个变量的值进行交换。在ES6之前,可能需要写3句代码,而在ES6中只需一句。
三、then与Promise
1.then
使用jQuery的ajax函数时,可以将参数对象的财务统计源码函数(sucess,failure)通过then传入。
then的语法:
2.Promise
Promise是window的一个全局函数,是构造then的关键。
语法:
四、手写一个jQuery版ajax
这里从上一篇文章的原生版ajax出发,利用本文提到的三个技巧逐步优化,形成jQuery风格的ajax
五、其他小知识
1.前端中文文档集合(上哪找文档?)
cndevdocs.com
2.一个函数如何接受两种参数个数?(参数个数的重载)
比如:函数f可以这样调用f(var1),也可以f(var1, var2)
a : 很简单,判断arguments.length即可
3.XHR设置请求与获取响应
设置请求:
第一部分: xhr.open('get',论文检索 源码 '/xxx')
第二部分: xhr.setHeader('content-type', 'x-www-form-urlencoded')
第四部分: xhr.send('a=1&b=2')
获取响应:
第一部分: xhr.status / xhr.statusText
第二部分: xhr.getResponseHeader() / xhr.getAllResponseHeaders()
第四部分: xhr.responseText
JQuery 的 deferred . promise对象
你说的这段描述是对 jQuery(selector).promise()的描述,并不是 jQuery.Deferred() 的描述。原文是:
Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.而这段话是说:
jQuery(selector).promise() 函数是返回一个 Promise 对象,这个对象的作用是当绑定到集合也就是$('div')这样取到的集合的指定类型的所有动作(promise方法的第一个参数 type ,默认是fx,也就是动画)是否已经完成了。英文水平有限,有些地方看不怎么懂,这话说得有点乱,不过意思应该是源码后设置这样的,举个例子:
$('#message').animate({ width:, height:}, )
.promise()
.done(function(){
console.log('animate end');
});
也可以写成:
$('#message').animate({ width:, height:}, );var promise = $('#message').promise();
promise.done(function(){
console.log('animate end');
});
这里的 $('#message') 就是所说的collection,
而动画 animate (即 fx)就是 certain type,
里面的所有动作就是 action queue,当然,这里只有1个,就是默认的fx (但是文档中没有找到介绍其它的类型)。
后面的 var promise = xxx 就是指返回的 Promise对象,这个对象在收到animate 方法里面的信号(这个信号包括 resolve, reject, notify, resolveWith, rejectWith, and notifyWith等)可以调用方法done(当然还有不少其它的方法,这里没用到就不说了,自己看文档吧),然后执行done的回调函数了。
animate方法会自己发送promise的信号,不用手动去处理。具体细节可以参考 jQuery.Deferred() 方法,在API的介绍中有这个方法的使用示例。
需要注意的是, jQuery(selector).promise()和jQuery.Deferred().promise()是不一样的。
从目前我知道的来说,jQuery(selector).promise() 是专门用来处理jquery中的动画(animate)使用的,而jQuery.Deferred().promise()使用的范围更广,没看源码,不过猜一下,我觉得 jQuery(selector).promise()是jQuery在动画的时候对jQuery.Deferred().promise()的特殊实现(或者叫做功能封装)。
然后再说一下jQuery.Deferred().promise()吧。它的一般用法为:
var defer= $.Deferred();$.when(defer.promise()).then<done|fail|....>(参数...)
defer.resolve('传参数或留空');
defer.reject('传参数或留空');
defer.notify('传参数或留空');
// ..... 其它信号
实例请自己去看API页面。
上面的defer是一个延迟对象(deferred)引用,表示这个对象的信号会在将来发出。
接下来的 $.when(defer.promise()) 是指jQuery 要监视 defer的信号,收到信号后执行后面的then(或者done, fail或其它)的函数。而后面的defer.resolve<reject|notify>则是发出信号,通知jQuery延迟调用已经执行了,jQuery收到信号后,就去调用这个延迟的promise()后面的函数。
jQuery中的Deferred和promise 的区别
一个promise就是一个由异步函数返回的对象。
deferred对象就是jQuery的回调函数解决方案。
总结
jQuery
的ajax
就是返回一个promise
对象,里面含有done(),
fail()方法;
deferred
就是实现返回这个promise
对象的过程。