jQuery源码分析-构造函数详解

jQuery源码分析-构造函数详解

在jQuery.js的构造函数中，充分利用了JavsScript语言的动态性——对行参的类型和个数没有的严格要求，以至于一个函数可以实现多种功能需求，也为JavaScript语言的多态性提供了基础，在这个构造函数中，提供了六种不同的调用格式（根据官方API文档），具体如下（$ = jQuery）：

　　1、$(String expr)：根据给定的CSS选择符查找匹配的元素，如$("div>p")；
　　2、$(Element elem)：将给定的DOM元素对象转换为jQuery对象，如$(document).find("div>p")；
　　3、$(Array<Element> elems)：如$(myForm.elements).hide()；
　　4、$(Function fn)：是$(document).ready()的简写模式，如：$( function fn(){ ... } )；
　　5、$(jQuery obj)：如：var div = $("div");   $(div).find("p")；
　　6、$(String expr, Element context)：在context中查找expr，如：$("div", xml.responseXML)；

　　另外，jQuery中提到了Chainable Methods的思想，也就是调用jQuery中的方法会返回一个jQuery对象，仍然可以继续调用其中的方法，这样，就形成了一个“链条”，通过“.”一个一个调用下去，这个在构造函数中有具体体现，其中有如下一条语句：

　　if( window == this ) return new jQuery( a, c );

　　这个就是为了返回一个jQuery对象，在首次调用jQuery( a, c )函数时，this是等于window的，所以每次都会创建一个jQuery对象，更详细的代码分析见下：

//  jQuery的构造函数；
var  jQuery  =   function ( a, c )  {
    // $(document).ready()的简写形式，只有在$(function(){})下才会执行；
    if ( a && typeof a == "function" && jQuery.fn.ready ) return jQuery(document).ready(a);

    // 确保参数a非空，默认值为document；
     a = a || jQuery.context || document;

    // 如果参数a是jQuery对象(a.jquery="1.0.3")，则克隆一个与a相同的jQuery对象；
    if ( a.jquery ) return jQuery( jQuery.merge( a, [] ) );

    // 从给定的参数c(要求c必须是jQuery对象)中查找a；
    if ( c && c.jquery ) return jQuery( c ).find( a );

    // 如果是初次调用$()，因为在window环境下，所以创建一个新的jQuery对象，如果去掉new则循环执行；
    if ( window == this ) return new jQuery(a,c);

    // 分析HTML串，如“div<ul>p”；
    if ( a.constructor == String ) {
        var m = /^[^<]*(<.+>)[^>]*$/.exec( a );
        if ( m ) a = jQuery.clean( [ m[ 1 ] ] );
     }

    // 如果参数a是元素数组，则要执行jQery.merge()，否则要执行jQuery.find()；
    this.get( a.constructor == Array || a.length && !a.nodeType && a[0] != undefined && a[0].nodeType
        ?  // 处理元素数组；
             jQuery.merge( a, [] )
         :  // 查找相匹配的元素并保存；
             jQuery.find( a, c ) );

    // 如果附加了另外的函数，则在每个相匹配的jQuery对象上执行这个函数；
    var fn = arguments[ arguments.length - 1 ];
    if ( fn && typeof fn == "function" ) this.each( fn );

    return this;

} ;  // jQuery的结束；