jQuery對于大家而言并不陌生，因此關于它是什么以及它的作用，在這里我就不多言了，而本篇文章的目的是想通過對源碼簡單的分析來討論 jQuery 的核心架構設計，以及jQuery 是如何利用javascript中的高級特性來構建如此偉大的javascript庫。

1 初識jQuery

從核心功能來看，jQuery僅僅做了一件簡單而又平凡的事：查詢。它的語法如此簡潔明了，以致于很多人在不知道javascript是什么的時候就已經會用jQuery了，用一個詞形容就是：大道至簡。 從設計層面來看，我們可以將jQuery提供方法分為兩大類：靜態方法和實例方法。靜態方法就是直接通過$訪問的方法，這些方法一般不對dom元素操作，而是提供了一些常用的工具，比如ajax請求、以及對字符串的一些常用操作，除此之外，jQuery還提供了對自身的擴展機制，你可以通過extend方法來編寫你需要的組件。而實例方法和靜態方法不一樣，它是用來對jQuery查詢的DOM元素進行操作，jQuery執行$()會構建一個jQuery對象，這個對象以數組的方法存儲查詢出的所有DOM元素，然后在這個對象的原型鏈上實現了對這些DOM操作的方法，比如each()方法就是用來遍歷每一個DOM元素的。你可能會注意到，我剛說這個對象“以數組的方式”存儲，那就是說，jQuery構建的這個對象不是數組，那這個對象到底是什么？ 其實這個對象就是jQuery的核心，也被稱作“jQuery對象”。因此，本文的重點就是對jQuery對象進行分析和討論。

2 jQuery對象

一般情況下，我們會這樣使用jQuery：

$('div').each(function(index){  //this ...});

$('div')執行完后回返回一個jQuery對象，each()方法是對這個對象中的DOM元素進行遍歷，我們先看看$('div')的執行過程（本文源碼摘自jQuery 3.0）：

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

這個方法就是$('div')的入口方法，$是jQuery的簡寫，就相當于jQuery('div') ，可以看出，這個方法只做了一件事，那就是返回jQuery.fn.init()函數的實例對象，那jQuery.fn.init 又是什么呢，我們再看下面的代碼：

init = jQuery.fn.init = function( selector, context, root ) { //...  return this;}init.prototype = jQuery.fn;

jQuery.fn.init和init引用了同一個方法，這個方法根據selector查詢出符合條件的DOM元素，并返回，可你會發現，返回的是this，這個this是什么呢？我們待會分析，先看下面的這句話：

init.prototype = jQuery.fn;
這句話是什么意思呢，這句話是讓init方法的prototype對象指向了jQuery.fn對象，那jQuery.fn又是什么鬼？ 我們繼續看代碼：

jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: version, constructor: jQuery, // The default length of a jQuery object is 0 length: 0, // Execute a callback for every element in the matched set. each: function( callback ) {  return jQuery.each( this, callback ); },   splice: arr.splice};

為了節省篇幅，我省略了其中一些代碼，從這里可以看出，jQuery.fn 其實就是jQuery的原型對象，這個原型對象中定義了一些對this對象進行操作的方法。到這里，你是不是感覺到有點繞，不要著急，我們來梳理一下思路：jQuery首先定義了一個init方法，然后在init的原型對象prototype上定義了一系列操作方法。最后將init方法的實例對象返回。所以上面的過程可以簡化如下(偽代碼表示)：

var init = function(selector,context,root){ //... return this;}init.prototype = { length:0, each:function(callback){  //... }, splice:[].splice}jQuery = function(selector,context,root){ return new init(selector,context,root);}

那么問題來了，jQuery.fn中的方法為什么不直接定義在init的prototype上，而要定義在jQuery的原型對象上？

其實，這樣做的目的是為了提高jQuery的查詢效率，如果直接定義在init的prototype對象上，那么每執行一次查詢，就會在內存中創建這樣一個龐大的prototype對象，而如果把這個對象定義在jQuery的prototype上，在jQuery加載時，這個對象就會被初始化并一直存在于內存中，以后每次執行$()時，只需要將init中的prototype指向這個對象就可以了，而不用每次都去創建一遍相同的對象。

我們再來看看 init 函數中返回的 this 到底是什么，我在之前的博客中講過，函數中的this總是指向運行期的調用者，那init的調用者是誰呢？在上面代碼中似乎找不到調用者，這時我們就需要深入的理解new運算符的運行機制了，借用我之前在博客中對new運算符的描述，我們對new init()的執行過程進行如下分解：

new init(selector,context,root) = { var obj = {}; obj.__proto__ = init.prototype; init.call(obj,selector,context,root); return typeof result === 'obj'? result : obj;}

如果對new的運行機制不理解的請參考博文： javascript new 的運行機制

從上述分解過程可以看出，javascript在通過 new 來創建一個實例對象的時候，會先創建了一個普通對象obj，然后將obj的內部屬性__proto__指向了init的原型對象，因此obj的原型鏈將被改變，而第3步使用call方法調用init()，所以init中的this指的就是這里的obj對象。

init()執行以后，會將匹配到的所有DOM對象以數組的方式存儲到this對象中并返回，也就是返回了obj對象，而new運算符最終也會將這個 obj 對象返回以作為新的實例對象。所以new運算符返回的這個實例對象具備兩個特點：一是包含了DOM查詢結果集，二是其原型鏈繼承了init的prototype，而 init 的 prototype 又指向了jQuery.fn對象，因此實例對象也具備了這些操作方法。

jQuery每執行一次查詢就會創建一個jQuery對象，而在同一個應用程序中，所有jQuery對象都會共享同一個jQuery原型對象。因此，jQuery對象不僅包含了DOM查詢結果集，還繼承了jQuery原型對象上的操作方法。這樣，你就可以在查詢后直接調用方法來操作這些DOM元素了。這就是jQuery的核心架構設計，簡單、方便、實用！

如果你還不理解上面的講解，不要著急，我按照jQuery的設計思路寫了一個完整的小項目jDate，你可以對比著理解！jDate項目已上傳至GitHub，你可以點擊這里查看完整代碼：jDate ,如有不同見解，歡迎討論！

3 jQuery 的缺陷

通過對jQuery的核心架構分析，我們會發現，每執行一次查詢，jQuery就要在內存中構建一個復雜的jQuery對象，雖然說每個jQuery對象都共享同一個jQuery原型，但jQuery的查詢過程遠比你想象的要復雜，它既要考慮各種不同的匹配標識，同時又要考慮不同瀏覽器的兼容性。因此，如果你只是對DOM做一些簡單的操作，建議使用原生方法 querySelector 替代 jQuery，不過在使用原生方法時，對于不同的應用場景你可能要做一些兼容性的工作，你要學會取舍，不要過度依賴jQuery！

以上就是本文的全部內容，希望對大家學習jquery有所啟發。