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

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

版本：2.0.3

整體的架構：

(function(){

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

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

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

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

(2880,3042) Callbacks:回調對象：對函數的統一管理

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

(3184,3295) Support:功能檢測

(3308,3652) data():數據緩存

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

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

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

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

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

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

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

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

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

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

})();

?

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

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

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

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

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

var undefined=1

如果這樣賦值，那undefined的值從此以后變為1，這回影響以后的判斷。

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

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

這是因為JQuery調用時，返回的是當前的對象。

例如：

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

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

這樣返回的是：

jQuery.prototype.init

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

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

把init方法的原型，指向jQuery對象的原型。這樣就實現了這種調用方式。

?

轉載于:https://www.cnblogs.com/y8932809/p/5832317.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。