jQuery对象源码分析
沉沙 2018-06-28 来源 : 阅读 940 评论 0

摘要:在本文中,我们会就Jquery的运行机制和设计理念进行分析和说明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,一定要清楚其源码。    
  
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对象内部的集合。下面一小节就专门分析它的集合是怎么实现的。

2.3、jquery对象的数组特性    
从上面一小节可以看出jquery构建函数完成了查找或转换或其它的功能,其结果就是找到元素,查找,转找不过是方式而已。找到元素就得找个地方去存储起来。这个地方是就是这一节要分析的。    
存储有序数据的地方(集合)在JS中最好的当然是数组。那么又如何在jQuery内面实现数组呢?可以采用如下的方式:    
jQuery.fn.prototype=new Array();    
在上一节中的this.setArray(arr)函数中加上    
  Array.apply(this,arr);    
如果还要完美一点,就加上:    
jQuery.fn.prototype.constructor=jQuery。    
这样我们继承了数组的所有特性,又可以在Jquery对象进行数组的功能扩展。但是jQuery并没有这样采用继承Array而实现这个内部的集合。它采用了Array-Like的对象的实现(见JavaScript: The Definitive Guide, 5th Edition7.8节)。    
类数组的对象还是对象,只不过像数组。数组与对象其实是没有什么好大的区别的,有序和无序的集合是它们区别。这个区别反应在数组有的length属性。当添加元素它会自动加上相对的个数,当删除元素,它会自动减去相对的个数。    
看一下jQuery是怎么实现的:    

// 第一种情况 Handle $(DOMElement)单个Dom 元素,忽略上下文    
        if (selector.nodeType) {                                            ②    
            this[0] = selector;    
            this.length = 1;    
            return this;    
        }

   
这是它的第一种实现方法,通过this[0]来直接设定第一个位置的Dom元素,同时设定length=1。这里我们可以看出对象与数组一样都是采用key/Value对的形式存在对象中。上面的Json形式为{0:aDom,length=1}。这里细细分析一下数组,数组是继承于对象。其[]的解释分析最终结果可以看作{}构的对象,对[]或数组的构建时会进行把index(如0.1,….)做为对象属性的key。把数组中的值做为其对应的value。同时改变length的值。这也就是说为什么本质上对象与数组没有多大的区别。在很多的源码中,如YUI中都采用对象的形式来构建多维数组。    
this.setArray(jQuery.makeArray(selector));    
是其第二种实现的方法,上面实现是单个的元素,这个实现的多个元素的集合。它首先调用了jQuery.makeArray(selector)这个静态方法把集合(类数组)转换成数组。    
上面已经分析了数组和对象都可以采用obj.[attr]的形式来取得其key对应的value。对于集合或类数组,必须要求其实现length属性,有了length的长度,那么就从0~length-1的key属性中取得对应的value就可以了:    

//把类数组的集合转换成数组,如果是单个元素就生成单个元素的数组。    
makeArray: function( array ) {    
    var ret = [];    
    if( array != null ){    var i = array.length;    
    //单个元素,但window, string、 function有 'length'的属性,加其它的判断    
      if( i == null || array.split || array.setInterval || array.call )    
          ret[0] = array;    
      else//类数组的集合    
          while( i )    ret[--i] = array[i];//Clone数组    
     }    
return ret;    
    },


生成了一个标准的数组,那么接下来setArray来干什么呢?    

// 把array-like对象的元素全部push当前jquery对象。    
    setArray : function(elems) {    
        this.length = 0;//初始化长度,因为push会在原始的length++    
        Array.prototype.push.apply(this, elems);    
        return this;    
    },


这个调用了Array.prototype.push来自动修改length的属性值(当然是加入了元素)。由此可以推想到Array中众多的方法(如shift)都可以看作改变length的值在对象的key/value对中完成无序到有序或重新排序的工作。实际上Array等是采用C或C++来实现的。但是它构出的JS特性让我们可以这样去思考采用JavaScript的实现方式。    
上面的setArray(elems)函数只是会改变当前jQuery对象的集合,它会清除这个对象集合中以前的元素。但是有的时候我们想保存原来的集合中元素,同时也能就新传入的元素进行jquery对象的操作。它提供了pushStack函数来新建一个jQuery对象同时保存原来对象的引用。这样就可能在需要时用到自己所要的对象:    

    pushStack : function(elems) {// 采用jQuery构建新对象,同时引用老对象。    
        var ret = jQuery(elems);// 构建新的jquery对象    
        ret.prevObject = this;// 保存老的对象的引用    
        return ret;    
    },


返回的是新构建成的对象,有着jQuery对象的全部功能,同时还可以通过prevObject来访问原来的老对象。    
   
构建了类数组,那么还得提供一些方法来操作这个集合,对于集合的操作无非就是定位元素,查找元素,复制(slice)和删除的操作(splice)等。jQuery还提供each,map的扩展。    
这些方法只和集合相关,与集合的元素的无关。jQuery提供了众多的和其中元素(DOM元素)相关的方法。    
   
它提供了两个get元素的方法,get(index)和eq(index),不同是get取得是集合中的元素,而eq则是返回该元素的Clone。不会修改数组。其实可以直接通过[i]来代替get(i)。如果get没有参数则是获得全部元素。    

// 取到本jquery对象的第几个Dom元素,无参数,代表全部的Dom元素    
    get : function(num) {    
        return num == undefined ? jQuery.makeArray(this) : this[num];    
    },    
// 获取第N个元素 。这个元素的位置是从0算起。    
    eq : function(i) {    
        return this.slice(i, +i + 1);    
    },    
这两个函数就不用分析了。接下来看看如何实现在集合中定位元素:    
/ 找到elem在本jquery对象的位置(index)    
    index : function(elem) {    
        var ret = -1;    
        return jQuery.inArray( // 如是jQuery对象就取第一个元素    
                elem && elem.jquery ? elem[0] : elem, this);    
    },    
   
// 判断elem元素在array中的位置(index) 静态方法    
    inArray : function(elem, array) {    
            for (var i = 0, length = array.length;i < length; i++)    
                // Use === because on IE, window == document    
                if (array[i] === elem)    
                    return i;    
            return -1;    
        },


inArray是jQuery的静态方法,而index是通过调用inArray来实现其定位的功能。Index的函数支持的参数可以是jQuery对象或Dom元素,而inArray则是实用方法,支持任何的元素。    
   
Jquery提供了如数组中slice复制的功能的方法,还提供类似concat的静态方法merge。Slice是通过Array中slice来实现的:    
  / 代理数组的slice,同样的操作。    
    slice : function() {    
        return this.pushStack(Array.prototype.slice.apply(this, arguments));    
    },    
它返回生成新的jQuery对象。这个对象的集合就是要复制后的集合。对于merge,它是静态方法,实现把第二个元素追加到第一个参数的数组中。    

// 把second 元素追加到first的数组中。    
        merge : function(first, second) {    
     // We have to loop this way because IE & Opera overwrite the length    
     // expando of getElementsByTagName    
        var i = 0, elem, pos = first.length;    
        // Also, we need to make sure that the correct elements are being    
        // returned (IE returns comment nodes in a '*' query)    
            if (jQuery.browser.msie) {    
                while (elem = second[i++])    
                    if (elem.nodeType != 8)    
                        first[pos++] = elem;    
   
            } else   
                while (elem = second[i++])    
                    first[pos++] = elem;    
   
            return first;    
        },


Jquery的each是对集合中每个元素都执行回调函数。    

    // 当前jquery对象中每个元素都执行callback(index,elem)函数    
    each : function(callback, args) {// 返回this    
    // 其调用了jQuery的静态方法。prototype中的mothodize是解决这类问题的好方法    
        return jQuery.each(this, callback, args);    
    },


它通过调用jQuery.each这个静态方法来完成功能的:    

// 对object中的每个对象都执行callback函数进行处理。args仅仅内部用    
     each : function(object, callback, args) {    
            var name, i = 0, length = object.length;    
            // 和else的处理差不多,args的传参代替object的属性值    
            if (args) {    
                if (length == undefined) {    
                    for (name in object)    
                        if (callback.apply(object[name], args) === false)    
                            break;    
                } else   
                    for (;i < length;)    
                        if (callback.apply(object[i++], args) === false)    
                            break;    
            } else {    
               // 不是array-like的object,对每个属性进行callback函数的调用    
    if (length == undefined) {    
                for (name in object)    
if (callback.call(object[name], name, object[name]) === false)    
                        break;    
                   } else   
                    // array-like object,采用数组的形式来处理    
     for (var value = object[0];i < length   && callback.call(value, i, value) !== false; value = object[++i]) {}    
            }    
            return object;    
        },


该静态方法支持第一个参数的类数组(数组)或对象。是数组就对每个元素进行callback的操作。如果是对象,就是对每个属性值进行callback的操作。这个callback回调函数的格式如下:callback:function(index,value)。Index是索引号,value是数组的index对应的元素或对象的第index个处理的属性。如果使用args参数,那callback回调函数的格式如下:callback:function(args)。Args是给回调函数设定参数。再看一下jQuery对象的each。它的第二个参数args就是采用传入的args直接进行给callback设定参数,而不是默认提集合中index和对应的元素,但执行的次数还是集合的length次。    
   
Jquery的map是将一组元素转换成其他数组(通过回调函数返回值组成的)   // 将一组元素转换成其他数组 然后根据这个数组构建新的jquery对象。。    

    map : function(callback) {    
        return this.pushStack(jQuery.map(this, function(elem, i) {    
            return callback.call(elem, i, elem);    
        }));    
    },


这个函数首先通过jQuery.map(this, function(elem, i){}来把this的jQuery对象集合的每个元素当作回调函数的elem的参数传到回调函数中。而这个回调函数又执行实例方法的map : function(callback)中callback函数,也就是jQuery.map中的回调仅仅是传参代理的功能。jQuery.map通过代理的回调来取得转换而成的元素集合。    
接下来就是采用pushStack把这集合的元素构建成新的jQuery对象并返回,同时保存原jQuery对象的引用。    
看下Map的静态方法:    

    // 返回对elems每个元素都进行操作的callback函数的返回值的集合。    
        map : function(elems, callback) {    
            var ret = [];               
            for (var i = 0, length = elems.length;i < length; i++) {    
                var value = callback(elems[i], i);    
                if (value != null)//说明转换的集合的个数可能少于原来的集合    
                    ret[ret.length] = value;    
            }    
            return ret.concat.apply([], ret);//采用array的concat实现    
        }


Map的静态方法返回每个callback返回的元素组成的数组。


本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程