jQuery的运行机制和设计理念

jQuery的设计理念

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

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

综之，咱们就是在对DOM元素在进行操做。这个元素多是一个或是多个。这个元素多是Document，Window或DOM元素。这样咱们的任务就是二大部分，一是找DOM元素，二是对DOM元素进行操做。

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

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

可是这些仍是不能知足开发的须要，好比在DOM树中寻找DOM元素，仅仅只能是经过元素的ID，可是咱们想要更方便的查找方法，同时还但愿能有一个统一的入口，不要太泛，学习曲线太高或难于使用。

jQuery就是从这里出发，把全部一切都统一在jQuery对象中。使用jQuery就是使用jQuery对象。其实jQuery开创性的工做就是如其名同样：query。它强大的查找功能令全部的框架都黯然失色。jQuery实质就是一个查询器。在查询器的基础还提供对查找到的元素进行操做的功能。这样说来jQuery就是查询和操做的统一。查询是入口，操做是结果。

jQuery在实现上也能够分红两大部分，一部分是jQuery的静态方法，也能够称做实用方法或工具方法，经过jQuery.xxx()的jQuery命名空间直接引用。第二部分是jQuery的实例方法，经过jQuery(xx)或$(xx)来生成jQuery实例，而后经过这个实例来引用的方法。这部分的方法大多数是从采用静态方法代理来完成功能。真正的功能性的操做都在jQuery的静态方法中实现。这些功能细分起来，能够分红如下几个部分：

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

二、Dom元素的属性操做。Dom元素能够看做html的标签，对于属性的操做就是对于标签的属性进行操做。这个属性操做包含增长，修改，删除，取值等。

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

四、Ajax的操做。Ajax的功能就是异步从服务器取数据而后进行相关操做。

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

六、动画(Fx)的操做。能够看做是CSS样式上的扩展。

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对象。

举几个例子：

一、$($(“P”))能够看出其参数能够是jQuery对象或ArrayLike的集合。

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

三、$(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对象的操做方法。如

jQueryjQuery.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) {  
    selectorselector = 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));   
    }