逐行分析jQuery源碼

注意：本次源碼分析選擇2.0.3(因為不支持IE6、7、8，就少了很多兼容的hack的寫法，對了解jQuery的實現原理有很大的幫助)

1.jQuery有不同的版本，從2.x版本便不再支持IE6、7、8

   將jQuery拆分長框架一點一點進行了解

2.

(function ())();

這個叫匿名函數自執行

3.匿名函數自執行的好處是什么呢？

   匿名函數自執行里面的所有東西都是一個局部的。防止和其他的代碼沖突。

栗子①

(function () {
   var a=10;
})();
alert(a);

控制台報錯，說a is not defined。

4.如何能夠訪問到匿名函數自執行中的方法呢？

  很多種方法(⊙o⊙)哦。可以把你要對外提供的接口作為window的屬性或者是方法。

栗子②

(function () {
    var a=10;
    
    function abc(){
        alert(a);
    }
    //將abc方法作為window的方法，就可以在匿名函數自執行外面進行訪問了
    window.abc=abc;
})();
abc();

 

但是要對外提供接口，我們才能找到使用的方法和屬性

5.在jQuery中，$()是jQuery()的簡寫方式。

6.在jQuery文件中第21行到第94行就是定義了一些變量和函數。

  其中，60-64行是一個特別重要的函數,就是平時用的$() jQuery()對外的接口

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
},

但是現在這個jQuery還是以局部變量的形式存在，要提供對外的接口，才能使用。提供接口在第8823-8827行

// If there is a window object, that at least has a document property,
// define jQuery and $ identifiers
if ( typeof window === "object" && typeof window.document === "object" ) {
    window.jQuery = window.$ = jQuery;
}

7.在第96-283行，都是給jQuery對象添加一些方法和屬性。

  prototype(原型)是面向對象的東西，所以說，jQuery就是一個基於面向對象的程序，jQuery里面寫的都是跟面向對象有關的。

//96行
jQuery.fn = jQuery.prototype

8.為什么jQuery是一個基於面向對象的程序？？

  栗子③

//jQuery是這樣調用方法的對吧。是不是和下面數組使用方法的方式非常像。
//但是實際上$("div")他本身是一個函數調用，但是函數調用的執行結果是一個對象，所以，這就是為什么說jQuery是基於面向對象的程序嘍~~~
$("div").css();
$("div").text();

//這是Array對象方法的使用方式，先實例化一個對象，然后使用對象調用方法。
var arr=new Array(3);
arr.sort();
arr.splice();

//61--64
jQuery = function( selector, context ) {
    //在這個函數執行完了就是一個new構造函數的過程，返回的就是一個jQuery對象~~既然返回的是對象，當然可以調用方法嘍~~
    return new jQuery.fn.init( selector, context, rootjQuery );
}

9.285--347行-->  extend:是jQuery當中的一個繼承方法，希望后續添加的方法都能掛在jQuery對象上，很方便擴展

10.

//通過使用對象調用的方法，是實例方法。
$().text();
$().html();

//$是一個函數，在函數下面來擴展方法的話，就是擴展一些靜態方法
//在jQuery當中，給面向對象擴展靜態屬性和靜態方法叫做擴展工具方法
//工具方法和實例方法區別就在於，它既可以給jQuery對象來用，也可以給源生的JS來用，實例方法只能給jQuery對象調用
$.trim();
$.proxy();

11.靜態方法和實例方法在jQuery中的關系？

  可以把靜態方法看作是在jQuery中的最底層，而實例方法是上一層或者是更高層的。

  很多方法都是實例方法，里面調用的都是工具方法。

12.877行--2856行  Sizzle 復雜選擇器的實現

13.2880行--3042行  Callbacks 回調對象 : 函數的統一管理