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实现禁止后退的方法
Dec 27 Javascript
ext 同步和异步示例代码
Sep 18 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
在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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP实现的购物车类实例
2015/06/17 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
各个系统下的Python解释器相关安装方法
2015/10/12 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
iPython pylab模式启动方式
2020/04/24 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
《欢乐的泼水节》教学反思
2014/04/22 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年减负工作总结
2014/12/10 职场文书
客户经理岗位职责
2015/01/31 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
焦点访谈观后感
2015/06/11 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
Java实现简易的分词器功能
2021/06/15 Java/Android