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的ajax功能实现web service的json转化
Aug 29 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
js实现百度淘宝搜索功能
Feb 17 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操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python实现简单登录验证
2016/04/13 Python
python常用函数详解
2016/09/13 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
numpy数组拼接简单示例
2017/12/15 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
法人代表委托书
2014/04/04 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
工程资料员岗位职责
2015/04/13 职场文书
运动会广播稿200字
2015/08/19 职场文书
《青山不老》教学反思
2016/02/22 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python