jQuery1.0源代碼分析之構造函數完整註釋(五) – Javascript教程_JS教程_技術文章 – 程式設計聯盟

 

jQuery的函數設計都很緊湊,相互調用很多。例如,你要看明白a函數,發現a裡面調用b函數,b裡面又調用c函數。這樣一路跟下去,基本上就看暈瞭。

 

所以,我建議最好是一個函數一個函數的讀懂,不要深跟,等通篇都看完一遍,自然就都通瞭。

 

 

所以今天把jQuery的構造函數註解一下。

 

 

function jQuery(a,c) { 

 

    // 處理ready函數,$(function() { }) 

    if ( a && a.constructor == Function && jQuery.fn.ready ) 

        return jQuery(document).ready(a); 

 

    // 給a設一個默認值 

    a = a || jQuery.context || document; 

 

    // 如果a是jQuery對象,把a和空數組合並,然後返回,這樣做的目的是不破壞原來的jQuery對象。 

        //(註:jquery屬性是每個jQuery對象都有的,值為jQuery的版本) 

    if ( a.jquery ) 

        return $( jQuery.merge( a, [] ) ); 

 

    // 如果c是jQuery對象,調用find函數,去查找 

    if ( c && c.jquery ) 

        return $( c ).find(a); 

     

    // 以上情況都不是,開始new jQuery對象 

    if ( window == this ) 

        return new jQuery(a,c); 

 

    // 如果a是html代碼,$('<p />'),把html代碼轉成Dom元素 

        // jQuery.clean就是把html代碼轉換成Dom元素數組 

        var m = /^[^<]*(<.+>)[^>]*$/.exec(a); 

    if ( m ) a = jQuery.clean( [ m[1] ] ); 

 

    // 如果a是數組或者類數組,並且裡面裝的都是dom元素,把a和空數組合並一下 

        // 如果是其他情況,就調用find函數,find函數是處理css表達式的 

        // 最後調用get方法,做出jQuery對象返回         

        this.get( a.constructor == Array || a.length && !a.nodeType && a[0] != undefined && a[0].nodeType ? 

        // Assume that it is an array of DOM Elements 

        jQuery.merge( a, [] ) : 

 

        // Find the matching elements and save them for later 

        jQuery.find( a, c ) ); 

 

        // 最後看一下最後一個參數是不是Function,是的話遍歷執行一下 

    var fn = arguments[ arguments.length – 1 ]; 

     

    if ( fn && fn.constructor == Function ) 

        this.each(fn); 

 

最後,從上面的構造函數代碼來看,jQuery構造函數主要支持一下幾種方式

 

 

1、$( Function ),ready函數

 

2、$( Element ) / $( [ Element] ),可以把Dom元素或者數組直接轉換成jQuery對象

3、$( CSS Expression, Content), 也可以用CSS表達式來選取Dom元素

 

4、$( Html ),html也可以轉換成jQuery對象

 

 

作者 baozhifei

發佈留言