• 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的结束;

  • 相关阅读:
    【设计模式】迭代器模式
    SpringMVC+Hibernate+Junit4+json基本框架近乎0配置
    Python
    Flex中TabNavigator隐藏和显示选项卡
    Android调试工具_ Stetho
    discuz的php7版本号
    分组加密的四种模式(ECB、CBC、CFB、OFB)
    人件札记:保持高效的办公室环境
    UVA 4857 Halloween Costumes 区间背包
    相机标定(Camera calibration)
  • 原文地址:https://www.cnblogs.com/ranzige/p/4155324.html
Copyright © 2020-2023  润新知