百度權重查詢 詞庫網 網站監控 服務器監控 seo監控 手機游戲 iPhone游戲

引言

好近LZ還在消化系統原理的第三章，因此這部分內容LZ打算再沉淀一下再寫。本次筆者和各位來討論一點前端的內容，其實有關jquery，在很久之前，LZ就寫過一篇簡單的源碼分析。只不過當時剛開始寫博客，寫的相對來講比較隨意，直接就把源碼給貼上來了，盡管加了許多注釋，但照舊會略顯粗糙。

這次LZ再次執筆，預備稍微規范一點的探討一下jquery的相關內容。

jquery的外套

jquery是一個輕量級的JS框架，這點相信大部分人都聽過，而jquery之所以有這樣一個稱呼，就是因為它靜靜披了一件外套，將自己給隱藏了起來。

//以下截取自jquery源碼片段(function( window, undefined ) { /* 源碼內容 */})( window );

上面這一小段代碼來自于1.9.0當中jquery的源碼，它是一個無污染的JS插件的標準寫法，專業名詞叫閉包。可以把它簡單的看做是一個函數，與通俗函數不同的是，這個函數沒有名字，而且會立即執行，就像下面這樣，會直接彈出字符串。

(function( window, undefined ) { alert("Hello World!"); })( window );

可以看出來這樣寫的直接效果，就相當于我們直接彈出一個字符串。但是不同的是，我們將里面的變量變成下場域變量，這不僅可以提高運行速度，更主要的是我們在引用jquery的JS文件時，不會因為jquery當中的變量太多，而與其它的JS框架的變量命名產生沖突。對于這一點，我們拿以下這一小段代碼來說明。

var temp = "Hello World!"; (function( window, undefined ) { var temp = "ByeBye World!"; })( window ); alert(temp);

這段代碼的運行效果是Hello而不是ByeBye，也就是說閉包中的變量聲明沒有污染到外面的全局變量，倘使我們去掉閉包，則好終的效果會是ByeBye，就像下面這樣。

var temp = "Hello World!";// (function( window, undefined ) { var temp = "ByeBye World!";// })( window ); alert(temp);

由此就可以看出來，jquery的外套就是這一層閉包，它是很主要的一個內容，是編寫JS框架必須知道的知識，它可以幫助我們隱藏我們的一時變量，降低污染。

jquery的背心

剛才我們說了，jquery將自己聲明的變量悉數都用外套隱瞞起來了，而我們平時使用的Jquery和$，卻是真真實實的全局變量，這個是從何而來，謎底就在jquery的某一行代碼，一般是在文件的末尾。

window.jQuery = window.$ = jQuery;

這一句話將我們在閉包當中定義的jQuery對象導出為全局變量jQuery和$，因此我們才可以在外部直接使用jQuery和$。window是默認的JS上下文環境，因此將對象綁定到window上面，就相當于變成了傳統意義上的全局變量，就像下面這一小段代碼的效果一樣。

var temp = "Hello World!"; (function( window, undefined ) { var temp = "ByeBye World!"; window.temp = temp; })( window ); alert(temp);

很顯明，它的效果應該是ByeBye，而不是Hello。因為我們在閉包中導出了temp局部變量為全局變量，從而覆蓋了行聲明的全局變量temp。可以看出，就是通過導出的體例，jquery露出了自己的小背心。

jquery的內褲

內褲珍愛的是我們的核心器官，因此特別很是主要。那么jquery的內褲也一樣，也是好核心的功能，就是選擇器。而選擇器簡單理解的話，其實就是在DOM文檔中，尋找一個DOM對象的工具。

首先我們進入jquery源碼中，可以很容易的找到jquery對象的聲明，看過以后會發現，原來我們的jquery對象就是init對象。

jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }

這里出現了jQuery.fn這樣一個東西，它的由來可以在jquery的源碼中找到，它其實代表的就是jQuery對象的原型。

jQuery.fn = jQuery.prototype;jQuery.fn.init.prototype = jQuery.fn;

這兩句話，句把jQuery對象的原型賦給了fn屬性，第二句把jQuery對象的原型又賦給了init對象的原型。也就是說，init對象和jQuery具有相同的原型，因此我們在上面返回的init對象，就與jQuery對象有一樣的屬性和方法。