jQuery 源碼系列（一）整體架構

時間 2019-11-06

原文原文鏈接

歡迎來個人專欄查看系列文章。javascript

決定你走多遠的是基礎，jQuery 源碼分析，向長者膜拜！ css

我雖然接觸 jQuery 好久了，但也只是侷限於表面使用的層次，碰到一些問題，找到 jQuery 的解決辦法，而後使用。顯然，這種作法的弊端就是，不管你怎麼學，都只能是個小白。html

當我創建這個項目的時候，就表示，我要改變這一切了，作一些人想作，憧憬去作，但從沒踏入第一步的事情，學習 jQuery 源碼。前端

到目前爲止，jQuery 的貢獻者團隊共 256 名成員，6000 多條 commits，可想而知，jQuery 是一個多麼龐大的項目。jQuery 官方的版本目前是 v3.1.1，已經衍生出 jQueryUI、jQueryMobile 等多個項目。vue

雖然我在前端爬摸打滾一年多，自認基礎不是很好，在沒有外界幫助的狀況下，直接閱讀項目源碼太難了，因此在邊參考遍實踐的過程當中寫下來這個項目。java

首先，先推薦一個 jQuery 的源碼查詢網站，這個網站給初學者很是大的幫助，不只能查找不一樣版本的 jQuery 源碼，還能索引函數，功能簡直吊炸天。react

另外，推薦兩個分析 jQuery 的博客：jquery

jQuery源碼分析系列git

原創 jQuery1.6.1源碼分析系列（中止更新）github

這兩個博客給我了很大的幫助，謝謝。

另外還有下面的網址，讓我在如何使用 jQuery 上駕輕就熟：

jQuery API 中文文檔

jQuery 整體架構

首先，jQuery 是一個開發框架，它的火爆程度已經沒法用言語來形容，當你隨便打開一個網站，一半以上直接使用了 jQuery。或許，早幾年，一個前端工程師，只要會寫 jQuery，就能夠無憂工做。雖然說最近 react、vue 很火，但 jQuery 中許多精彩的方法和邏輯值得每個前端人員學習。

和其衆多的框架同樣，總要把接口放到外面來調用，內部每每是一個閉包，避免環境變量的污染。

先來看看 jQuery 使用上的幾大特色：

$('#id') 函數方式直接生成 jQuery 對象
$('#id').css().html().hide() 鏈式調用

關於鏈式調用，我想有點基礎都很容易實現，函數結尾 return this 便可，主要來介紹一下無 new 實現建立對象。

無 new 函數實現

下面是一個普通的函數，很顯然，會陷入死循環：

var jQuery = function(){
  return new jQuery();
}
jQuery.prototype = {
  ...
}

這個死循環來的太忽然，jQuery() 會建立一個 new jQuery，new jQuery 又會建立一個 new jQuery...

jQuery 用一個 init 函數來代替直接 new 函數名的方式，還要考慮到 jQuery 中分離做用域：

var jQuery = function(){
  return new jQuery.prototype.init();
}
jQuery.prototype = {
  constructor: jQuery,
  init: function(){
    this.jquery = 1.0;
    return this;
  },
  jquery: 2.0,
  each: function(){
    console.log('each');
    return this;
  }
}
jQuery().jquery //1.0
jQuery.prototype.jquery //2.0

jQuery().each() // error

上面看似運行正常，可是問題出在 jQuery().each() // error，訪問不到 each 函數。實際上，new jQuery.prototype.init() 返回到是誰的實例？是 init 這個函數的實例，因此 init 函數中的 this 就沒了意義。

那麼，若是：

var jq = jQuery();
jq.__proto__ === jQuery.prototype;
jq.each === jQuery.prototype.each;

若是能夠實現上面的 proto 的指向問題，原型函數調用問題就解決了，但實際上：

var jq = jQuery();
jq.__proto__ === jQuery.prototype.init.prototype; //true

實際上，jq 的 proto 是指向 init 函數的原型，因此，咱們能夠把 jQuery.prototype.init.prototype = jQuery.prototype，這個時候，函數調用就瓜熟蒂落了，並且使用的都是引用，指向的都是同一個 prototype 對象，也不須要擔憂循環問題。實際上，jQuery 就是這麼幹的。

var jQuery = function(){
  return new jQuery.prototype.init();
}
jQuery.prototype = {
  constructor: jQuery,
  init: function(){
    this.jquery = 1.0;
    return this;
  },
  jquery: 2.0,
  each: function(){
    console.log('each');
    return this;
  }
}
jQuery.prototype.init.prototype = jQuery.prototype;
jQuery().each() //'each'

jQuery 內部結構圖

在說內部圖以前，先說下 jQuery.fn，它其實是 prototype 的一個引用，指向 jQuery.prototype 的，

var jQuery = function(){
  return new jQuery.prototype.init();
}
jQuery.fn = jQuery.prototype = {
  ...
}

那麼爲何要用 fn 指向 prototype？我本人查閱了一些資料，貌似仍是下面的回答比較中肯：簡介。你不以爲 fn 比 prototype 好寫多了嗎。

借用網上的一張圖：

從這張圖中能夠看出，window 對象上有兩個公共的接口，分別是 $ 和 jQuery：

window.jQuery = window.$ = jQuery;

jQuery.extend 方法是一個對象拷貝的方法，包括深拷貝，後面會詳細講解源碼，暫時先放一邊。

下面的關係可能會有些亂，可是仔細看了前面的介紹，應該能看懂。fn 就是 prototype，因此 jQuery 的 fn 和 prototype 屬性指向 fn 對象，而 init 函數自己就是 jQuery.prototype 中的方法，且 init 函數的 prototype 原型指向 fn。

鏈式調用

鏈式調用的好處，就是寫出來的代碼很是簡潔，並且代碼返回的都是同一個對象，提升代碼效率。

前面已經說了，在沒有返回值的原型函數後面添加 return this：

var jQuery = function(){
  return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  init: function(){
    this.jquery = 3.0;
    return this;
  },
  each: function(){
    console.log('each');
    return this;
  }
}
jQuery.fn.init.prototype = jQuery.fn;
jQuery().each().each();
// 'each'
// 'each'

extend

jQuery 中一個重要的函數即是 extend，既能夠對自己 jQuery 的屬性和方法進行擴張，又能夠對原型的屬性和方法進行擴展。

先來講下 extend 函數的功能，大概有兩種，若是參數只有一個 object，即表示將這個對象擴展到 jQuery 的命名空間中，也就是所謂的 jQuery 的擴展。若是函數接收了多個 object，則表示一種屬性拷貝，將後面多個對象的屬性全拷貝到第一個對象上，這其中，還包括深拷貝，即非引用拷貝，第一個參數若是是 true 則表示深拷貝。

jQuery.extend(target);// jQuery 的擴展
jQuery.extend(target, obj1, obj2,..);//淺拷貝 
jQuery.extend(true, target, obj1, obj2,..);//深拷貝

如下是 jQuery 3 以後的 extend 函數源碼，本身作了註釋：

jQuery.extend = jQuery.fn.extend = function () {
  var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {},
    i = 1,
    length = arguments.length,
    deep = false;

  // 判斷是否爲深拷貝
  if (typeof target === "boolean") {
    deep = target;

    // 參數後移
    target = arguments[i] || {};
    i++;
  }

  // 處理 target 是字符串或奇怪的狀況，isFunction(target) 能夠判斷 target 是否爲函數
  if (typeof target !== "object" && !jQuery.isFunction(target)) {
    target = {};
  }

  // 判斷是否 jQuery 的擴展
  if (i === length) {
    target = this; // this 作一個標記，能夠指向 jQuery，也能夠指向 jQuery.fn
    i--;
  }

  for (; i < length; i++) {

    // null/undefined 判斷
    if ((options = arguments[i]) != null) {

      // 這裏已經統一了，不管前面函數的參數怎樣，如今的任務就是 target 是目標對象，options 是被拷貝對象
      for (name in options) {
        src = target[name];
        copy = options[name];

        // 防止死循環，跳過自身狀況
        if (target === copy) {
          continue;
        }

        // 深拷貝，且被拷貝對象是 object 或 array
        // 這是深拷貝的重點
        if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))) {
          // 說明被拷貝對象是數組
          if (copyIsArray) {
            copyIsArray = false;
            clone = src && Array.isArray(src) ? src : [];
          // 被拷貝對象是 object
          } else {
            clone = src && jQuery.isPlainObject(src) ? src : {};
          }

          // 遞歸拷貝子屬性
          target[name] = jQuery.extend(deep, clone, copy);

          // 常規變量，直接 =
        } else if (copy !== undefined) {
            target[name] = copy;
        }
      }
    }
  }

  // Return the modified object
  return target;
}

extend 函數符合 jQuery 中的參數處理規範，算是比較標準的一個。jQuery 對於參數的處理頗有一套，老是喜歡錯位來使得每個位置上的變量和它們的名字同樣，各司其職。好比 target 是目標對象，若是第一個參數是 boolean 型的，就對 deep 賦值 target，並把 target 向後移一位；若是參數對象只有一個，即對 jQuery 的擴展，就令 target 賦值 this，當前指針 i 減一。

這種方法邏輯雖然很複雜，可是帶來一個很是大的優點：後面的處理邏輯只須要一個就能夠。target 就是咱們要拷貝的目標，options 就是要拷貝的對象，邏輯又顯得很是的清晰。

extend 函數還須要主要一點，jQuery.extend = jQuery.fn.extend，不只 jQuery 對象又這個函數，連原型也有，那麼如何區分對象是擴展到哪裏了呢，又是如何實現的？

其實這一切都要藉助與 javascript 中 this 的動態性，target = this，代碼就放在那裏，誰去執行，this 就會指向誰，就會在它的屬性上擴展。

由 extend 衍生的函數

再看 extend 源碼，裏面有一些函數，只是看名字知道了它是幹什麼的，我專門挑出來，找到它們的源碼。

jQuery.isFunction 源碼

jQuery.isFunction = function (obj) {
    return jQuery.type(obj) === "function";
}

這也太簡單了些。這裏又要引出 jQuery 裏一個重要的函數 jQuery.type，這個函數用於類型判斷。

首先，爲何傳統的 typeof 不用？由於很差用（此處應有一個哭臉）：

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof(42) === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // Despite being "Not-A-Number"
typeof Number(1) === 'number'; // but never use this form!

// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof always returns a string
typeof String("abc") === 'string'; // but never use this form!

// Booleans
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(true) === 'boolean'; // but never use this form!

// Symbols
typeof Symbol() === 'symbol'
typeof Symbol('foo') === 'symbol'
typeof Symbol.iterator === 'symbol'

// Undefined
typeof undefined === 'undefined';
typeof declaredButUndefinedVariable === 'undefined';
typeof undeclaredVariable === 'undefined'; 

// Objects
typeof {a:1} === 'object';

// use Array.isArray or Object.prototype.toString.call
// to differentiate regular objects from arrays
typeof [1, 2, 4] === 'object';

typeof new Date() === 'object';

// The following is confusing. Don't use!
typeof new Boolean(true) === 'object'; 
typeof new Number(1) === 'object'; 
typeof new String("abc") === 'object';

// Functions
typeof function(){} === 'function';
typeof class C {} === 'function';
typeof Math.sin === 'function';

// This stands since the beginning of JavaScript
typeof null === 'object';

能夠看得出來，對於一些 new 對象，好比 new Number(1)，也會返回 object。具體請參考typeof MDN。

網上有兩種解決方法（有效性未經考證，請相信 jQuery 的方法），一種是用 constructor.nameObject.prototype.constructor MDN，一種是用 Object.prototype.toString.call()Object.prototype.toString()，最終 jQuery 選擇了後者。

var n1 = 1;
n1.constructor.name;//"Number"
var n2 = new Number(1);
n2.constructor.name;//"Number"

var toString = Object.prototype.toString;
toString.call(n1);//"[object Number]"
toString.call(n2);//"[object Number]"

以上屬於科普，原理很少闡述，接下來繼續看源碼 jQuery.type：

// 這個對象是用來將 toString 函數返回的字符串轉成
var class2type = {
    "[object Boolean]": "boolean",
    "[object Number]": "number",
    "[object String]": "string",
    "[object Function]": "function",
    "[object Array]": "array",
    "[object Date]": "date",
    "[object RegExp]": "regexp",
    "[object Object]": "object",
    "[object Error]": "error",
    "[object Symbol]": "symbol"
}
var toString = Object.prototype.toString;

jQuery.type = function (obj) {
    if (obj == null) {
        return obj + "";
    }
    return 
      typeof obj === "object" || typeof obj === "function" ? 
        class2type[toString.call(obj)] || "object" : 
        typeof obj;
}

由於 jQuery 用的是 toString 方法，因此須要有一個 class2type 的對象用來轉換。

jQuery.isPlainObject

這個函數用來判斷對象是不是一個純粹的對象，：

var getProto = Object.getPrototypeOf;//獲取父對象
var hasOwn = class2type.hasOwnProperty;
var fnToString = hasOwn.toString;
var ObjectFunctionString = fnToString.call( Object );

jQuery.isPlainObject = function (obj) {
    var proto, Ctor;

    // 排除 underfined、null 和非 object 狀況
    if (!obj || toString.call(obj) !== "[object Object]") {
        return false;
    }

    proto = getProto(obj);

    // Objects with no prototype (e.g., `Object.create( null )`) are plain
    if (!proto) {
        return true;
    }

    // Objects with prototype are plain iff they were constructed by a global Object function
    Ctor = hasOwn.call(proto, "constructor") && proto.constructor;
    return typeof Ctor === "function" && fnToString.call(Ctor) === ObjectFunctionString;
}

看一下效果：

jQuery.isPlainObject({});// true
jQuery.isPlainObject({ a: 1 });// true
jQuery.isPlainObject(new Object());// true

jQuery.isPlainObject([]);// false
jQuery.isPlainObject(new String('a'));// false
jQuery.isPlainObject(function(){});// false

除了這幾個函數以外，還有個 Array.isArray()，這個真的不用介紹了吧。

總結

總結仍是多說一點的好，如今已經基本理清 jQuery 內部的狀況了？no，還差一點，看下面的代碼：

(function(window) {
  // jQuery 變量，用閉包避免環境污染
  var jQuery = (function() {
    var jQuery = function(selector, context) {
        return new jQuery.fn.init(selector, context, rootjQuery);
    };

    // 一些變量聲明

    jQuery.fn = jQuery.prototype = {
        constructor: jQuery,
        init: function(selector, context, rootjQuery) {
          // 下章會重點討論
        }

        // 原型方法
    };

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

    jQuery.extend = jQuery.fn.extend = function() {};//已介紹

    jQuery.extend({
        // 一堆靜態屬性和方法
        // 用 extend 綁定，而不是直接在 jQuery 上寫
    });

    return jQuery;
  })();

  // 工具方法 Utilities
  // 回調函數列表 Callbacks Object
  // 異步隊列 Defferred Object
  // 瀏覽器功能測試 Support
  // 數據緩存 Data
  // 隊列 Queue
  // 屬性操做 Attributes
  // 事件系統 Events
  // 選擇器 Sizzle
  // DOM遍歷 Traversing
  // 樣式操做 CSS（計算樣式、內聯樣式）
  // 異步請求 Ajax
  // 動畫 Effects
  // 座標 Offset、尺寸 Dimensions

  window.jQuery = window.$ = jQuery;
})(window);

能夠看出 jQuery 很巧妙的總體佈局思路，對於屬性方法和原型方法等區分，防止變量污染等，都作的很是好。閱讀框架源碼只是開頭，有趣的還在後面。