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

这个功能在 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);

赞 (0)

相关推荐

  • jquery ready(fn)事件使用介绍

    jquery ready(fn)事件使用介绍

    1.事件简介 (1)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数: (2)请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件: (3)可以在同一个页面中无限次地使用$(document).ready()事件: (4)其中注册的函数会按照(代码中的)先后顺序依次执行. 2.事件格式 $(document).ready(function(){ //jQuery代码 }); 3.实例 复制代码 代码如下: <!DOCT

  • jQuery ready函数滥用分析

    查看下之前写的代码,有许多这样的代码: 复制代码 代码如下: $(function(){ //do something. }); 这里面可能写一些初始化样式.给其他dom元素附加事件处理等.刚开始没发现什么问题,但是在页面引用了一些下载缓慢的图片时,问题出现了:在页面html下载完,到所有资源全部下载完之间,绑定dom元素上绑定的事件无法执行.用脚本绑定的样式无效等混乱情况,也就是ready么有执行. Ok,我的情况比较特殊,可能这个情况对于大部分同学是不可能遇到的,但是在开发中我们不得不考虑在

  • jQuery之$(document).ready()使用介绍

    学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件.所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载之前. If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it

  • jQuery的ready方法详解

    jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 复制代码 代码如下: DOMContentLoaded = function()  {          //取消事件监听,执行ready方法     if ( document.addEventListener )     {             

  • JQuery onload、ready概念介绍及使用方法

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常的写法 复制代码 代码如下: $(function(){ // do something }); 其实这个就是jq ready

  • jquery ready()的几种实现方法小结

    1.最常用也是最标准的 复制代码 代码如下: $(document).ready(){ }); 2.是上面的简写: 复制代码 代码如下: $(function(){ }) 很奇怪?为什么能这样?不是判断document对象是否 reADy然后才执行函数的么?document哪去了?我们看下jQuery的源代码: 复制代码 代码如下: // jQuery的构造函数: var jQuery = function( a, c ) { // $(document).ready()的简写形式,只有在$(f

  • Jquery中"$(document).ready(function(){ })"函数的使用详解

    Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作. 比如jquery写法:$("div p"); // (1)$("div.container"); // (2)$

  • jquery中的$(document).ready()使用小结

    window.onload = function(){ alert("welcome"); }这样的写法作用是希望在页面加载完,自动执行定义js代码(function). $(document).ready(function(){.... })这个函数是用来取代页面中的window.onload; document.ready()和传统的方法<body onload="load()"> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括

  • jQuery中ready事件用法实例

    本文实例讲述了jQuery中ready事件用法.分享给大家供大家参考.具体分析如下: 此事件会在文档加载就绪以后触发,也就是当DOM对象已经加载,并且网页内容全部呈现时候触发. ready()方法可以为ready事件绑定事件处理方法,并且此方法的选择器是唯一的,那就是document对象. 语法形式有三种,后两种是第一种的简写. 语法结构: 语法一: 复制代码 代码如下: $(document).ready(function) 语法二: 复制代码 代码如下: $().ready(function

  • JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).r

随机推荐