jQuery源碼逐行分析學習01(jQuery的框架結構簡化)
最近在學習jQuery源碼，在此，特別做一個分享，把所涉及的內容都記錄下來，其中有不妥之處還望大家指出，我會及時改正。望各位大神不吝賜教！同時，這也是我的第一篇前端技術博客，對博客編寫還不是很熟悉，美化工作可能不夠到位，也希望大家多多見諒！
首先這篇文章要給大家分享的是：jQuery的框架結構，把框架結構簡單化處理
此處我所學習使用的jQuery版本是2.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 })();
謝謝大家來看我的博客(*￣︶￣)
jQuery源碼逐行分析學習01(jQuery的框架結構簡化)