最近在學習jQuery源碼，在此，特別做一個分享，把所涉及的內容都記錄下來，其中有不妥之處還望大家指出，我會及時改正。望各位大神不吝賜教！同時，這也是我的第一篇前端技術博客，對博客編寫還不是很熟悉，美化工作可能不夠到位，也希望大家多多見諒！ 首先這篇文章要給大家分享的是：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 })();
謝謝大家來看我的博客(*￣︶￣)
---------------------
作者：cumtchj
來源：CSDN
原文：https://blog.csdn.net/u014177575/article/details/79351161
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
