在學習jQuery源碼之前，
大家需要對javascript基礎知識掌握，
基本的使用方式應該比較了解。
有了以上的基礎知識以后，
我們打開jQuery的網站(jquery.com)。
點擊這個Download我們可以獲取到最新的源碼，
點進去之后了，
我們可以看到1.1.0和2.0.3的版本。
先來說說他們有什么區別，
從2點幾的版本就不支持IE6,7,8了，
只支持一些高級瀏覽器，
所以這次源碼分析選擇的是2.0.3的，
為什么要選擇2.0.3呢，
就是因為它不支持IE6,7,8的話，
這樣的話在源碼當中會減少之前的一些兼容性寫法，
對于我們了解jQuery實現的原理還是有幫助的，
所以說選擇2.0.3的版本，讓大家來分析。
下載地址：https://github.com/fewusheng/jquery，
文件我已經下載好了，那我把他打開。
我們從第一行開始到最后一行，一共有8830行，
這個代碼量是相當龐大的，
就算我們把這些注釋去掉，代碼量也是非常之多的。
如果一上來就給大家一行一行的講的話，
我相信不少同學會有點懵，剛開始聽就暈掉了，
所以，我們可以先對這個jquery框架進行簡化處理，
把這個架子先給大家簡單的搭出來，
然后，我們再逐個逐個地進行分析。
首先，新建個js文件，
比如，我這里命名的為簡化JQ源碼。
然后我們打開jquery，
上來有一堆注釋是吧。
這會兒，我們先不著急，
等后續的時候我在給大家詳細的說。
那我們先從第一行代碼看起：
(function( window, undefined ) {...
這里是把一個匿名函數放到一個小括號之中，
然后到jquery源碼最后的一行有一個閉合的寫法。
?... })( window );
這樣的寫法，我們來看一下。
打開我們創建的 js 文件。
首先創建一個函數，
把它放在一個小括號當中，
然后后邊在加個小括號。
(?function( ){
????}) ( );
這種寫法我們把它叫做“匿名函數自執行”
它跟普通的不加這些東西是一樣的，
里面的代碼也會執行，
那它有什么好處呢？
那我開個頁面跟大家說一下。
比如我們在這里創建了一個變量a等于10，
在外邊是找不到的，我們來試一下。
<script>
(?function( ){
????????var a = 10;
????} ) ( ) ;
????console.log(?a?);
</script>
打印出來的結果是：
報了一個錯，這里的a是調用不到的，
所以大家知道了jquery為什么把所以的代碼，
都放在這個匿名函數當中，
其作用就是想讓這些代碼變成局部的，
這樣就可以防止跟其它代碼發生沖突,互相不影響。
jquery光把這些內容變成局部的，也是不夠的，
它需要對外提供接口，我們才可以在外邊找到。
所以說怎樣從匿名函數對外提供接口，
做法很簡單，也有很多方法。
比如說有一種方法就是你要對外提供的接口，
掛在到window的下邊。
<script>
??? ?(function(){
???????? ?var a = 10;
???????? ?function $(){
????????????????console.log(a);
?????????};
????????window.$ = $;
????????})( );
????????$();
</script>
所以在這個地方再去調用的是window下的$,
也就是相當于調用的$，
我們打開網頁刷新一下。
打印結果是：
這時的結果就找到了，
所以說呢jquery其實它也是這樣做的，
我們打開jquery看到里面定義了很多變量，
除了變量還有很多函數，所以我們來寫一下，
從21行到94行，定義了一些變量和函數。
(function(){
????????(21 , 94)
????????定義了一些變量和函數
?})( );
其中，有一個函數是特別重要的，
就是下邊我們看到jQuery。
把它寫在我們的js文件里。
(function(){
????????(21 , 94)
????????定義了一些變量和函數
????????jQuery = function(){}
})( );
其實這個jQuery就是我們平時用的
$()去找東西，jQuery()去找元素這個對外的接口，
這里它是一個局部的函數，我們要怎樣找到它呢？
就要向上面說過的要提供對外的接口，
所以在jQuery里面對應的接口在8826行。
這里就是把 jQuery 函數掛在到了 window 下邊，
或者 window 下的 $ ，
所以說我們就可以通過外邊來找到 jQuery，
或者說通過$ 找到 jQuery 這個函數，
這就是對外提供的接口。
接下來我們繼續網下看，到了96行，
這里我們看到了jQuery的prototype，
看到prototype我們就知道這是原型，
所以說原型是面對對象的東西，
從而得知了jQuery就是基于面向對象的程序,
所以說從96行開始到283行結束，
這些就是給jQuery對象，添加一些方法和屬性。
接下來，
我給大家說一下為什么jQuery是基于面向對象的程序。
<script>
????????$('#div1').css();
????????$('#div1').html();
???? ? ?// 像不像我們平時使用的面向對象啊，
????????// 比如說我建一個數組對象
????????var arr = new Array();
????????// 這樣了，我就可以在這些數組中寫一些方法
????????arr.push();
????????arr.sort();
</script>
大家來看看，
之所以push和sort可以調用的話，
說明前面是對象在調用這個方法。
這種寫法特別類似于我們的jQuery的寫法，
那么大家就知道了，
如果$('#div1')是個對象的話，
就是不是可以這樣去寫了啊。
所以說這個和面向對象是一樣的，
只不過$('#div1')不是一個對象，
它只是一個函數調用，
如果說它的執行結果是對象，
是不是也可以？
我們接著剛才看的那個jQuery函數，
可以發現函數執行完了后，
結果 rerun 當中就是一個new構造函數的過程，
所以說返回的就是一個jQ對象啊，
既然可以返回的是對象，
那么這個對象就可以調用這個方法了。
我們繼續，從285 - 347行，
jQuery.extend = jQuery.fn.extend = function() {
????????????????......
????};
extend是jq中繼承的一個方法，
它的作用就是希望后續添加的代碼，
都可以通過extend方法，
把它掛在到jQuery對象當中。
利用繼承有利于后續的擴展，
和插件的擴展。
接著，從349 -817行，
jQuery.extend({
????????????...
????});
這一塊就是擴展工具的方法，
在jQuery給了我們兩種操作代碼的方式，
<script>
????// 一種是
????$().css();
????$().html();
????// 還有一種是
????$.trim();
????$.proxy();
</script>
它們還是有區別的，
上面那種它是面向對象實例的方法，
下面這里是函數下邊擴展的方法，
這就是擴展一些靜態的方法。
所以在jQuery當中，
來給面向對象擴展靜態屬性和靜態方法的時候，
我們就把它叫做擴展工具方法。
下邊這種方法既可以給jq用也可以給原生的js來用，
而上面的方法只能給jQuery對象用。
所以說擴展工具方法用利于
后期我們寫東西的時候用，
其實我們可以把靜態方法，
看成是在jQuery中最底層的一個東西，
而上面的是上一層或更高級的東西，
它們倆是這樣一種關系，
所以說很多方法都是實例方法，
里面調的都是工具方法。
第一集，[No.1] jQuery源碼解析—搭建框架（1）。
別走開，下集更精彩。
喜歡文章的小伙伴，
希望大家多多轉發分享，
你的分享就是我的動力！
喜歡 分享 or