jQuery源码解读二

例：

$(document).ready(function () {

    $("p").click(function () {

        $(this).hide();

    });

});

在开始进入程序之前，先要说明一点，jQuery代码庞大又绕，虽然语法上能看得懂，算法上也没问题，但是即使这样，如果凭自己一步步去计算这个流程，然后得到它的意图，会很费时间，有时候，很多时候，完全可以借用浏览器的调试工具去得到某些变量的值，这样一下子就能看清jQuery到底要干什么，事半功倍，对于研究看庞大的源码的人来说，不管什么源码，调试工具是一个很有用的工具，这点很重要。至于有哪些调试工具，很简单，浏览器都有，我用过chrome的、IE的，至于怎么用也很简单，如果这个不会，还是赶紧立刻马上去用几下，再不行就去百度

==============================  $(document) ============================

$(document) = jQuery(document) = new jQuery.fn.init(document)

如上所示  最终返回的是这个jQuery.fn.init的匿名对象

看这个 init = jQuery.fn.init = function  方法详细代码我就不贴了

里面有两个属性   

     this.context = this[ 0 ] = selector;

//selector 就是参数document     this.length = 1;

你可以直接 alert 或者 console.log 输出这个值，我用的是 console.log

console.log($(document).context);   //document对象

console.log($(document).length);   //  1

然后下面有这么一行

init.prototype = jQuery.fn;

而 jQuery.fn = jQuery.prototype  又 init = jQuery.fn.init

所以 这jQuery.fn.init 的对象 又包含了 jQuery对象的属性

比如可以 console.log($(document).jquery);//可以看到jQuery版本号

至此 $(document)解读完毕，返回的是 jQuery.fn.init 匿名对象，有它自己的属性和方法

==============================  $(document) ============================

===================================  ready  ==============================

在3000多行的位置有这么一个方法 jQuery.fn.ready = function( fn )...

这个 ready 是 jQuery.fn 的属性 结合上面 init.prototype = jQuery.fn;

所以 ready 也是 init 的属性 又 init = jQuery.fn.init  所以 ready 也就是匿名对象

jQuery.fn.init 的属性 ， 因此 $(document)可以调用这个ready，写得有点绕，jQuery这个思想

就像六合彩一样，让我猜不透。

然后传入这个ready的参数是这个方法

function () {

    $("p").click(function () {

        $(this).hide();

    });

}

下面看这个ready方法

jQuery.fn.ready = function( fn ) {

      jQuery.ready.promise().done( fn );

      return this;

};

然后

jQuery.ready.promise = function( obj )...

重要的是下面这句

jQuery.ready.promise();

也就是说，jQuery文件加载的时候，这个方法已经调用了一遍，那么看看它第一次调用干了些啥.

这个方法，如果一句句去看，一个个子方法去绕，不一会我就有一种感觉，心中十万匹草泥马山崩地裂，呼啸奔腾，于是机智的我果断用了 调试工具，然后我只需要按几下键盘就知道它葫芦里到底卖的什么药。

直接看这个jQuery.ready.promise = function( obj )方法里面的内容，很容易知道，第一次调用，初始化了一个readyList，并且加了事件监听

document.addEventListener( "DOMContentLoaded", completed ); 事件监听容易理解，dom树加载完成（不会等资源也加载完）就会执行这个

completed 方法。下面重点看看这个 readyList 是啥，还有定义它有什么意图

readyList = jQuery.Deferred();  这个jQuery.Deferred方法返回一个deferred对象，先看看这个deffered对象有些啥，这个容易，调试工具显示它包含了很多个方法：always、done、fail、notify、notifyWith、pipe、progress、promise、reject、rejectWith、resolve、resolveWith、state、then 。  对它更详细解释这里先推荐几篇不错的文章：

1、http://www.jb51.net/article/28054.htm

2、http://www.cnblogs.com/snandy/archive/2012/12/19/2812935.html

3、http://www.cnblogs.com/littledu/articles/2813051.html

当用到这个对象的方法时，再深入到它的源码，现在只看这个ready，到此为止这个第一次执行的jQuery.ready.promise()结束

然后继续这个ready方法，jQuery.ready.promise().done( fn );

可以看到 又执行了一次jQuery.ready.promise()，这时直接返回了promise对象，deferred对象的由来跟这个promise有很大关系，细看源码这两句：jQuery.each( tuples, function( i, tuple ) {省略};promise.promise( deferred );可以知道，jQuery.ready.promise()第一次执行时，先扩充了promise对象，然后根据这个promise对象 扩充了deferred对象，所以deferred对象如上的一些方法也是promise对象的方法，比如这个done方法，jQuery.ready.promise().done(
fn );

 

done就是 jQuery.Callbacks 中的add方法 

===================================  ready  ==============================