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 })();
謝謝大家來看我的部落格(*￣︶￣)