jQuery 源码分析笔记(4) Ready函数


Posted in Javascript onJune 02, 2011

这个功能在 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);
Javascript 相关文章推荐
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 #Javascript
JqGrid web打印实现代码
May 31 #Javascript
16个最流行的JavaScript框架[推荐]
May 29 #Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 #Javascript
在JavaScript中监听IME键盘输入事件
May 29 #Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 #Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 #Javascript
You might like
PHP遍历二维数组的代码
2011/04/22 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php字符串函数学习之substr()
2015/03/27 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
React快速入门教程
2017/01/17 Javascript
ionic3 懒加载
2017/08/16 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python实现结构体代码实例
2020/02/10 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
小学清明节活动总结
2014/07/04 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers