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

1 初識(shí)jQuery

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

2 jQuery對(duì)象

一般情況下，我們會(huì)這樣使用jQuery：

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

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

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

}

這個(gè)方法就是$('div')的入口方法，$是jQuery的簡(jiǎn)寫，就相當(dāng)于jQuery('div') ，可以看出，這個(gè)方法只做了一件事，那就是返回jQuery.fn.init()函數(shù)的實(shí)例對(duì)象，那jQuery.fn.init 又是什么呢，我們?cè)倏聪旅娴拇a：

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

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

init.prototype = jQuery.fn;
這句話是什么意思呢，這句話是讓init方法的prototype對(duì)象指向了jQuery.fn對(duì)象，那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的原型對(duì)象，這個(gè)原型對(duì)象中定義了一些對(duì)this對(duì)象進(jìn)行操作的方法。到這里，你是不是感覺到有點(diǎn)繞，不要著急，我們來梳理一下思路：jQuery首先定義了一個(gè)init方法，然后在init的原型對(duì)象prototype上定義了一系列操作方法。最后將init方法的實(shí)例對(duì)象返回。所以上面的過程可以簡(jiǎn)化如下(偽代碼表示)：

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的原型對(duì)象上？

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

我們?cè)賮砜纯?init 函數(shù)中返回的 this 到底是什么，我在之前的博客中講過，函數(shù)中的this總是指向運(yùn)行期的調(diào)用者，那init的調(diào)用者是誰呢？在上面代碼中似乎找不到調(diào)用者，這時(shí)我們就需要深入的理解new運(yùn)算符的運(yùn)行機(jī)制了，借用我之前在博客中對(duì)new運(yùn)算符的描述，我們對(duì)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;

}

如果對(duì)new的運(yùn)行機(jī)制不理解的請(qǐng)參考博文： javascript new 的運(yùn)行機(jī)制

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

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

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

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

3 jQuery 的缺陷

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

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

最新評(píng)論