jquery原理的簡單分析，讓你扒開jquery的小外套。

引言

 

　　最近LZ還在消化系統原理的第三章，因此這部分內容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對象有一樣的屬性和方法。

　　我們不打算深究init這個方法的邏輯以及實現，但是我們需要知道的是，jQuery其實就是將DOM對象加了一層包裹，而尋找某個或者若干個DOM對象是由sizzle選擇器負責的，它的官方地址是http://sizzlejs.com/，有興趣的猿友可以去仔細研究下這個基於CSS的選擇器。

　　下面是LZ截取的一個jQuery對象的屬性和方法截圖，方法這里就不提了，對於屬性來說，我們最需要關注的只有一個屬性，就是[0]屬性，[0]其實就是原生的DOM對象。

　　很多時候，我們在jQuery和DOM對象之間切換時需要用到[0]這個屬性。從截圖也可以看出，jQuery對象其實主要就是把原生的DOM對象存在了[0]的位置，並給它加了一系列簡便的方法。這個索引0的屬性我們可以從一小段代碼簡單的看一下它的由來，下面是init方法中的一小段對DOMElement對象作為選擇器的源碼。

    // Handle $(DOMElement)
    if ( selector.nodeType ) { /* 可以看到，這里將DOM對象賦給了jQuery對象的[0]這個位置 */
        this.context = this[0] = selector; this.length = 1; return this; }

　　這一小段代碼可以在jquery源碼中找到，它是處理傳入的選擇參數是一個DOM對象的情況。可以看到，里面很明顯的將jQuery對象索引0的位置以及context屬性，都賦予了DOM對象。代碼不僅說明了這一點，也同時說明了，我們使用$(DOMElement)可以將一個DOM對象轉換為jQuery對象，從而通過轉換獲得jQuery對象的簡便方法。

　　

jquery的大腿

 

　　大腿是非常性感令男人垂涎的地方，要說jquery最性感最令我們向往的，便是它的ready方法了，千萬不要告訴LZ你使用jquery卻從未用過$(function(){})或者是ready方法。這里LZ不打算帶各位去看jquery的實現原理，因為比較復雜，而且這里我們的主旨不是為了一點一點的剖析源碼，而是簡介一下jquery的實現原理。

　　實現類似jquery的ready方法的效果我們是可以簡單做到的，它的實現原理就是，維護一個函數數組，然后不停的判斷DOM是否加載完畢，倘若加載完畢就觸發所有數組中的函數。遵循着這一思想，LZ拿出很久之前寫的一個小例子，來給各位看一下。

(function( window, undefined ) { var jQuery = { isReady:false,//文檔加載是否完成的標識
        readyList:[],//函數序列
        //onload事件實現
        ready : function(fn){ //如果是函數，加入到函數序列
                if(fn && typeof fn == 'function' ){ jQuery.readyList.push(fn); } //文檔加載完成，執行函數序列。
                if(jQuery.isReady){ for(var i = 0;i < jQuery.readyList.length ;i++){ fn = jQuery.readyList[i]; jQuery.callback(fn); } return jQuery; } }, //回調
        callback : function(fn){ fn.call(document,jQuery); } }; //導出對象
    window.$ = window.jQuery = jQuery; //判斷加載是否完成
    var top = false; try { top = window.frameElement == null && document.documentElement; } catch(e) {} if ( top && top.doScroll ) { (function doScrollCheck() { try { top.doScroll("left"); jQuery.isReady = true; jQuery.ready(); } catch(e) { setTimeout( doScrollCheck, 50 ); } })(); } }(window));

　　這段代碼是LZ從之前的例子摘出來的，它的實現邏輯非常簡單，但是可以達到jQuery的ready方法的效果，各位有興趣的可以加入這個JS文件測試一下效果。需要注意的是，上面沒有考慮瀏覽器兼容性，那段判斷文檔加載是否完成的代碼是針對IE寫的，因此只能在IE下測試。

　　代碼當中已經嵌入了簡單的注釋，因此LZ這里就不多做解釋了，全部的源碼可以在LZ的另一篇文章jquery源碼分析找到，有興趣的猿友也可以看下，那里模擬了一個非常簡陋的jquery。

 

jquery的胳膊

 

　　我們缺了胳膊依舊可以生活，甚至可以用腳寫程序，但是不得不承認，有了胳膊的我們會更加如虎添翼。而對於jquery來說，extend方法便是它的胳膊，沒有它我們依然可以很好的使用jquery，但是有了它，我們會更加暢快。

　　這里LZ不再詳細分析extend方法，有興趣的朋友可以參考LZ很久之前的一篇文章jquery擴展函數詳解，那里有較為詳細的分析和解釋。這里LZ只簡單說兩個extend方法的常用方式。

　　1、使用jQuery.fn.extend可以擴展jQuery對象，使用jQuery.extend可以擴展jQuery，前者類似於給類添加普通方法，后者類似於給類添加靜態方法。

　　2、兩個extend方法如果有兩個object類型的參數，則會將后面的參數對象屬性擴展到第一個參數對象上面，擴展時可以再添加一個boolean參數控制是否深度拷貝。

 

小結

 

　　本次對於jquery的簡單分析就到此為止了，由於LZ並不專注於前段開發，所以對於jquery一直是采取着適可而止的研究方式。不過只要還在做Web開發，就離不開前端，因此我們也不能放棄前端。