Jquery源碼分析系列（1）--Jquery整體架構(gòu)

    前兩個月項(xiàng)目組特別忙了，買了一本《Juqery技術(shù)內(nèi)幕，深入解析Jquery架構(gòu)設(shè)計與實(shí)現(xiàn)原理》一直放著睡大覺；進(jìn)入八月份項(xiàng)目終于過了TR5點(diǎn)，算是可一個喘口氣；這本書終于有時間拜讀一下。下面的一兩個月我將每天堅持看幾頁，并陸陸續(xù)續(xù)寫幾篇不倫不類的技術(shù)博客，談?wù)勛约旱男牡皿w會等等。

    首先評價一下這本書吧，我本來想買《鋒利的Jquery》，但是電子版翻了一下，感覺還是有點(diǎn)基礎(chǔ)了；就在網(wǎng)上找找呀，終于看到了這本---《Juqery技術(shù)內(nèi)幕，深入解析Jquery架構(gòu)設(shè)計與實(shí)現(xiàn)原理》，一看作者是阿里大牛，出版時間是14年1月，感覺，應(yīng)該狠不錯，最起碼作者比較牛，講得東西比較新。呵呵呵。不扯淡了，開始進(jìn)入正題。

    第一篇Jquery整體架構(gòu)。

    眾所周知，Jquery是業(yè)界最流行的Js庫（注，有人說是框架，本人不敢茍同，只是覺得Jquery還沒有到達(dá)支撐前端設(shè)計和架構(gòu)的高度；別和我吵，你要非說是框架，我也認(rèn)了）。有人裝文藝說，Jquery的API非常精致和優(yōu)雅；這個評價我想說，敢不敢從技術(shù)角度講一講；不要這么晦澀，弄這么高雅文藝的詞匯來形容。你就說設(shè)計巧妙，架構(gòu)合理，上手容易，不就結(jié)了。好了，我不噴了，接著說。整體模塊可以分為三部分，入口模塊，底層支持模塊以及功能模塊。我畫了一張圖，如下。

圖上就整個構(gòu)架做了一個概括。源碼架構(gòu)如下：

(function( window, undefined ) {    // 構(gòu)造jQuery對象 var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context, rootjQuery );    } // 工具函數(shù) Utilities // 異步隊(duì)列 Deferred // 瀏覽器測試 Support // 數(shù)據(jù)緩存 Data // 隊(duì)列 queue // 屬性操作 Attribute // 事件處理 Event // 選擇器 Sizzle // DOM遍歷 // DOM操作 // CSS操作 // 異步請求 Ajax // 動畫 // 坐標(biāo)，尺寸，大小    window.jQuery = window.$ = jQuery; })(window);

由于設(shè)計比較復(fù)雜，這里不一一介紹，待具體源碼實(shí)現(xiàn)時，在介紹原理及使用技巧等等之類的。

打開源碼庫，所有代碼被包裹在一個立即執(zhí)行的匿名函數(shù)表達(dá)式中；

function（window,undefined）{ var jQuery=...;//1 //.... ...... window.jQuery=window.$=jQuery;//2 })(window);

這樣做的好處有以下幾點(diǎn):

1，創(chuàng)建了一個特殊的函數(shù)作用域（不了解的趕緊去看看作用域鏈，執(zhí)行環(huán)境，活動對象相關(guān)的知識，這里不解釋）；這樣在自己的執(zhí)行環(huán)境中，就不會和已有的函數(shù)，方法，變量（主要指同名）以及第三方庫沖突；在保證自己的代碼不收其他干擾外，同時不會破壞和污染全局環(huán)境和其他執(zhí)行環(huán)境的變量等。

2，window.jQuery=window.$=jQuery; 變量jQuery添加到window對象上，將JQuery添加到最頂層的全局執(zhí)行環(huán)境window對象的作用域中，成為全局變量，添加到其他值執(zhí)行環(huán)境的作用域鏈的最后端，保證其他執(zhí)行環(huán)境可以訪問和使用jQuery.

3,傳入window對象，把window對象充當(dāng)參數(shù)傳入自調(diào)用匿名函數(shù)的內(nèi)部，也就進(jìn)入該執(zhí)行環(huán)境，保證可以迅速訪問到window對象（不需要沿著作用域鏈會退到頂層作用域）；另外就是在壓縮代碼時進(jìn)行優(yōu)化。

4，傳入?yún)?shù)undefined,一方面和傳入window對象一樣，能夠縮短查找undefined時的作用域，并且在壓縮代碼時進(jìn)行優(yōu)化。更重要的是，確保參數(shù)undefined的值是undefined，防止被重寫。、

結(jié)尾

    第一篇，就這樣吧，整體構(gòu)架有點(diǎn)復(fù)雜，自己也是一邊看一邊寫博客，大家發(fā)現(xiàn)不對的地方，多多提建議，共同進(jìn)步。下一篇，我將介紹一下jQuery構(gòu)造函數(shù)的源碼，以及實(shí)現(xiàn)原理和里面的一些比較晦澀難懂的邏輯。