jQuery 源碼解析一：jQuery 類庫總體架構設計解析

        若是是作 web 的話，相信都要對 Dom 進行增刪查改，那你們都或多或少接觸到過 jQuery 類庫，其最大特點就是強大的選擇器，讓開發者脫離原生 JS 一大堆 getElementById、getElementsByName...官方提供超長方法 api 。

        jQuery 總體源碼，本人也還在閱讀中，暫時記錄一下。（爲何要看源碼，緣由很簡單---- 一 好好了解一下 jQuery 原理  二 爲了裝逼顯擺）。

        一  使用 jQuery 時候，首先需引入 jQuery 文件，而以後，你們便可直接使用 $ 、jQuery  調用。爲何呢？

        想必，寫過 javascript 的同窗，都知道 window 是 top 對象，而像 document、location、navigator 等爲 window 下屬性，爲了方便使用，能夠省略 window. ，那麼，jQuery 一樣原理。

        在源碼中 $、jQuery 一樣是採用此種方法引入 window.$=window.jQuery=xxx。如圖所示，圖中頁面引入了 jQuery 庫。

       

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

 

        

     二   jQuery 庫使用過程當中，通常使用兩種形式，一種即爲 $.ajax、$.noConflict ，另外一種則爲 $(方法參數) 進行使用

          經過源碼可知，jQuery 自己爲一個 function ，而 $.ajax 、$.noConflict 能夠視爲該函數對象添加的靜態方法，而使用的 $() 即至關於調用 $ 函數方法。

         

	jQuery = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context, rootjQuery );
	},

　　三  jQuery 源碼中自執行函數做用，以及自執行函數中傳入的 window 、undefined 的做用 ？

           

(function( window, undefined ) {

.......

})(window);

 

          自執行函數：自動執行該函數，用戶在外面沒法手動調用，且自執行一次。 自執行函數至關於建立了一個特殊的做用域，而該做用域封閉，避免污染全局變量。  如下僅列舉兩種常見寫法。

           ( function (){

            函數體

           })();

         

        + function  A(){

            函數體

          }();

          而在 jQuery 源中，方法傳入了 window 、undefined 兩個參數。

         window：由於函數在調用時，其查找變量值時，需一級一級往上查找，若是當前函數做用域沒有該變量，將會往上一級繼續查找，直接傳入 window ，可減小查找時間，提升效率。

          undefined：經樓主測試在 IE 8 下， undefined 屬性值可進行修改，此時傳入參數undefined 應該時保持 undefined 初始值。

 

         

    

      四   簡談 JavaScript 原型

        原型：JavaScript 對象有一個指向一個原型對象的鏈。當試圖訪問一個對象的屬性時，它不只僅在該對象上搜尋，還會搜尋該對象的原型，以及該對象的原型的原型，依此層層向上搜索，直到找到一個名字匹配的屬性或到達原型鏈的末尾。簡而言之，即在 JavaScript 中，任意對象的 __proto__ 屬性 （原型）（而其值等於該對象構造函數的 prototype 屬性 ，obj.__proto__===obj.constructor.prototype 。）

         目前，也可經過 Object.getPrototypeOf( arg ) 方法獲取對象原型，參數 arg 即爲當前對象 .  

        Object.getPrototypeOf( obj)===obj.__proto__===obj.constructor.prototype。在 JS 中，即經過原型實現繼承，當在該前對象的自身屬性中查找不到相關方法屬性，再往其 __proto__ 屬性中查找，若是再查找不到，再往其 __proto__屬性值的 __proto__一級一級往上查找，從而造成原型鏈，頂級的 Object.prototype.__proto__ 爲 null，最終爲止。

      

 

       而在 jQuery 中，像使用的 jQuery.ajax 等方法可視爲 jQuery 該函數對象（在 JS 中，任意都視爲對象）擁有的靜態方法 ，而相似 jQuery(參數).css() 等方法，可視爲經過 jQuery 函數對象爲構造器建立的對象，而其擁有的方法屬性，則來自 jQuery.prototype 中（對象的 __proto__ 等於該對象的構造函數的 prototype 屬性）。

 

      

     五 jQuery 源碼中原型使用

          

 1 // 首先，在執行函數中定義 jQuery 變量，而 jQuery 變量爲一個 function 。
 2    jQuery = function( selector, context ) {
 3         // 在 jQuery 函數體中 ，經過 new  jQuery.fn.init 爲構造器函數，返回新的對象。
              經過上面原型原理可知，該建立對象的 __proto__ （原型）指向其構造函數的 prototype 屬性 （jQuery.fn.init.prototype）
 4          return new jQuery.fn.init( selector, context, rootjQuery );
 5     },
 6 
 7  // 將 jQuery 函數對象 prototype 屬性另起別名 : jQuery.fn=jQuery.prototype 
       同時，將 jQuery.protype 從新賦值 ，將其 constructor 指向 jQuery 函數對象 ,新增 init 屬性（一樣，爲一個函數對象，jQuery 函數體中就經過調用該方法建立對象），
       還增長了一些屬性及方法，好比：selector 、jQuery 、size 等方法屬性
 8 jQuery.fn = jQuery.prototype = {
 9     constructor: jQuery,
10     init: function( selector, context, rootjQuery ){
11           .....
12           },
13      // Start with an empty selector
14     selector: "",
15 
16     // The current version of jQuery being used
17     jquery: "1.8.3",
18 
19     // The default length of a jQuery object is 0
20     length: 0,
21 
22     // The number of elements contained in the matched element set
23     size: function() {
24         return this.length;
25     },
26          .......
27 };
28 // 將 jQuery.fn.init.prototype 指向 jQuery.fn ，這一步至關重要
29 jQuery.fn.init.prototype = jQuery.fn;

  

 

    六 jQuery 中 $ 別名與其它庫引發衝突解決

       在 jQuery 源碼，可發現做者爲了便於用戶使用，將 jQuery 以 window.jQuery 方式引入，同時，又爲 jQuery 另起別名 $，所以，用戶在代碼不只可使用 jQuery，更可使用簡便的 $ 。(jQuery.fn 爲 jQuery.prototype 的別名）

      而在衆多的 javascript 類庫，除了 jQuery ，另也有其它庫，使用 $ 爲別名，好比 prototype，若是在一個頁面，同時，引入了 jQuery.js、prototype.js 就會引發衝突問題，由於二者都使用 $ 爲別名。

     接下來看看 jQuery 源碼中提供的解決辦法。

    

       // 首先，在 jQuery 源碼起始部分定義變量 _jQuery、_$ 值，以保存先前 jQuery、$ 真實值
       // 此時，可想象頁面分別按順序引入 prototype.js、jquery.js 
       // 頁面運行 prototype.js ，此時，$、jQuery 爲 prototype 類庫所持有
       // 當運行 jQuery.js ，由於，在 jQuery.js 中，又從新賦值了 jQuery、$
       所以，先將前一個類庫所持有的值進行保存。
       _jQuery = window.jQuery,
        _$ = window.$,   


  
// 再看看，jQuery 自身擴展的靜態方法 :noConflict 
// 其函數體，就是實現將先前保存前一個類庫中的 _$、_jQuery 中從新歸還原來庫 
   jQuery.extend({
    noConflict: function( deep ) {
        if ( window.$ === jQuery ) {
            window.$ = _$;
        }

        if ( deep && window.jQuery === jQuery ) {
            window.jQuery = _jQuery;
        }

        return jQuery;
    })  

 

 

 

 

 

     

         未完待續