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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
jquery uaMatch源代码
Feb 14 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
js实现购物车商品数量加减
Sep 21 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实现选择排序的解决方法
2013/05/04 PHP
为你总结一些php系统类函数
2015/10/21 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
JavaScript模块详解
2017/12/18 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
python SOCKET编程基础入门
2021/02/27 Python
标准离婚协议书(2014版)
2014/10/05 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
婚宴新娘致辞
2015/07/28 职场文书
大队委员竞选稿
2015/11/20 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
Golang获取List列表元素的四种方式
2022/04/20 Golang