當前位置:才華齋>設計>網頁設計>

jQuery 原始碼分析筆記小結

網頁設計 閱讀(2.29W)

jQuery的宗旨是Write Less, Do More。它對JavaScript的開發風格侵入性不如YUI那麼強,當然也不如Dojo和YUI如此龐大。它極大的簡化了JavaScript的日常開發工作,主要是DOM元素的操作(從名字Query就可以看出)。另外一個主要工作就是每個前端開發者都需要面對的瀏覽器相容性。jQuery相容所有主流瀏覽器的大部分版本,從萬惡的IE6開始直到Firefox,Chrome等現代瀏覽器。除了居於核心的一小部分程式碼之外,剩下的jQuery都是鬆散的函式,擴充套件性很強。上有成千上萬的jQuery外掛,你需要的`功能幾乎都有對應的jQuery外掛,而且不止一個。

jQuery 原始碼分析筆記小結

jQuery程式碼的頭部是License宣告。採用了GPLv2和MIT雙協議。而在jQuery宣告下是另一個專案的宣告:Sizzle。這是jQuery作者另外的一個開源專案,在MIT、BSD和GPL下發布。它是一個獨立的selector實現(pure-JavaScript CSS selector engine),可以獨立使用。它的壓縮版本只有3KB多一點,號稱效率最高的選擇器實現。jQuery從1.3開始使用Sizzle代替了原來的selector實現。

JS程式碼中有大量的()和{},這裡使用的是Vim閱讀,因為%命令可以快速的找到匹配的括號。

程式碼總體結構和變數

jQuery的程式碼整體上就是一個匿名函式呼叫:

複製程式碼 程式碼如下:

(function (window, undefined) {

// ...

})(window);

這是為了避免汙染全域性物件,同時也可以方便的管理執行上下文。這個技巧在JS程式碼中經常見到,在jQuery程式碼中也很常見。比如,在jQuery和其他JS庫同時使用時,$符號可能已經被使用了。為了仍然使用$符號:

複製程式碼 程式碼如下:

(function ($) {

// $("...")... 照常使用$

})(jQuery);

在這裡傳入真正的jQuery物件。

下面進入真正的實現部分,首先是$,也就是jQuery物件的宣告,其中最基本的兩個成員也列出來了:

複製程式碼 程式碼如下:

var jQuery = (function() {

var jQuery = function(selector, context) {

// 真正的初始化函式

return new (selector, context, rootjQuery);

},

// 一大堆變數宣告

// fn是主要的函式實現點,也是jQuery外掛的起點。實際上就是JS原型

= otype = {

};

// 一個擴充套件物件用的函式,可以動態地往物件上加成員。以後往jQuery裡面加成員都是用extend函式完成的。

nd = nd = function() {

};

// ...

return jQuery;

})();

jQuery物件是核心物件,所有$(...)得到的都是jQuery物件,除了少部分直接實現在jQuery下的Utility函式之外,大部分函式都是用extend方法加到jQuery物件裡的。