最近在看jQuery的源碼，查了一些資料，偶爾看到了網(wǎng)易云課堂里有套視頻是對源碼進行講解的，是叫妙味課堂出的，看著還不錯，對這方面感興趣的推薦看下，

個人感覺很不錯。所以發(fā)些文章，邊學邊記錄。

版本：2.0.3

整體的架構(gòu)：

(function(){

(21,94) 定義變量和函數(shù)，賦值JQuery

(96,283)添加JQuery的一些方法和屬性

(285,347) extend JQ的繼承方法

(877,2856) Sizzle：復雜選擇器的實現(xiàn)。

(2880,3042) Callbacks:回調(diào)對象：對函數(shù)的統(tǒng)一管理

(3043,3183) Deferred:延遲對象：對異步的統(tǒng)一管理

(3184,3295) Support:功能檢測

(3308,3652) data():數(shù)據(jù)緩存

(3653,3797) queue():隊列管理

(3803,4299) attr() prop() val() addClass()等，對元素屬性的操作。

(4300,5128) on() trigger():時間操作的相關(guān)方法

(5140,6057) DOM操作：添加 刪除 獲取 包裝 篩選。

(6058,6620) css():樣式操作（包括處理瀏覽器的兼容）

(6621,7854) 提交數(shù)據(jù)的ajax() load() getJson()

(7855,8584) animate() 運動方法的實現(xiàn)

(8585,8792) offset() 位置和尺寸等方法

(8804,8821) Jq支持模塊化的支持

(8826) window.JQuery=window.$=JQuery；

})();

?

JQuery的源碼中，所有代碼是被包含在一個自執(zhí)行的方法中的:

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

至于為什么需要傳入window對象，而不是在內(nèi)部方法中直接使用，是因為有兩原因：

1：為了便于壓縮 2：當方法內(nèi)部使用的時候，查找的速度快。

使用undefined這個參數(shù)是為了防止在方法外部將undefined賦值，例如：

var undefined=1

如果這樣賦值，那undefined的值從此以后變?yōu)?，這回影響以后的判斷。

對于JQuery的調(diào)用方式，屬于鏈式調(diào)用，也就是說JQury().css()這種方式調(diào)用，

那這種方式就區(qū)別于一般的對象操作，先new出來一個對象，然后再調(diào)用原型鏈上的方法。

這是因為JQuery調(diào)用時，返回的是當前的對象。

例如：

function jQuery(){return new jQuery.prototype.init(); } jQuery.prototype.init=function(){
　　//初始化代碼 } jQuery.prototype.css=function(){ } jQuery.prototy.init.prototy=jQuery.prototype; jQuery().css();

這樣調(diào)用時，就不比單獨調(diào)用jQuery的init方法了，直接使用jQuery()的方法時，自動就會執(zhí)行初始化方法，并返回。

這樣返回的是：

jQuery.prototype.init

這個對象，這個對象上的原型并沒有jQuery原型上的屬性和方法，所以要執(zhí)行

jQuery.prototy.init.prototy=jQuery.prototype;

把init方法的原型，指向jQuery對象的原型。這樣就實現(xiàn)了這種調(diào)用方式。

?

轉(zhuǎn)載于:https://www.cnblogs.com/y8932809/p/5832317.html

總結(jié)

以上是生活随笔為你收集整理的JQuery源码解析-整体架构的设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。