這篇文章主要和大家談一談jQuery核心架構(gòu)設(shè)計(jì)，什么是jQuery核心架構(gòu)設(shè)計(jì)，多方面了解jQuery核心架構(gòu)設(shè)計(jì)，感興趣的小伙伴們可以參考一下

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

1 初識jQuery

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

2 jQuery對象

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

$('div').each(function(index){

  //this ...

});

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

jQuery = function( selector, context ) {

 return new jQuery.fn.init( selector, context );

}

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

init = jQuery.fn.init = function( selector, context, root ) {

 //... 

 return this;

}

init.prototype = jQuery.fn;

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

init.prototype = jQuery.fn;

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

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

};

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

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的原型對象上？

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

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

new init(selector,context,root) = {

 var obj = {};

 obj.__proto__ = init.prototype;

 init.call(obj,selector,context,root);

 return typeof result === 'obj'? result : obj;

}

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

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

jQuery每執(zhí)行一次查詢就會創(chuàng)建一個(gè)jQuery對象，而在同一個(gè)應(yīng)用程序中，所有jQuery對象都會共享同一個(gè)jQuery原型對象。因此，jQuery對象不僅包含了DOM查詢結(jié)果集，還繼承了jQuery原型對象上的操作方法。這樣，你就可以在查詢后直接調(diào)用方法來操作這些DOM元素了。這就是jQuery的核心架構(gòu)設(shè)計(jì)，簡單、方便、實(shí)用！

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

3 jQuery 的缺陷

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

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)jquery有所啟發(fā)。