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

個(gè)人感覺很不錯(cuò)。所以發(fā)些文章，邊學(xué)邊記錄。

版本：2.0.3

整體的架構(gòu)：

(function(){

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

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

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

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

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

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

(3184,3295) Support:功能檢測

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

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

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

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

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

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

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

(7855,8584) animate() 運(yùn)動(dòng)方法的實(shí)現(xiàn)

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

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

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

})();

?

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

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

至于為什么需要傳入window對(duì)象，而不是在內(nèi)部方法中直接使用，是因?yàn)橛袃稍?#xff1a;

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

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

var undefined=1

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

對(duì)于JQuery的調(diào)用方式，屬于鏈?zhǔn)秸{(diào)用，也就是說JQury().css()這種方式調(diào)用，

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

這是因?yàn)镴Query調(diào)用時(shí)，返回的是當(dāng)前的對(duì)象。

例如：

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)用時(shí)，就不比單獨(dú)調(diào)用jQuery的init方法了，直接使用jQuery()的方法時(shí)，自動(dòng)就會(huì)執(zhí)行初始化方法，并返回。

這樣返回的是：

jQuery.prototype.init

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

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

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

?

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

總結(jié)

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

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