jQuery 源码分析笔记(4) Ready函数
更新时间：2011年06月02日 00:35:52 作者：
接下来回到最开始的jQuery.extend函数（268行）中的ready(fn)的定义。这个函数用来处理DOM加载完成的事件。差不多是jQuery最常用的函数之一了。
这个功能在 jQuery的文档中提到了三种等价的形式：
// 定义在jQuery.fn.ready
$(document).ready(handler);
// 和上一个是同一个，不推荐
$().ready(handler);
// 单独在jQuery对象中处理
$(handler);
// 以上这个形式的定义：
if(jQuery.isFunction(selector) {
return rootjQuery.ready(selector);
}
因此实际上都归结与一个形式：jQuery.fn.ready(fn)。定义如下：
ready: function(fn) {
// 绑定事件到DOM上
jQuery.bindReady();
// 触发回调函数
readyList.done(fn);
// 返回jQuery对象
return this;
}
实际上jQuery内部并不仅仅只有一个对fn的引用。这里用到了 Deferred功能。在75行，为jQuery对象定义了readyList成员。而在442行在bindReady函数中初始化了这个变量：
if(readyList) {
return;
}
readyList = jQuery._Deferred();
bindReady函数除了初始化readyList之外，主要处理了浏览器对于绑定事件的区别。IE使用attachEvent而其他浏览器使用addEventHandler。这两个步骤完成后，ready函数使用readyList.resolveWith 触发回调函数。除了这个工作外，ready还处理了holdReady。这个API 的作用是延迟ready事件的回调，主要目的是在ready事件前做点事情。holdReady设置了一个标志位readyWait。当这个标志位被设置之后，ready在调用readyList.resolveWith之前不停地调用setTimeout(jQuery.ready, 1)。即每隔固定时间就递归调用自己(不知道hold时间久了，js引擎会不会栈溢出），这样最后被holdReady释放的时候， setTimeout会沿着调用栈回来的。为了在这个栈完成之前不触发ready回调函数。在每次调用setTimeout的时候，会递增readyWait变量。用来指示被holdReady函数延误了几次调用。
###几个基础辅助函数
在543行开始，定义了几个值得注意的辅助函数：parseJSON，parseXML和globalEval。parseJSON把一个字符串变成JSON对象。我们一般使用的是eval。parseJSON封装了这个操作，但是eval被当作了最后手段。因为最新JavaScript标准中加入了JSON序列化和反序列化的API。如果浏览器支持这个标准，则这两个API是在JS引擎中用Native Code实现的，效率肯定比eval高很多。目前来看，Chrome和Firefox4都支持这个API。parseJSON使用如下：
// 原生JSON API。反序列化是JSON.stringify(object)
if(window.JSON && window.JSON.parse) {
return window.JSON.parse(data);
}
// ... 大致地检查一下字符串合法性
return (new Function("return " + data))();
parseXML函数也主要是标准API和IE的封装。标准API是DOMParser对象。而IE使用的是Microsoft.XMLDOM的 ActiveXObject对象。定义：
if(window.DOMParser) {
tmp = new DOMParser();
xml = tmp.parseFromString(data, "text/xml");
} else {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = "false";
xml.loadXML(data);
}
globalEval函数把一段脚本加载到全局context中。IE中可以使用window.execScript。其他浏览器需要使用eval。因为整个jQuery代码都是一整个匿名函数，所以当前context是jQuery。主要代码：
(window.execScript || function(data) {
window["eval"].call(window, data); // 在window context下运行
})(data);
复制代码 代码如下:
// 定义在jQuery.fn.ready
$(document).ready(handler);
// 和上一个是同一个，不推荐
$().ready(handler);
// 单独在jQuery对象中处理
$(handler);
// 以上这个形式的定义：
if(jQuery.isFunction(selector) {
return rootjQuery.ready(selector);
}
因此实际上都归结与一个形式：jQuery.fn.ready(fn)。定义如下：
复制代码 代码如下:
ready: function(fn) {
// 绑定事件到DOM上
jQuery.bindReady();
// 触发回调函数
readyList.done(fn);
// 返回jQuery对象
return this;
}
实际上jQuery内部并不仅仅只有一个对fn的引用。这里用到了 Deferred功能。在75行，为jQuery对象定义了readyList成员。而在442行在bindReady函数中初始化了这个变量：
复制代码 代码如下:
if(readyList) {
return;
}
readyList = jQuery._Deferred();
bindReady函数除了初始化readyList之外，主要处理了浏览器对于绑定事件的区别。IE使用attachEvent而其他浏览器使用addEventHandler。这两个步骤完成后，ready函数使用readyList.resolveWith 触发回调函数。除了这个工作外，ready还处理了holdReady。这个API 的作用是延迟ready事件的回调，主要目的是在ready事件前做点事情。holdReady设置了一个标志位readyWait。当这个标志位被设置之后，ready在调用readyList.resolveWith之前不停地调用setTimeout(jQuery.ready, 1)。即每隔固定时间就递归调用自己(不知道hold时间久了，js引擎会不会栈溢出），这样最后被holdReady释放的时候， setTimeout会沿着调用栈回来的。为了在这个栈完成之前不触发ready回调函数。在每次调用setTimeout的时候，会递增readyWait变量。用来指示被holdReady函数延误了几次调用。
###几个基础辅助函数
在543行开始，定义了几个值得注意的辅助函数：parseJSON，parseXML和globalEval。parseJSON把一个字符串变成JSON对象。我们一般使用的是eval。parseJSON封装了这个操作，但是eval被当作了最后手段。因为最新JavaScript标准中加入了JSON序列化和反序列化的API。如果浏览器支持这个标准，则这两个API是在JS引擎中用Native Code实现的，效率肯定比eval高很多。目前来看，Chrome和Firefox4都支持这个API。parseJSON使用如下：
复制代码 代码如下:
// 原生JSON API。反序列化是JSON.stringify(object)
if(window.JSON && window.JSON.parse) {
return window.JSON.parse(data);
}
// ... 大致地检查一下字符串合法性
return (new Function("return " + data))();
parseXML函数也主要是标准API和IE的封装。标准API是DOMParser对象。而IE使用的是Microsoft.XMLDOM的 ActiveXObject对象。定义：
复制代码 代码如下:
if(window.DOMParser) {
tmp = new DOMParser();
xml = tmp.parseFromString(data, "text/xml");
} else {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = "false";
xml.loadXML(data);
}
globalEval函数把一段脚本加载到全局context中。IE中可以使用window.execScript。其他浏览器需要使用eval。因为整个jQuery代码都是一整个匿名函数，所以当前context是jQuery。主要代码：
复制代码 代码如下:
(window.execScript || function(data) {
window["eval"].call(window, data); // 在window context下运行
})(data);
相关文章
利用jQuery的$.event.fix函数统一浏览器event事件处理
做WEB前端开发的人都知道不同的浏览器对事件的处理方式是有区别的。2009-12-12
本文主要给大家详细介绍了jQuery过滤选择器，包含基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器等，十分全面,需要的朋友可以参考下2015-01-01
操作下拉列表框的jquery代码，方便学习jquery的朋友。2010-02-02
jQuery实现form表单基于ajax无刷新提交方法实例代码
在本篇文章里小编给大家整理了关于jQuery实现form表单基于ajax无刷新提交方法实例代码，需要的朋友们参考下。2019-11-11
鼠标经过table变色的效果，想必大家都有遇到过吧，其实实现并不难，在本文为大家详细介绍下jquery是如何实现的，感兴趣的朋友可以参看下2013-09-09
本文主要分享了将鼠标焦点定位到文本框最后的实例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
下面小编就为大家带来一篇jquery实现全选功能效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
在网页上只有一个小区域，但是说明性的文字又很长，下面这段脚本实现的是长文字的部分显示，有类似需求的朋友可以参考下哈，希望对你有所帮助2015-06-06
jquery设置元素的readonly和disabled的写法
Jquery的api中提供了对元素应用disabled和readonly属性的方法，在这里记录下，感兴趣的朋友可以练练手了2013-09-09
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效，下面简单为大家介绍下jquery $.fn $.fx到底是怎么一回事2013-11-11
最新评论