jQuery源碼逐行分析學習01(jQuery的框架結構簡化)

最近在學習jQuery源碼，在此，特別作一個分享，把所涉及的內容都記錄下來，其中有不妥之處還望你們指出，我會及時改正。望各位大神不吝賜教！同時，這也是個人第一篇前端技術博客，對博客編寫還不是很熟悉，美化工做可能不夠到位，也但願你們多多見諒！

首先這篇文章要給你們分享的是：jQuery的框架結構，把框架結構簡單化處理

此處我所學習使用的jQuery版本是2.0.3版本(文件已經上傳到個人GitHub中，你們能夠去下載，地址：https://github.com/cumtchj/jQuery2.0.3)，一個相對比較老的版本，可是其實基本的功能都與新版本相似，該版本開發版代碼共8830行。

此外，2.X相較於1.X版本，去除了對IE6/7/8的支持，這也使得其中減小了不少有關於兼容性的代碼，便於咱們去理解。

下面，咱們就開始一一深刻，剝開jQuery的層層外殼...

首先是一開始的部分，一部分註釋，裏面包含了一些jQuery的信息

接下來從第14行開始就是jQuery真正的源碼了

1 (function(window,undefined){
2 })();

此處是一個匿名函數自執行，它的好處在於，能夠把代碼塊中全部的變量都變成局部變量，這樣就不會形成對全局變量的一個污染，致使代碼衝突。下面舉個例子：

1 (function(){
2     var a=10;
3     function $(){
4         alert(a);
5     }
6 })();
7 alert(a);//調用不到
8 $();//調用不到

可是這樣一來，形成了外部調用不到內部局部變量的狀況，因此須要對外提供使用內部局部變量和方法的接口

1 (function(){
2     var a=10;
3     function $(){
4         alert(a);
5     }    
6     window.$=$;//將函數掛載到window上
7 })();
8 $();//10

在jQuery中就是這樣實現的，在前面(21,94)行，jQuery定義了一些變量和函數，在8826行

1 //(8826)
2 window.jQuery=window.$=jQuery;

將jQuery掛載到了window上，這樣就使得外部能夠訪問到jQuery內部的變量和方法

接下來，在(96,283)行

1 jQuery.fn=jQuery.prototype={}

此處，jQuery.prototype，這代表jQuery是一個基於面向對象的程序，日後就是在給jQuery對象添加一些屬性和方法。針對面向對象，下面舉個例子：

1 //咱們常常會這樣寫
2 $('#div').css();
3 $('#div').html();
4 //這個相似於
5 var arr=new Array();
6 arr.push();
7 arr.sort();
8 //其中
9 $('#div')//是一個函數調用,可是其執行結果是一個對象

接下來，在(285,347)行

1 jQuery.extend=jQuery.fn.extend=function(){}

extend:jQuery的繼承方法,後需添加的代碼經過jQuery方法掛載到jQuery對象中,方便擴展

接下來，在(349,817)行

1 jQuery.extend()

jQuery的擴展工具方法。關於工具方法，下面作一個簡單的解釋：

//$()是一個對象,因此其後的方法是一個實例的方法,相對高級,調用工具方法
$().css();
$().html();
//$是一個函數,在函數下擴展方法是一個靜態方法,是jQuery最底層的東西
$.trim();
$.proxy();

接下來，在(877,2856)行

sizzle:這是一個複雜選擇器的實現，是第三方獨立程序，這意味着之後作相關選擇器開發就可單獨使用sizzle

接下來，在(2880,3042)行

1 jQuery.Callbacks=function(options){}

回調對象:經過回調對象統一管理函數。有關於回調對象，下面舉個例子：

1 function fn1(){alert(1)}
2 function fn2(){alert(2)}
3 var cb=$.Callbacks();
4 cb.add(fn1);
5 cb.add(fn2);//將fn1，fn2添加到cb上
6 cb.fire();//1,2
7 cb.remove(fn2);//移除fn2
8 cb.fire();//1

接下來，在(3043,3183)

1 jQuery.extend({Deferred:function(func){}})

Deferred:延遲對象,對異步的統一管理。下面有關於延遲對象，舉一個簡單的例子：

1 setTimeout(function(){
2 　　alert(1);
3 },1000);
4 alert(2);//2,1

由於setTimeout定時器是一個異步的，因此輸出的結果爲2,1，下面咱們稍做修改：

1 var dfd=$.Deferred();
2 setTimeout(function(){
3     alert(1);
4 dfd.resolve();
5 },1000);
6 dfd.done(function(){
7     alert(2)
8 });//1,2

當使用了延遲對象之後，程序只有執行到resolve方法纔會去執行done中的方法，這樣輸出結果就是1,2了。

接下來，在(3184,3295)行

1 jQuery.support=(function(support){});

support:功能檢測,無需判斷瀏覽器,經過判斷功能檢測瀏覽器版本

例:3199行CheckBox默認狀態,webkit中新版本是'on',老版本是''

接下來，在(3308,3652)行

data()方法:有關於數據緩存的部分。舉個例子：

1 $('#div1').data('name','hello');
2 $('#div1').data('name');//hello

接下來，在(3653,3797)行

1 jQuery.fn.extend({queue:function(type,data){}})

queue:隊列管理,入隊 dequeue:出隊

$('#div1').animate({left:100});
$('#div1').animate({top:100});
$('#div1').animate({width:100});//left->top->width 經過隊列管理執行順序

這個就是經過queue隊列管理實現的順序進行動畫。

接下來，在(3803,4299)

1 jQuery.fn.extend({attr:function(name,value){}})

其中定義了attr(), prop(),val(),addClass()...方法,對元素屬性的操做。

接下來，在(4300,5128)行

其中定義了on() trigger()...方法,事件操做相關方法

接下來，在(5140,6057)行

定義了DOM操做的方法:添加,刪除,獲取,包裝,篩選...

接下來，在(6058,6620)行

css():樣式的操做

接下來，在(6621,7854)行

定義了提交數據和ajax():ajax(),load(),getJson()...

接下來，在(7855,8584)行

animate():運動的操做

接下來，在(8585,8792)行

offset()...:位置和尺寸的方法

最後，在(8804,8821)

jQuery支持模塊化的模式

這樣，jQuery的整個架構簡化就完成了，下面再梳理一下：

 1 (function(){    
 2     (21 , 94) 定義了一些變量和函數 jQuery = function(){};    
 3     (96 , 283) 給JQ對象，添加一些方法和屬性    
 4     (285 , 347) extend : JQ的繼承方法    
 5     (349 , 817) jQuery.extend() : 擴展一些工具方法    
 6     (877 , 2856)  Sizzle : 複雜選擇器的實現     
 7     (2880 , 3042) Callbacks : 回調對象 : 對函數的統一管理    
 8     (3043 , 3183) Deferred : 延遲對象 : 對異步的統一管理    
 9     (3184 , 3295) support : 功能檢測    
10     (3308 , 3652) data() : 數據緩存    
11     (3653 , 3797) queue() : 隊列方法 : 執行順序的管理     
12     (3803 , 4299) attr() prop() val() addClass()等 : 對元素屬性的操做    
13     (4300 , 5128) on() trigger() : 事件操做的相關方法    
14     (5140 , 6057) DOM操做 : 添加 刪除 獲取 包裝 DOM篩選    
15     (6058 , 6620) css() : 樣式的操做    
16     (6621 , 7854) 提交的數據和ajax() : ajax() load() getJSON()    
17     (7855 , 8584) animate() : 運動的方法    
18     (8585 , 8792) offset() : 位置和尺寸的方法    
19     (8804 , 8821) JQ支持模塊化的模式    
20     (8826)  window.jQuery = window.$ = jQuery;    
21 })();

謝謝你們來看個人博客(*￣︶￣)