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 相关文章推荐
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
详解vue的diff算法原理
May 20 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
vue实现列表拖拽排序的功能
Nov 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投票程序源码
2007/03/11 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php操作xml
2013/10/27 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
jquery.validate使用详解
2016/06/02 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
git进行版本控制心得详谈
2017/12/10 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python实现门限回归方式
2020/02/29 Python
python如何实时获取tcpdump输出
2020/09/16 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
园长自我鉴定
2013/10/06 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
先进员工事迹材料
2014/12/20 职场文书
股东出资协议书
2016/03/21 职场文书
Python Socket编程详解
2021/04/25 Python