上次學習到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上。(暫時這些)