献给和我合作的过得前端童靴们：jquery源码分析--序3

jquery 源码分析
jquery 版本 1.12.2
浏览器： ie， 谷歌，火狐, 360
编辑器：Notepad++

接着上一篇。这次我们分析jQuery加载的时候 执行了5次构造函数，说明在加载过程中，创建了5个jQuery对象。
在此之前我们先来了解一下jQuery.fn.init究竟做了哪些事情？
还是为了方便阅读，我还是精简了代码。

jQuery.fn.init = function( selector, context, root ) {
    if ( !selector ) {
        return this;
    }
    if ( typeof selector === "string" ) {
        if ( match && ( match[ 1 ] || !context ) ) {
            do something...
            return this;
        } else if ( !context || context.jquery ) {
            return ( context || root ).find( selector );
        } else {
            return this.constructor( context ).find( selector );
        }
    }else if ( selector.nodeType ) {
        do something...
        return this;
    } else if ( jQuery.isFunction( selector ) ) {
        return typeof root.ready !== "undefined" ? root.ready( selector ) : selector( jQuery );
    }
    if ( selector.selector !== undefined ) {
        do something...
    }
    return jQuery.makeArray( selector, this );
}

1.如果参数“selector”为flase，直接返回自己。
2.如果参数“selector”是字符串，根据正则匹配，返回自己。如果匹配失败： 根据context 是不是 jQuery对象，是则使用jQuery的find方法查找“selector”，如果不是则先创建jQuery对象后，然后再调用find()方法。
3.如果参数“selector”是document元素，则返回自己。
4.如果参数“selector”是函数，root是否具有ready方法，有则调用ready方法，无则直接执行selector( jQuery )。
5.如果都不是， 则调用jQuery.makeArray创建一个数组并返回自己。

第一个：

jQuery( document )传递的是一个document元素， 那么符合条件的第三条规则。如果参数“selector”是document元素。
精简一下代码得到：

jQuery.fn.init = function( selector, context, root ) {
        this.context = this[ 0 ] = selector;
        this.length = 1;
        return this;
}

好了。。简单的我都不知道怎么解释了。以后碰到什么 $(document.getElementById(‘xxx’));应该知道里面装着什么东西了吧。
rootjQuery这个变量的作用可以在 jQuery.fn.init 分析出：
1.创建了一个根节点，提供 find方法调用；
2.包装一个ready方法；

第二个：

符合条件的第五条规则。

var support = {};
jQuery.fn.init = function( selector, context, root ) {
    if ( selector.selector !== undefined ) {
        this.selector = selector.selector;
        this.context = selector.context;
    }
    return jQuery.makeArray( selector, this );
}

jQuery.makeArray: 将类数组对象转换为数组对象。
api手册：http://jquery.cuishifeng.cn/jQuery.makeArray.html
这段代码的意思就是 遍历 jQuery( support ) 对象到最后一个属性名称 === “0”, 由于 support = {}, support.ownFirst=true；（分析了大半天，jQuery加载的时候并没有对“support”进行更新。。很奇怪为啥这么写，不直接写成“support.ownFirst=true”）
注意：support 其实就是“jQuery.support”具体可以参考：

jQuery.extend( {
    // jQuery.support is not used in Core but other projects attach their
    // properties to it so it needs to exist.
    support: support 
} );`

jQuery.support： 一组用于展示不同浏览器各自特性和bug的属性集合。
aip手册：http://jquery.cuishifeng.cn/jQuery.support.html

第三个：

符合条件的第四条规则。
精简代码后得到：

function( selector, context, root ) {
    root = root || rootjQuery;
    if ( jQuery.isFunction( selector ) ) {
        return typeof root.ready !== "undefined" ? root.ready( selector ) : selector( jQuery );
    }
}

$(document).ready: 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
api手册：http://jquery.cuishifeng.cn/ready.html
所以这个的作用就是：当页面加载完成以后，如果是ie<8的版本会为body.style.zoom = 1的css属性。

第四，五个：

作用：当页面加载完成以后，触发“ready”事件并移除。（以后讨论事件的内部机制）。

那么jQuery.ready方法是怎么被执行的呢？
请看这段代码：

精简一下代码后：

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {
        if ( document.readyState === "complete" || ...){
            window.setTimeout( jQuery.ready );
        }else if ( document.addEventListener ) {
            document.addEventListener( "DOMContentLoaded", completed );
            window.addEventListener( "load", completed );
        }else {
            do something....
        }
    }
    return readyList.promise( obj );
};

这是实现onload事件绑定的兼容函数。“window.setTimeout( jQuery.ready );”
看到这里就明白了吧。

总结一下：
jQuery加载的时候创建了5个jQuery对象：

1.把document元素缓存起来。
2.定义了一个浏览器兼容的属性。
3.：当页面加载完成以后，如果是ie<8的版本会为body.style.zoom = 1的css属性。
4.触发“ready”事件
5.移除“ready”事件

下一篇总体简略预览一下jQuery加载的时候还做了哪些事情。