jQuery 1.5最新版本的改进细节分析


Posted in Javascript onJanuary 19, 2011

这个1.5版本最大的更新是AJAX的完全重写,提供了更强的可扩展性。但是受制于精力和篇幅,对新的AJAX的分析还是放到下回,本篇先简单介绍一下细节方面的改进。

jQuery._Deferred和jQuery.Deferred
首先不得不说这两个新生事物,因为他们是作为基础设施存在,不把这两个东西讲明白了,有些问题根本没办法解释。

首先,jQuery.Deferred是jQuery._Deferred的增强版,因此对于这个问题,从jQuery._Deferred入手,就能说明一大半的问题。

什么是Deferred?从字面上看,我的第一反应是“延迟加载”,首字母大写的应该是“类型”的定义,所以这大概是一个“透明提供延迟加载功能”的类型吧。然而实际上,虽然确实带有那么一点点“延迟”的意思,这个东西却不是用来实现延迟加载的。

简单来说,jQuery._Deferred是一个函数队列,他的作用有以下几点:

保存若干个函数。
在特定的时刻把保存着的函数全部执行掉。
执行过后,新进来的函数会立刻执行。
感觉是不是和啥东西很像?对,jQuery的ready函数就是这样的逻辑,实际中jQuery 1.5中的ready函数也确实被嫁接到这上面去了。

jQuery._Deferred提供下面的接口:

done:function(fn1, fn2, ...)的形式,用于把函数添加到队列中。
fire:function(context, args)的形式,使用context指定this对象,args指定参数,调用队列中所有函数。fire被调用后,_Deferred会进入isResolved状态,未来对done的调用不会再保存函数,而是直接调用函数。
resolve:相当于调用fire(this, arguments),一个简化的方法。
isResolved:用来判断_Deferred是否在isResolved状态,具体参考前面的fire函数的解释。
cancel:取消掉整个队列,这样不管未来是不是fire,队列中的函数都不会再被调用。
说明白了jQuery._Deferred,再来看看jQuery.Deferred。这个东西其实就是2个_Deferred组成的,第一个称为deferred,用于保管“正常”状态下的函数;第二个称为failDeferred,用于保管“出错”状态下的函数。同时jQuery.Deferred提供了一些新的接口:

then:function(done, fail)的形式,把done添加进deferred,把fail添加进failedDeferred。
fail:相当于failDeferred的done函数。
fireReject:相当于failDeferred的fire函数。
reject:相当于failDeferred的resolve函数。
isRejected:相当于failDeferred的isResolved函数。
同时jQuery.Deferred取消了cancel函数。

那么这个是啥用的呢?有“正常”和“出错”2个状态,同时又是异步的,很容易就能想到……对,给AJAX用的,在下一篇分析中再详细说明。

jQuery.ready的变化
因为有了jQuery._Deferred这个东西,jQuery.ready函数变成依赖于函数队列,具体的变化有:

原来的readyList变量已经不再是一个数组,而变成了jQuery._Deferred对象。

原本在DOMContentLoaded时,调用readList中所有函数的逻辑,现在也使用了jQuery._Deferred中,原来的代码:

while ( (fn = ready[ i++ ]) ) { 
fn.call( document, jQuery ); 
}

变成了:
readyList.fire( document , [ jQuery ] );

jQuery.parseXML函数
新增了静态函数jQuery.parseXML,用于提供浏览器兼容的从字符串转为XML文档的功能。

该函数的逻辑网上有很多,jQuery也没有特别的地方,大致分为以下2种:

对于标准浏览器,使用DOMParser对象:

var parser = new DOMParser(); 
var xml = parser.parseFromString(text, 'text/html');对于IE,使用Microsoft.XMLDOM对象: var parser = new ActiveXObject('Microsoft.XMLDOM'); 
parser.async = 'false'; 
parser.loadXML(text); 
var xml = parser.documentElement;

data部分
添加了jQuery.hasData函数,用于判断一个元素是否有jQuery附加上去的数据。

修改了jQuery.expando的实现,在原来单纯地取当前时间的基础上,添加了一个随机数:

expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" );这样保证在同一时间,引入多个jQuery副本,这几个副本之间的expando不会相互冲突,导致元素上的data变得错乱。一般来说,是不会引入多个jQuery副本的,但是使用SealJS等的时候,配置不当的话,也是很容易出现此类问题的。

DOM操作部分
原本的hasClass、addClass、removeClass函数都需要将元素的class属性分隔为数组,在1.4.4版本中,通过\n或\t进行分隔,在1.5中增加了一个\r,用于对应Windows平台下的换行符(\r\n)。

jQuery.fn.attr函数,1.4.4版本中拒绝从TextNode和CommentNode上获取属性,在1.5版本中添加了一个AttributeNode(noteType == 2)。

在1.4.4版本中,jQuery会在页面unload的时候清理掉由jQuery维护的所有DOM事件,这是为了避免IE的内存泄露问题。但是在1.5中这一段代码不见了,不知是出于什么考虑。

对于IE下使用cloneNode复制节点,会将事件也一起复制过来的问题,1.4.4中是采取复制innerHTML的方式给予解决,而在1.5中则采纳了mootools团队提供的方法,使用cloneFixAttribute函数修正该问题。

cloneFixAttribute函数们于jQuery 1.5 beta1源码文件的5388-5438行,处理IE的BUG的原理很简单,当然前端里一些看似简单的东西,都是很难发现的:

IE中有个叫clearAttributes的函数,会清除到节点上的所有属性,顺便把和事件相关的onclick之类的属性也去掉了。在复制出来的节点上调用这个函数,就会把属性清得干干净净。
IE中还有一个叫mergeAttributes的函数,把一个节点的属性复制到另一个节点上,但他不会把和事件相关的属性复制过去。所以再把原始节点调用mergeAttributes,把属性重新放回复制出来的节点上,这就相当于起到了去除事件相关属性的作用。
另外cloneFixAttribute函数还处理了非常多IE6-8在cloneNode上的兼容性问题,非常值得详细研究。

AJAX部分
AJAX已经完全重写了,只留下一点边边角角保留着1.4.4版本的风采,这里只抽取一部分进行简单的说明。

原来版本中$.get和$.post的实现非常相似,具体来说仅有一个method配置项不同,因此在1.5版本中被合并起来了:

$.each(['get', 'post'], function(i, method) { 
$[method] = function() { ... }; 
});

ajaxSetup函数现在加了一行return this;,可以链式调用了。

serializeArray函数现在统一将value中的换行符替换成Windows的风格(\r\n)。

AJAX的回调函数中,作为参数的对象不再是原生的XMLHTTPRequest,而是jQuery自己封装的称为jXHR的对象,这个对象提供了XMLHTTPRequest的常用接口。

原本对于“请求成功”的浏览器状态码,除200-299以及304外,还有一个1223,来自于IE的一个BUG,会将204的状态码变成1223。现在因为有了jXHR对象,相当于中间多了一层,因此从jXHR对象获取statusCode不会出现1223的情况,已经被变回204了。

jQuery.ajax函数的配置项中多了一个statusCode项,其结构为map,用于指定返回特定状态码时的回调函数,大致形式如下:

jQuery.ajax({ 
url: 'xxx', 
statusCode: { 
200: function() { 处理请求成功 }, 
404: function() { 处理页面未找到 }, 
503: function() { 处理Service Unavailable } 
} 
});

再添加了这个回调后,jQuery.ajax函数已经有非常多的回调函数,其触发过程如下:

根据返回的状态码,触发success或者error回调。
根据状态码,触发对应的statusCode回调。
触发complete回调。
触发全局ajaxComplete回调。
如果此时没有正在执行的AJAX,触发全局ajaxStop回调。
其他细节
入口函数jQuery.fn.init现在多了一个参数,值始终为rootjQuery,用于加速init函数中对rootjQuery变量的查找速度(减少了一层作用域):

//jQuery 1.5 beta1 源码23行
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
}jQuery对象支持继承了,具体的修改是将几处直接调用jQuery的代码改为了对this.constructor的调用:

202行:return this.constructor( context ).find( selector );
253行:var ret = this.constructor();
334行:return this.prevObject || this.constructor(null);同时还提供了jQuery.subclass函数用于创建一个继承自jQuery的类型,由于不是很常用jQuery,更是从来没有用到过需要继承jQuery的情况,因此也不方便说这个功能的作用有多大。

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 #Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 #Javascript
Jquery插件 easyUI属性汇总
Jan 19 #Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 #Javascript
Javascript调用C#代码
Jan 17 #Javascript
js的写法基础分析
Jan 17 #Javascript
js 动态文字滚动的例子
Jan 17 #Javascript
You might like
php你的验证码安全码?
2007/01/02 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
JavaScript实现音乐导航效果
2020/11/19 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
tensorboard显示空白的解决
2020/02/15 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
自荐信格式技巧有哪些呢
2013/11/19 职场文书
清洁工表扬信
2014/01/08 职场文书
自我鉴定注意事项
2014/01/19 职场文书
个人承诺书格式范文
2015/04/29 职场文书
图解上海144收音机
2021/04/22 无线电
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL