献给和我合作的过得前端童靴们：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加载的时候还做了哪些事情。