在學(xué)習(xí)jQuery源碼之前姑食，
大家需要對(duì)javascript基礎(chǔ)知識(shí)掌握，
基本的使用方式應(yīng)該比較了解。
有了以上的基礎(chǔ)知識(shí)以后笋敞，
我們打開jQuery的網(wǎng)站(jquery.com)。
點(diǎn)擊這個(gè)Download我們可以獲取到最新的源碼荠瘪，
點(diǎn)進(jìn)去之后了夯巷，
我們可以看到1.1.0和2.0.3的版本。
先來說說他們有什么區(qū)別哀墓，
從2點(diǎn)幾的版本就不支持IE6,7,8了趁餐，
只支持一些高級(jí)瀏覽器，
所以這次源碼分析選擇的是2.0.3的篮绰，
為什么要選擇2.0.3呢后雷，
就是因?yàn)樗恢С諭E6,7,8的話，
這樣的話在源碼當(dāng)中會(huì)減少之前的一些兼容性寫法吠各，
對(duì)于我們了解jQuery實(shí)現(xiàn)的原理還是有幫助的臀突，
所以說選擇2.0.3的版本，讓大家來分析走孽。
下載地址：https://github.com/fewusheng/jquery惧辈，
文件我已經(jīng)下載好了，那我把他打開磕瓷。
我們從第一行開始到最后一行盒齿，一共有8830行，
這個(gè)代碼量是相當(dāng)龐大的困食，
就算我們把這些注釋去掉边翁，代碼量也是非常之多的。
如果一上來就給大家一行一行的講的話硕盹，
我相信不少同學(xué)會(huì)有點(diǎn)懵符匾，剛開始聽就暈掉了，
所以瘩例，我們可以先對(duì)這個(gè)jquery框架進(jìn)行簡(jiǎn)化處理啊胶，
把這個(gè)架子先給大家簡(jiǎn)單的搭出來甸各，
然后，我們?cè)僦饌€(gè)逐個(gè)地進(jìn)行分析焰坪。
首先趣倾，新建個(gè)js文件，
比如某饰，我這里命名的為簡(jiǎn)化JQ源碼儒恋。
然后我們打開jquery，
上來有一堆注釋是吧黔漂。
這會(huì)兒诫尽，我們先不著急，
等后續(xù)的時(shí)候我在給大家詳細(xì)的說炬守。
那我們先從第一行代碼看起：
(function( window, undefined ) {...
這里是把一個(gè)匿名函數(shù)放到一個(gè)小括號(hào)之中牧嫉，
然后到j(luò)query源碼最后的一行有一個(gè)閉合的寫法。
?... })( window );
這樣的寫法劳较，我們來看一下驹止。
打開我們創(chuàng)建的 js 文件。
首先創(chuàng)建一個(gè)函數(shù)观蜗，
把它放在一個(gè)小括號(hào)當(dāng)中，
然后后邊在加個(gè)小括號(hào)衣洁。
(?function( ){
????}) ( );
這種寫法我們把它叫做“匿名函數(shù)自執(zhí)行”
它跟普通的不加這些東西是一樣的墓捻，
里面的代碼也會(huì)執(zhí)行，
那它有什么好處呢坊夫？
那我開個(gè)頁面跟大家說一下砖第。
比如我們?cè)谶@里創(chuàng)建了一個(gè)變量a等于10，
在外邊是找不到的环凿，我們來試一下梧兼。
<script>
(?function( ){
????????var a = 10;
????} ) ( ) ;
????console.log(?a?);
</script>
打印出來的結(jié)果是：
報(bào)了一個(gè)錯(cuò)，這里的a是調(diào)用不到的智听，
所以大家知道了jquery為什么把所以的代碼羽杰，
都放在這個(gè)匿名函數(shù)當(dāng)中，
其作用就是想讓這些代碼變成局部的到推，
這樣就可以防止跟其它代碼發(fā)生沖突,互相不影響考赛。
jquery光把這些內(nèi)容變成局部的，也是不夠的莉测，
它需要對(duì)外提供接口颜骤，我們才可以在外邊找到。
所以說怎樣從匿名函數(shù)對(duì)外提供接口捣卤，
做法很簡(jiǎn)單忍抽，也有很多方法八孝。
比如說有一種方法就是你要對(duì)外提供的接口，
掛在到window的下邊鸠项。
<script>
??? ?(function(){
???????? ?var a = 10;
???????? ?function $(){
????????????????console.log(a);
?????????};
????????window.$ = $;
????????})( );
????????$();
</script>
所以在這個(gè)地方再去調(diào)用的是window下的$,
也就是相當(dāng)于調(diào)用的$干跛，
我們打開網(wǎng)頁刷新一下。
打印結(jié)果是：
這時(shí)的結(jié)果就找到了锈锤，
所以說呢jquery其實(shí)它也是這樣做的驯鳖，
我們打開jquery看到里面定義了很多變量，
除了變量還有很多函數(shù)久免，所以我們來寫一下浅辙，
從21行到94行，定義了一些變量和函數(shù)阎姥。
(function(){
????????(21 , 94)
????????定義了一些變量和函數(shù)
?})( );
其中记舆，有一個(gè)函數(shù)是特別重要的，
就是下邊我們看到j(luò)Query呼巴。
把它寫在我們的js文件里泽腮。
(function(){
????????(21 , 94)
????????定義了一些變量和函數(shù)
????????jQuery = function(){}
})( );
其實(shí)這個(gè)jQuery就是我們平時(shí)用的
$()去找東西，jQuery()去找元素這個(gè)對(duì)外的接口衣赶，
這里它是一個(gè)局部的函數(shù)诊赊，我們要怎樣找到它呢？
就要向上面說過的要提供對(duì)外的接口府瞄，
所以在jQuery里面對(duì)應(yīng)的接口在8826行碧磅。
這里就是把 jQuery 函數(shù)掛在到了 window 下邊，
或者 window 下的 $ 遵馆，
所以說我們就可以通過外邊來找到 jQuery鲸郊，
或者說通過$ 找到 jQuery 這個(gè)函數(shù)，
這就是對(duì)外提供的接口货邓。
接下來我們繼續(xù)網(wǎng)下看秆撮，到了96行，
這里我們看到了jQuery的prototype换况，
看到prototype我們就知道這是原型职辨，
所以說原型是面對(duì)對(duì)象的東西，
從而得知了jQuery就是基于面向?qū)ο蟮某绦?
所以說從96行開始到283行結(jié)束复隆，
這些就是給jQuery對(duì)象拨匆，添加一些方法和屬性。
接下來挽拂，
我給大家說一下為什么jQuery是基于面向?qū)ο蟮某绦颉?/span>
<script>
????????$('#div1').css();
????????$('#div1').html();
???? ? ?// 像不像我們平時(shí)使用的面向?qū)ο蟀惭每。?/span>
????????// 比如說我建一個(gè)數(shù)組對(duì)象
????????var arr = new Array();
????????// 這樣了，我就可以在這些數(shù)組中寫一些方法
????????arr.push();
????????arr.sort();
</script>
大家來看看，
之所以push和sort可以調(diào)用的話台腥，
說明前面是對(duì)象在調(diào)用這個(gè)方法宏赘。
這種寫法特別類似于我們的jQuery的寫法，
那么大家就知道了黎侈，
如果$('#div1')是個(gè)對(duì)象的話察署，
就是不是可以這樣去寫了啊。
所以說這個(gè)和面向?qū)ο笫且粯拥模?/span>
只不過$('#div1')不是一個(gè)對(duì)象峻汉，
它只是一個(gè)函數(shù)調(diào)用贴汪，
如果說它的執(zhí)行結(jié)果是對(duì)象，
是不是也可以休吠？
我們接著剛才看的那個(gè)jQuery函數(shù)扳埂，
可以發(fā)現(xiàn)函數(shù)執(zhí)行完了后，
結(jié)果 rerun 當(dāng)中就是一個(gè)new構(gòu)造函數(shù)的過程瘤礁，
所以說返回的就是一個(gè)jQ對(duì)象啊阳懂，
既然可以返回的是對(duì)象，
那么這個(gè)對(duì)象就可以調(diào)用這個(gè)方法了柜思。
我們繼續(xù)岩调，從285 - 347行，
jQuery.extend = jQuery.fn.extend = function() {
????????????????......
????};
extend是jq中繼承的一個(gè)方法赡盘，
它的作用就是希望后續(xù)添加的代碼号枕，
都可以通過extend方法，
把它掛在到j(luò)Query對(duì)象當(dāng)中陨享。
利用繼承有利于后續(xù)的擴(kuò)展堕澄，
和插件的擴(kuò)展。
接著霉咨，從349 -817行，
jQuery.extend({
????????????...
????});
這一塊就是擴(kuò)展工具的方法拍屑，
在jQuery給了我們兩種操作代碼的方式途戒，
<script>
????// 一種是
????$().css();
????$().html();
????// 還有一種是
????$.trim();
????$.proxy();
</script>
它們還是有區(qū)別的，
上面那種它是面向?qū)ο髮?shí)例的方法僵驰，
下面這里是函數(shù)下邊擴(kuò)展的方法喷斋，
這就是擴(kuò)展一些靜態(tài)的方法。
所以在jQuery當(dāng)中蒜茴，
來給面向?qū)ο髷U(kuò)展靜態(tài)屬性和靜態(tài)方法的時(shí)候星爪，
我們就把它叫做擴(kuò)展工具方法。
下邊這種方法既可以給jq用也可以給原生的js來用粉私，
而上面的方法只能給jQuery對(duì)象用顽腾。
所以說擴(kuò)展工具方法用利于
后期我們寫東西的時(shí)候用，
其實(shí)我們可以把靜態(tài)方法，
看成是在jQuery中最底層的一個(gè)東西抄肖，
而上面的是上一層或更高級(jí)的東西久信，
它們倆是這樣一種關(guān)系，
所以說很多方法都是實(shí)例方法漓摩，
里面調(diào)的都是工具方法裙士。
第一集，[No.1] jQuery源碼解析—搭建框架（1）管毙。
別走開腿椎，下集更精彩。
喜歡文章的小伙伴夭咬，
希望大家多多轉(zhuǎn)發(fā)分享啃炸，
你的分享就是我的動(dòng)力！
喜歡 分享 or