jquery源碼-extend

上次學習到jQuery的構成,接下來學習jQuery核心部分的extend。它是製作插件的一種方式。

上次說到了jQuery.fn也就是jQuery的原型,而jQuery的extend是jQuery.fn的屬性。

extend是一個函數,它的返回值有兩種情況,對象或是jQuery構造函數的引用。

現在要說的是返回值是jQuery構造函數的情況。 

在代碼(26行)jQuery.fn上增加了extend方法,同時又賦值給了另外一個引用

jQuery.extend,這樣在以後就可以使用jQuery.fn.extend或者jQuery.extend。

 

接下來看代碼的(70行),這是對jQuery.extend的調用參數是一個對象,對象裏面有

兩個方法isWindow,isNumeric。

 

在回到代碼的第(27行),聲明瞭一堆的參數。首先看target,它的值爲jQuery.extend

函數的第一個參數或者爲一個對象。length爲arguments的長度,i的默認值爲1。

 

接下來是對target類型的判斷,這裏先忽略掉直接看代碼的第(41行)。

還記得代碼(70行)對jQuery.extend的調用嗎?值傳遞了一個參數是一個對象,也就是說

到現在代碼(41行)的判斷是成立的,所以代碼(42行)對target進行了重新賦值,這裏的this就是jQuery構造函數的引用。

 

接下來代碼(46行)開始是一個雙層的循環,第一成遍歷的是jQuery.extend實參,這裏

只有一個參數所以length爲1。代碼(47行)對options賦值爲jQuery.extend的參數。

代碼(48行)對options進行了遍歷這裏遍歷的也就是傳遞的實參對象。

代碼(49行)jQuery構造函數上的name屬性的值賦值給變量src。

代碼(50行)實參的name屬性的值賦值給copy。

代碼(52行)判斷如果實參傳遞進來的值是jQuery構造函數引用則跳過,因爲這樣沒有任何意義。

代碼(56行)的判斷不成立,所以直接看(61行),這裏在jQuery構造函數上增加name屬性其值爲copy(實參name屬性的值)。

 

到此,就將傳遞進來的對象依次添加到jQuery的構造函數上了。這裏有一點需要注意:

使用這樣的方式進行擴展的屬性或者方法只能通過$.xxx或者jQuery.xxx來使用,

不能通過$('#demo').xxx來使用,因爲xxx根本沒在jQuery的原型上。

 

使用$('#demo')的方式都會經過構造方法,返回的對象能使用的方法都在原型上,

所以這樣的方式是訪問不到通過jQuery.extend進行擴展的方法和屬性。因爲通過

jQuery.extend擴展的屬性或者方法都添加在了jQuery的構造函數上。

之所以這樣做的原因是,使用相關方法或者屬性不需要經過jQuey的構造方法。因爲有些方法根本不需要查找DOM元素。

 

總結:

jQuery.extend是jQuery.prototype上的一個屬性,每個jQuery對象都會有extend方法。

但是通過jQuery.extend擴展的方法和屬性都添加到了jQuery的構造函數上,

並不在jQuery.prototype上。(暫時這些)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章