jQuery中的deferred对象和extend方法详解


Posted in jQuery onMay 08, 2017

1 deferred对象

deferred对象是jQuery的回调函数解决方案,它是从jQuery1.5.0版本开始引入的功能

deferred对象的方法

(1) $.Deferred() 生成一个deferred对象。

(2) deferred.done() 指定操作成功时的回调函数

(3) deferred.fail() 指定操作失败时的回调函数

(4) deferred.promise() 没有参数时,返回一个新的deferred对象,该对象的运行状态无法被改变;接受参数时,作用为在参数对象上部署deferred接口。

(5) deferred.resolve() 手动改变deferred对象的运行状态为"已完成",从而立即触发done()方法。

(6)deferred.reject() 这个方法与deferred.resolve()正好相反,调用后将deferred对象的运行状态变为"已失败",从而立即触发fail()方法

(7) $.when() 为多个操作指定回调函数。

除了这些方法以外,deferred对象还有二个重要方法,上面的教程中没有涉及到。

(8)deferred.then()

有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。

$.when($.ajax( "/main.php" ))

.then(successFunc, failureFunc );

如果then()有两个参数,那么第一个参数是done()方法的回调函数,第二个参数是fail()方法的回调方法。如果then()只有一个参数,那么等同于done()。

(9)deferred.always()

这个方法也是用来指定回调函数的,它的作用是,不管调用的是deferred.resolve()还是deferred.reject(),最后总是执行。

$.ajax( "test.html" )
.always( function() { alert("已执行!");} );

来点儿

1)ajax操作的链式写法

先回顾一下jQuery的ajax操作的传统写法:

$.ajax({


url: "test.html",



success: function(){



alert("哈哈,成功了!");


},



error:function(){



alert("出错啦!");


}

});

在上面的代码中,$.ajax()接受一个对象参数,这个对象包含两个方法:success方法指定操作成功后的回调函数,error方法指定操作失败后的回调函数。

$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

有了deferred对象之后,可以这样写了

$.ajax("test.html")

.done(function(){ alert("哈哈,成功了!"); })

.fail(function(){ alert("出错啦!"); });

上面代码中的done()相当于success方法,fail()相当于error方法。采用链式写法以后,代码的可读性大大提高。

2)指定同一操作的多个回调函数

deferred对象的一大好处,就是它允许你自由添加多个回调函数。

还是以上面的代码为例,如果ajax操作成功后,除了原来的回调函数,我还想再运行一个回调函数,怎么办?

很简单,直接把它加在后面就行了。

$.ajax("test.html")

.done(function(){ alert("哈哈,成功了!");} )


.fail(function(){ alert("出错啦!"); } )

.done(function(){ alert("第二个回调函数!");} );

回调函数可以添加任意多个,它们按照添加顺序执行。

3)为多个操作指定回调函数

deferred对象的另一大好处,就是它允许你为多个事件指定一个回调函数,这是传统写法做不到的。

请看下面的代码,它用到了一个新的方法$.when():

$.when($.ajax("test1.html"), $.ajax("test2.html"))

.done(function(){ alert("哈哈,成功了!"); })

.fail(function(){ alert("出错啦!"); });

这段代码的意思是,先执行两个操作$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。

4)普通操作的回调函数接口(上)

deferred对象的最大优点,就是它把这一套回调函数接口,从ajax操作扩展到了所有操作。也就是说,任何一个操作----不管是ajax操作还是本地操作,也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法,指定回调函数。

我们来看一个具体的例子。假定有一个很耗时的操作wait:

var wait = function(){


var tasks = function(){




alert("执行完毕!");



};



setTimeout(tasks,5000);

};

我们为它指定回调函数,应该怎么做呢?

很自然的,你会想到,可以使用$.when():

$.when(wait())

.done(function(){ alert("哈哈,成功了!"); })

.fail(function(){ alert("出错啦!"); });

但是,这样写的话,done()方法会立即执行,起不到回调函数的作用。原因在于$.when()的参数只能是deferred对象,所以必须对wait()进行改写:

var dtd = $.Deferred(); // 新建一个deferred对象

var wait = function(dtd){



var tasks = function(){




alert("执行完毕!");




dtd.resolve(); // 改变deferred对象的执行状态



};



setTimeout(tasks,5000);



return dtd;

};

现在,wait()函数返回的是deferred对象,这就可以加上链式操作了。

$.when(wait(dtd))

.done(function(){ alert("哈哈,成功了!"); })

.fail(function(){ alert("出错啦!"); });

wait()函数运行完,就会自动运行done()方法指定的回调函数。

5)deferred.resolve()方法和deferred.reject()方法 

jQuery规定,deferred对象有三种执行状态----未完成,已完成和已失败。如果执行状态是"已完成"(resolved),deferred对象立刻调用done()方法指定的回调函数;如果执行状态是"已失败",调用fail()方法指定的回调函数;如果执行状态是"未完成",则继

续等待,或者调用progress()方法指定的回调函数(jQuery1.7版本添加)。

前面部分的ajax操作时,deferred对象会根据返回结果,自动改变自身的执行状态;但是,在wait()函数中,这个执行状态必须由程序员手动指定。dtd.resolve()的意思是,将dtd对象的执行状态从"未完成"改为"已完成",从而触发done()方法。

类似的,还存在一个deferred.reject()方法,作用是将dtd对象的执行状态从"未完成"改为"已失败",从而触发fail()方法。

var dtd = $.Deferred(); // 新建一个Deferred对象

var wait = function(dtd){



var tasks = function(){




alert("执行完毕!");




dtd.reject(); // 改变Deferred对象的执行状态



};



setTimeout(tasks,5000);



return dtd;


};


$.when(wait(dtd))


.done(function(){ alert("哈哈,成功了!"); })
  .fail(function(){ alert("出错啦!"); });

6)deferred.promise()方法

上面这种写法,还是有问题。那就是dtd是一个全局对象,所以它的执行状态可以从外部改变。

请看下面的代码:

var dtd = $.Deferred(); // 新建一个Deferred对象

var wait = function(dtd){



var tasks = function(){




alert("执行完毕!");




dtd.resolve(); // 改变Deferred对象的执行状态



};



setTimeout(tasks,5000);



return dtd;


};


$.when(wait(dtd))


.done(function(){ alert("哈哈,成功了!"); })


.fail(function(){ alert("出错啦!"); });

dtd.resolve();

我在代码的尾部加了一行dtd.resolve(),这就改变了dtd对象的执行状态,因此导致done()方法立刻执行,跳出"哈哈,成功了!"的提示框,等5秒之后再跳出"执行完毕!"的提示框。

为了避免这种情况,jQuery提供了deferred.promise()方法。它的作用是,在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和

reject()方法),从而使得执行状态不能被改变。

请看下面的代码:

var dtd = $.Deferred(); // 新建一个Deferred对象

var wait = function(dtd){



var tasks = function(){




alert("执行完毕!");




dtd.resolve(); // 改变Deferred对象的执行状态



};



setTimeout(tasks,5000);



return dtd.promise(); // 返回promise对象


};


var d = wait(dtd); // 新建一个d对象,改为对这个对象进行操作


$.when(d)


.done(function(){ alert("哈哈,成功了!"); })


.fail(function(){ alert("出错啦!"); });

d.resolve(); // 此时,这个语句是无效的

在上面的这段代码中,wait()函数返回的是promise对象。然后,我们把回调函数绑定在这个对象上面,而不是原来的deferred对象上面。这样的好处是,无法改变这个对象的执行状态,要想改变执行状态,只能操作原来的deferred对象。

不过,更好的写法是将dtd对象变成wait()函数的内部对象。

var wait = function(dtd){


var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象



var tasks = function(){




alert("执行完毕!");




dtd.resolve(); // 改变Deferred对象的执行状态



};



setTimeout(tasks,5000);



return dtd.promise(); // 返回promise对象


};


$.when(wait())


.done(function(){ alert("哈哈,成功了!"); })

.fail(function(){ alert("出错啦!"); });

7)普通操作的回调函数接口(中)

另一种防止执行状态被外部改变的方法,是使用deferred对象的建构函数$.Deferred()。

这时,wait函数还是保持不变,我们直接把它传入$.Deferred():

$.Deferred(wait)
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });

jQuery规定,$.Deferred()可以接受一个函数名(注意,是函数名)作为参数,$.Deferred()所生成的deferred对象将作为这个函数的默认参数。

8)普通操作的回调函数接口(下)

除了上面两种方法以外,我们还可以直接在wait对象上部署deferred接口。

var dtd = $.Deferred(); // 生成Deferred对象

var wait = function(dtd){



var tasks = function(){




alert("执行完毕!");




dtd.resolve(); // 改变Deferred对象的执行状态



};



setTimeout(tasks,5000);


};


dtd.promise(wait);


wait.done(function(){ alert("哈哈,成功了!"); })


.fail(function(){ alert("出错啦!"); });

wait(dtd);

这里的关键是dtd.promise(wait)这一行,它的作用就是在wait对象上部署Deferred接口。正是因为有了这一行,后面才能直接在wait上面调用done()和fail()。

2 extend方法

JQuery的extend扩展方法:

Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。

1)Jquery的扩展方法原型是:

 

extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的结果

result={name:"Jerry",age:21,sex:"Boy"}

也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

2)省略dest参数

上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:

$.extend(src)

该方法就是将src合并到jquery的全局对象中去,如:

$.extend({
hello:function(){alert('hello');}
});

就是将hello方法合并到jquery的全局对象中。

$.fn.extend(src)

该方法将src合并到jquery的实例对象中去,如:

$.fn.extend({
hello:function(){alert('hello');}
});

就是将hello方法合并到jquery的实例对象中。

下面例举几个常用的扩展实例:

$.extend({net:{}});

这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{
hello:function(){alert('hello');}
})

这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

3)Jquery的extend方法还有一个重载原型: 

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true, {}, 
{ name: "John", location: {city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } );

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:

result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}

也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

var result=$.extend( false, {}, 
{ name: "John", location:{city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } 
);

那么合并后的结果就是:

result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

以上是网上看到的两篇分别对jQuery中的deferred对象和extend方法的介绍,感觉比较详细而且容易理解,所以把它们整理到一起与大家分享!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 #jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
jQuery extend()详解及简单实例
May 06 #jQuery
jquery仿微信聊天界面
May 06 #jQuery
简单实现jQuery弹幕效果
May 06 #jQuery
jquery实现提示语淡入效果
May 05 #jQuery
You might like
php的ajax简单实例
2014/02/27 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
如何运行Python程序的方法
2013/04/21 Python
python实现socket客户端和服务端简单示例
2014/02/24 Python
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Linux下多个Python版本安装教程
2018/08/15 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
numpy库reshape用法详解
2020/04/19 Python
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
应聘自荐书
2013/10/08 职场文书
幼师自我鉴定
2014/02/01 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
五一活动标语
2014/06/30 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
Java对文件的读写操作方法
2022/04/29 Java/Android