Jquery源码分析之一：概述及jquery对象的构建

1、概述

      jQuery是一个非常优秀的JS库，与Prototype,YUI,Mootools等众多的Js类库相比，它剑走偏锋，从web开发实用的角度出发，抛除了其它Lib中一些不实用的东西，为开发者提供了短小精悍的类库。其短小精悍，使用简单方便，性能高效，能极大地提高开发效率，是开发web应用的最佳的辅助工具之一。因此大部分开发者在抛弃Prototype而选择Jquery来进行web开发。

      一些开发人员在使用jquery时，由于仅仅只知道Jquery文档中的使用方法，不明白Jquery的运行原理，时常会碰到许多的问题。这些问题大部分是使用不当而产生，极少数是Jquery的Bug。如果不明白其运行机理和核心源码，我们也很难写出基于jquery类库的高性能的程序出来。

      在调试基于jQuery的程序时，我们大部分时间都要跟踪进入jQuery对象分析其运行的状态，但是jQuery代码不像Ext,YUI那样中规中举，它的代码有点晦涩，难懂。也就说如果想用好jQuery，一定要清楚其源码。

Jquery的网络资源丰富，但Baidu了很久，却很难找到那种完全深入地分析Jquery源码的文稿。倒是Jquery的开发者，John Resi的《Pro Javascript Techniques》对于Jquery的源码的分析涉及了，可以看作是jQuery的源码分析，但是其主指在于JavaScript的使用。我们并不能很明白，很细致去了解Jquery的源码。

 

2、构建jQuery对象

      在本节中，我们会就Jquery的运行机制和设计理念进行分析和说明。本节分成三个部分：jQuery的体系、构建及数组特性。

  2.1、jQuery的设计理念

      使用jQuery之前，我们都会问jQuery是什么？jQuery是一个类库，和prototype，mootools等类库一样，为Web的Js开发提供辅助功能。那为什么要选用jQuery呢？在jQuery出现之前，Prototype，YUI都是很成熟的Js的框架，而且是各有各的特点。为什么要抛弃它们，而使用后起之秀的jQuery，它有什么优秀的特性吸引开发人员呢？

      回答这个问题，我们得明白jQuery的设计理念。回忆或想象一下，我们在web开发中是如何使用JS？绝大多数时间都是采用getElementById在Dom文档中找到Dom元素，然后取值或设定值，采用innerHTML取其内容或设定其内容，或进行事件的监听(如click)，在控制样式方面，我们会进行height,width,display等的改变，达到视觉上的效果，对于Ajax方面，也是取到数据在页面的某元素里面去添充内容。

      综之，我们就是在对Dom元素在进行操作。这个元素可能是一个或是多个。这个元素可能是document，window或Dom元素。这样我们的任务就是二大部分，一是找Dom元素，二是对Dom元素进行操作。

      对于用得熟练一点，不管是采用如getElementById这样的直接查找方式还是采用如Element.lastChild这类的间接查找方式不是很难的，对于Dom元素，Dom的操作方面也是很丰富，也不是很难使用？那么要类库做什么用呢？最难的一个问题就是浏览器的兼容的问题。所有的JS框架都要解决这一个问题，同时简化JS的本身自带的操作。

      Prototype可以说是开创了Js类库的先河，给我们耳目一新的感觉。它解决大部分的浏览器的兼容的问题。同时简化了原始函数名长难于记忆的经常书写出的错的问题（采用$(xx)代替getElementById），提供了Ajax的访问方式，扩展了Array,Object,Function，Event等JS原生对象。

      但是这些还是不能满足开发的需要，比如在Dom树中寻找dom元素，仅仅只能是通过元素的ID，但是我们想要更方便的查找方法，同时还希望能有一个统一的入口，不要太泛，学习曲线过高或难于使用。

      Jquery就是从这里出发，把所有一切都统一在jQuery对象中。使用jQuery就是使用jQuery对象。其实jQuery开创性的工作就是如其名一样：query。它强大的查找功能令所有的框架都黯然失色。

      jQuery实质就是一个查询器。在查询器的基础还提供对查找到的元素进行操作的功能。这样说来jQuery就是查询和操作的统一。查询是入口，操作是结果。

 

      jQuery在实现上也可以分成两大部分，一部分是jQuery的静态方法，也可以称作实用方法或工具方法，通过jQuery.xxx()的jQuery命名空间直接引用。第二部分是jQuery的实例方法，通过jQuery(xx)或$(xx)来生成jQuery实例，然后通过这个实例来引用的方法。这部分的方法大多数是从采用静态方法代理来完成功能。真正的功能性的操作都在jQuery的静态方法中实现。

 

       这些功能细分起来，可以分成以下几个部分：

      1、Selector，查找元素。这个查找不但包含基于CSS1~CSS3的CSS Selector功能，还包含其对直接查找或间接查找而扩展的一些功能。

      2、Dom元素的属性操作。Dom元素可以看作html的标签，对于属性的操作就是对于标签的属性进行操作。这个属性操作包含增加，修改，删除，取值等。

      3、Dom元素的CSS样式的操作。CSS是控制页面的显示的效果。对CSS的操作那就得包含高度，宽度，display等这些常用的CSS的功能。

      4、Ajax的操作。Ajax的功能就是异步从服务器取数据然后进行相关操作。

      5、Event的操作。对Event的兼容做了统一的处理。

      6、动画(Fx)的操作。可以看作是CSS样式上的扩展。

 

 

  2.2、jQuery对象的构建

      生成或构建一个jQuery对象其实就是构建并运行一个查询器（selector）。既然是查询，肯定会查找的结果（Dom元素），之后才会有对这些结果进行操作。那么这些查找的结果存放在哪里呢？最好的地方当然是这个jQuery对象内面。查找的结果可能是一个元素，也有可以是多个元素如(NodeSet的集合的形式)。也就是说jQuery对象内面有一个集合。这个集合存放查找到Dom元素。

      但是上一小节所提到jQuery对象是所有操作的统一入口，那么它的构建就不能只局限于从Dom文档中查找到Dom元素，还有可能是从别的集合中转移过来的Dom元素，还有可能是从html的字符串生成的Dom元素。

      在Jquery文档中提供了四种方式：jQuery(expression,[context])，jQuery(html)，jQuery(elements)，jQuery(callback)四种构寻jquery对象的方式。其中jQuery可以用$代替。这四种是经常用到。其实Jquery的参数可以是任何的元素，都能构成jquery对象。

      举几个例子：

      1、$($(“P”))可以看出其参数可以是jQuery对象或ArrayLike的集合。

      2、$()是$(document)的简写。

      3、$(3)会把3放到jQuery对象中集合中。

      对于如$(3)这样的其中元素（如ArrayLike集合的元素）不是Dom元素，最好不要构建jQuery对象，jQuery对象的方法都是针对于dom对象的。不是很清楚其使用的话，很有可能会导致错误。

 

      上面讲了这么多，还是很难明白其原理的，现在从源码的角度细细分析：

      通过jQuery(xxx)的调用实现没有生成对象，它的this是指向window对象的。那么jQuery的那些实例方法是怎样继承过来的呢？看一下：

var jQuery = window.jQuery = window.$ = function(selector, context) { return new jQuery.fn.init(selector, context); ①

};

 

      这是jquery的总的入口，jQuery对象实际上不是通过new jQuery（）而继承其prototype的中的方法。jQuery对象实际是jQuery.fn.init函数生成的对象。在里我们可以看出对于jQuery.prototype添加一些函数集的对象的意义不大。因为我们new jQuery()是可以的，但是生成的jQuery对象在return时会被抛弃。所以最好不要用new jQuery()来构建jQuery对象。

      jQuery对象其实就是new jQuery.fn.init。那么jQuery.fn.init.prototype上就是挂着jQuery对象的操作方法。如

 

jQuery.fn.init.prototype = jQuery.fn;

 

      有时间可能会担心在589行就实现了把jQuery.fn中的函数放到jQuery.fn.init.prototype上去，那么之后的通过jquery.fn.extend的方法怎么办呢？这里实际是对jQuery.fn的引用。在扩展jQuery的时候，只要把相关的函数extend到jQuery.fn就可以了。

      现在我们看一下jQuery.fn.init是怎么完成工作的：

init : function(selector, context) {

selector = selector || document;// 确定selector存在

// 第一种情况 Handle $(DOMElement)单个Dom 元素，忽略上下文

if (selector.nodeType) { ②

this[0] = selector;

this.length = 1;

return this;

} 

if (typeof selector == "string") {//selector为string ③

var match = quickExpr.exec(selector); 

if (match && (match[1] || !context)) {

if (match[1])// 第二种情况处理$(html) -> $(array) ④

selector = jQuery.clean([match[1]], context);

else {// 第三种情况：HANDLE: $("#id")//处理$("#id")

var elem = document.getElementById(match[3]);

if (elem) { 

// IE会返回name=id的元素 ，如果是这样，就document.find(s)

if (elem.id != match[3]) ⑤

return jQuery().find(selector);

// 构建一个新的jQuery(elem)

return jQuery(elem); ⑥

}

selector = [];

}

} else 

// 第四种情况：处理$(expr, [context])==$(content).find(expr)

return jQuery(context).find(selector); ⑦

} else if (jQuery.isFunction(selector)) ⑧ // 第五种情况：处理$(function)七Shortcut for document ready 

return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);

// 第六种情况：处理$(elements)

return this.setArray(jQuery.makeArray(selector)); ⑨

},

 

      jQuery.fn.init负责对传进来的参数进行分析然后生成jQuery对象。它的第一个参数一般来说是必须的（为空的话，就是默认的document）。从源码的角度第一个参数有着如下四种类型：

       类型

       说明

 

       Dom Element

 

      第一个参数为Dom元素，第二个参数不用。直接把Dom元素存在新生成的jQuery对象的集合中。返回这个jQuery对象。构建jQuery对象完成。

 

       String

  

      第一个参数为string有三种情况：

      1、html的标签字符串，$(html) -> $(array)，第二个参数可选。

      执行selector = jQuery.clean([match[1]], context);。该语句是把 hteml的字符串转换成dom对象的数组。接着执行Array类型的返回。

 

      2、字符串为#id时$(id)

      首先通过var elem = document.getElementById(match[3]);取得elem，如没有取到selector = [];转到执行Array类型的返回空集合jquery对象。

      如找到elem,通过return jQuery(elem);再次生成jquery对象，这次是Dom Element类型的jquery对象的返回。

 

      3、兼容css1-3语法的selector字符串，第二个参数是可选的。 执行return jQuery(context).find(selector);。该语句先执行jQuery(context)。可以看出context第二参数可以是任意的值，可以是集合形式。之后就通过find(selector)找到jQuery(context)中所有dom元素都满足selector表达式的dom元素的集合，构建新的jquery对象，并返回。

#id其实和这种方式是统一的，单独出来是为了提高性能。

  

       Fn

  

      第一参数是函数。第二个参数不用。是$(document).ready(fn)的简写，其return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector)是其执行的代码。这个语句首先执行jQuery(document)，它再一次newjQuery.fn.init函数,生成jQuery对象（元素为document）。再调用这个对象的ready(fn)方法。Ready(fn)返回当前对象。而上面的语句又是返回这个Ready(fn)的返回对象。

      可见这个$(fn)返回是$(document)的对象。抛弃了第一次生成的$(fn)对象。

 

      Array

 

      第一参数是除上面提到Dom元素，函数，string所有其它的类型。可以为空如$()。第二个参数不用。

      语句：return this.setArray(jQuery.makeArray(selector));

      它首先是把第一个参数转换数组。Selector可以是Array-like的集合，如jQuery对象，如getElementsByTag返回的Dom元素集合等，可能支持$(this)。Selector还可能是单个任意的对象。

转换成标准的数组之后，执行 this.setArray把这个数组中的元素全部存到当前jquery对象的集合中。之后返回当前的jquery对象。

      其实Dom Element完全可能综合在这里面，单独拿起来为了提高性能。

  

      从上面的代码和上表中，我们也可以看出构建jquery对象就是往jquery对象的集合中添加元素（一般都应该是dom元素）。添加的元素有两种形式：

      一是单个元素，可能通过直接的dom元素的传参形式，还可以通过#id从dom文档中找元素。

      二是集合，如jquery对象，还有数组，还有通过CSS Selector找到的Dom集合等Array-Like。

上表仅仅是分析传入的参数的类型，它是怎么做呢？在⑤处它实现CSS1~CSS3的兼容的Selector的查寻器的功能。通过jQuery().find(selector);来进行分析String并查找到符合传入的Selector语法的Dom文档树中的元素集合。

      在④处，它实现了把html的字符串转换成Dom元素节点的集合。这个是通过jQuery.clean([match[1]], context);来实现的。

      在⑧处，它实现DomReady的jQuery对象的统一入口，我们可以通过$(fn)要注册domReady的监听函数。所有的调用jQuery实现的功能代码都应该在domReady之后才运行。$(fn)是所有的应用开发中的功能代码的入口。它支持任意多的$(fn)注册。其是通过return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);来完成的。

      找到元素之后就是构建集合了，在⑨处就是通过this.setArray(jQuery.makeArray(selector));来构建jquery对象内部的集合。

 

来自：http://hi.baidu.com/dreamontheway/blog/category/Jquery