jQuery原始碼分析之jQuery的定義

老劉pro發表於2017-06-22
jQuery原始碼
/*注:涉及到的知識點有作用域/Module Pattern/建構函式/this/prototype。*(1)JavaScript只有函式作用域。為防止全域性變數汙染，採用匿名函式包含塊的方式生成區域性作用域，在匿名函式塊後面加入括號()就可直接呼叫該匿名**函式，這樣可以在js檔案載入時就可執行。*(2)該匿名函式有兩個形參window和undefined，而只有一個實參window。傳入全域性變數window作為引數的好處是可將全域性變數window變成匿名函式的*區域性變數，減少匿名函式訪問window的時間。由於undefined的值在一些瀏覽器中可能被修改，覆蓋掉瀏覽器設定的預設值。所以第二實參未傳入，以確**保第二個引數的值為瀏覽器預設設定的undefined值。*(3)全域性變數的匯入*(4)此模式即為Module Pattern
*/
(function(window, undefined){
//此處也使用匿名函式塊封裝邏輯程式碼。
var jQuery = (function(){
   /*建構函式jQuery顯示返回值而非隱身返回值的好處：建構函式在new關鍵字呼叫的情況下，
    *this將預設繫結到新物件上並返回該新物件(如果建構函式未顯示返回值的話)。倘若漏寫new直接呼叫建構函式，
   　*則函式中的this將繫結到全域性物件window上而非新物件上，所有定義為this的屬性將變成全域性屬性，造成全域性變數汙染，
   　*如果建構函式未顯示返回值，則將返回undefined。所以在定義供外部呼叫的建構函式時，最好顯示返回值，如此一來，
   　*無論在呼叫建構函式時是否使用new關鍵字，都將返回新物件。
    */
var jQuery = function( selector, context ) {
      //init為初始化方法，此處將它作為建構函式，使用new關鍵字呼叫將會返回新的jQuery物件，新物件的原型指向
      //jQuery.fn.init.prototype。後面的程式碼:jQuery.fn.init.prototype = jQuery.fn;
      //而jQuery.fn = jQuery.prototype;所以jQuery.fn.init.prototype = jQuery.prototype;也就是說新物件的原型
      //指向jQuery.prototype。這其實是在繞了個大圈。為什麼要繞個大圈呢？
      //這就拜new jQuery.fn.init( selector, context, rootjQuery );這行程式碼所賜。具體原因自己去想吧，不細說了。
    return new jQuery.fn.init( selector, context, rootjQuery );
  };
  //定義jQuery物件的原型
  jQuery.fn = jQuery.prototype = function(){
       constructor: jQuery,
       init: function( selector, context, rootjQuery ) {
          //......
       }
       //......
  };
  jQuery.fn.init.prototype = jQuery.fn;
  //定義extend方法，方便擴充套件。jQuery.extend是在jQuery上擴充套件，jQuery.fn.extend是在jQuery的原型物件上擴充套件。
  jQuery.extend = jQuery.fn.extend = function(){
       //......
  };
  //......
  return jQuery;
})();
//區域性變數匯出
//因為jQuery是在匿名函式中，屬於區域性變數，外部不能訪問，所以通過下面程式碼將jQuery匯出作為全域性變數供外部呼叫。
window.jQuery = window.$ = jQuery;
})(window);

相關文章