1. 程式人生 > >逐行分析jQuery源碼

逐行分析jQuery源碼

實現 擴展工具 幫助 abc callbacks cto 了解 lba 是什麽

註意:本次源碼分析選擇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 回調對象 : 函數的統一管理

逐行分析jQuery源碼