逐行分析jQuery源碼

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

1.jQuery有不一樣的版本，從2.x版本便再也不支持IE六、七、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 回調對象 : 函數的統一管理