JQuery源碼學習

學習源碼需要什麼？

1，紮實的js,css,html基本功

2，下載jquery源碼

3，先整體後局部。分析整個文件的結構。有哪幾部分。

4，先看核心：jquery對象

5，從現象看本質，對其主要模塊的分析。如，DOM，事件處理，ajax等。看設計思想和實現技巧。

6，熟悉其編碼風格。

整體模塊解析

入口模塊(構造jq對象)
底層模塊(工具方法,回調函數列表,異步隊列,測試,數據緩存,隊列,選擇器Sizzle)
功能模塊(屬性操作attr,事件,dom遍歷操作,樣式操作,異步ajax,動畫)

現象看本質

1，無new的jq對象

2，直接就可以引用一個jq對象var = jquery;
3，通過傳入的參數的不同來生成不同的jq對象
4，簡潔的鏈式編碼
5，配置方式書寫jq對象屬性
6，強大的dom查找能力
7，隨心所欲的方法擴展

//關於class的處理都封裝在這個extend中
jQuery.fn.extend( {//jQuery.fn=jQuery.prototype，作用：擴展類方法；
    addClass: function( value ) {
        var classes, elem, cur, curValue, clazz, j, finalValue,i = 0;
        ////jQuery.extend用於擴展只屬於jq對象的全局方法(用於定義只在內部使用的方法，如isFunction函數)
        if ( jQuery.isFunction( value ) ) {
            return this.each( function( j ) {
                jQuery( this ).addClass( value.call( this, j, getClass( this ) ) );
            } );
        }
        if ( typeof value === "string" && value ) {
            classes = value.match( rnotwhite ) || [];

            while ( ( elem = this[ i++ ] ) ) {
                curValue = getClass( elem );
                cur = elem.nodeType === 1 &&
                    ( " " + curValue + " " ).replace( rclass, " " );
                if ( cur ) {
                    j = 0;
                    while ( ( clazz = classes[ j++ ] ) ) {
                        if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
                            cur += clazz + " ";
                        }
                    }
                    // Only assign if different to avoid unneeded rendering.
                    finalValue = jQuery.trim( cur );
                    if ( curValue !== finalValue ) {
                        elem.setAttribute( "class", finalValue );
                    }
                }
            }
        }
        return this;
    },