JQuery外掛機制

js語言靈活性很強，很多的語法是其它語言所不及的，非常的方便。

在JS中{}是物件包，[]是陣列包，所以很多地址可以看到{test:1,tes2:2}等內容這個實際就是一個物件包含了兩個屬性。[1,2,3,4]這個實際就是一個數組有四個元素。

開發JQuery外掛實際就是給JQuery物件或選擇器物件新增函式，當然可以使用的方法有很多種，如果我們只給JQuery新增一個函式其實可以用最簡單的方法

jQuery.method_name=function(){

函式主體

}

可以通過jQuery.method_name();來呼叫這個方法

當然往往在實際中很少出現只新增一個函式，一般會新增多個函式和多個屬性給JQuery或選擇器物件。那麼用上面的方法就不那麼方便。這個時候就可以使用JQuery內部提供的一個外掛機制來批量新增，這樣不但方便，而且可以把一個功能塊包裝在一個外掛體內，方便以後修改與更新。

以下是JQuery外掛函式程式碼（jQuery [email protected]）,這段程式碼在JQuery的共用性很高如果不瞭解框架整體不要去修改。

取出JQuery外掛機制程式碼分析下，進一步瞭解JQuery外掛執行情況，從而更好的去開發外掛。當然如有不當之處還請留言指正。

/* JS中可以不寫入傳參，函式內部可以通過arguments來獲取傳入的引數集合通過下標可以取出對應的引數（這算的上是JS的特殊功能吧），函式也運用了條件性遞迴處理。*/

p.extend = p.fn.extend = function() {

/* 初始化區域性基本變數，其中 h 取出第一個傳入的引數（如果沒有傳入引數則是undefined），j 獲取傳入引數的個數 */

var a, c, d, e, f, g, h = arguments[0] || {}, i = 1, j = arguments.length, k = !1;

/* 以下程式碼是判斷第一個引數不能為布林值，如果是儲存這個布林值到k中，再取出第二個引數到h中如果沒有第二個引數寫入空物件。 */
typeof h == "boolean" && (k = h, h = arguments[1] || {}, i = 2),

/* 以下程式碼是判斷 h（傳入的第一個引數或第二個引數）是否為物件，不是物件再判斷是否為函式，如果也不是函式就寫入空物件 */

typeof h != "object" && !p.isFunction(h) && (h = {}),

/*以下程式碼判斷傳入的引數個數是否與 i（如果第一個引數不是布林值則為1否則為2）相等，如果相等則h為物件本身（JQuery或選擇器物件）然後i減1 */

j === i && (h = this, --i);

/* 通過上面的初始操作後：

沒有傳入引數： i 為 1，h 為 空物件 ，k 為 false 無意義呼叫

傳入一個引數：引數為布林值時 i 為 2,h 為 空物件，k 為 傳入的布林值 無意義呼叫；否則 i 為 0 ，h 為 JQuery物件或選擇器物件 ， k 為false 外掛常用方式傳入的（引數是物件一般以{}形式傳入）

傳入兩個引數：第一個引數為布林值 i 為 1 ，h 為 JQuery物件或選擇器物件,k 為 傳入的布林值；否則 i 為 1 ，h 為 傳入的第一個引數（物件或函式）或空物件，k 為 false

傳入兩個以上引數：第一個引數為布林值 i 為 2 ，h為 傳入的第二個引數（物件或函式）或空物件，k 為 傳入的布林值；否則 i 為 1 ，h 為傳入的第一個引數（物件或函式）或空物件, k 為false

通過for迴圈出傳入的引數(如果i不大於j那迴圈不成立)這個迴圈體主要是新增擴充套件，如果沒有進入迴圈體內的呼叫都是無意義的呼叫

迴圈體內要取到的的變數包含 h , k 。這兩個變數直接受傳入的引數影響。如果第一個引數是布林值那麼h就是第二個引數

*/

for (; i < j; i++)

/* 判斷是否有傳入對應個數的引數 */

if ((a = arguments[i]) != null)

/* 迴圈出引數的內容 */

for (c in a) {

/* 取出 h （物件）中對應下標的元素，當然如果沒有那麼 d 為undefined */

d = h[c],

/* 取出迴圈 a 中對應下標的元素 */

e = a[c];

/* 判斷兩個取出的內容是否絕對性的相同，如果是跳出本次迴圈處理，進入下次迴圈處理中 */

if (h === e)

/* 進行下一次迴圈 */

continue;

/* 如果 k ,e 為真並且 e 是陣列或單純物件（非DOM物件）時成立 */

k && e && (p.isPlainObject(e) || (f = p.isArray(e))) ?

/* 以上條件成立時執行：如果e是陣列時f為真 */

(f ?

/*如果e是陣列那麼置f為false，當d為真並且是陣列時g儲存d，否則g為空陣列物件。*/

(f = !1, g = d && p.isArray(d) ? d :[]) :

/*如果e不是陣列。當d是單純物件（非DOM物件）時g儲存d，否則g為空物件。*/

g = d && p.isPlainObject(d) ? d : {},

/* h在指定的下標進行遞迴處理再擴充套件功能（但這裡擴充套件的是h指定下標元素功能。），這次遞迴中k必為真，g為空物件或空陣列或為d，e為傳入的第二個及以後的引數（每次只是一個引數內的屬性或方法）*/

h[c] = p.extend(k, g, e)) :

/* 以上條件不成立時執行：b是框架建立時傳入的第二個引數，一般的框架只傳入了window所以 b 在這裡只是undefined,如果你有高階的應用傳入第二個引數來指定b。所以在這裡只分析e不等於undefined時 把e寫入到h指定下標c中（迴圈a出來的下標，這裡可以看到給h添加了函式或屬性，如果h是框架物件那麼新增外掛功能就實現了） */

e !== b && (h[c] = e)
}

/* 返回主要是針對遞迴操作 */

return h
}

根據上面的程式碼可以看出擴充套件JQuery功能：

jQuery.extend(Object)或$.extend(Object) 給框架擴充套件功能

jQuery.fn.extend(Object)或$.fn.extend(Object) 給選擇器擴充套件功能

Object一般可以直接以{}形式傳入例如：{test:function(){alert('test')},test1:null}

也可以用其它方法，一般引數是物件或陣列。

可以總結一下：擴充套件功能只要傳入物件或陣列一個引數就可以，當然多個也是可以的。如果先擴充套件過某個屬性（屬性為單純物件或陣列），後還想給這個物件或陣列新增一些功能或元素時，就可以在傳入兩個引數（禁止傳入三個引數，否則就是擴充套件第二個引數的功能而非框架的功能），第一個為布林值true第二個為要新增的物件或陣列，內部下標不要重複，否則會被覆蓋。

在外掛函式內我們可以使用待擴充套件的框架所有方法與屬性，可以通過this來呼叫。

例：新增一個外掛，要求能取出指定元素下的所有的圖片元素並在瀏覽器沒有移動到前不顯示圖片，移動到後才顯示。

程式碼如下：

$.fn.extend
({
imgMoverStart:function(imgLoad){ //入囗處，引數為IMG標籤裡儲存圖片路徑的屬性標籤
this.each(function(){ //迴圈出元素
if(this.nodeName.toLowerCase()=='img')//判斷迴圈出來的元素是不是圖片
$(this).imgShow(imgLoad);//是圖片載入顯示處理
else //不是再迴圈子元素
$(this).find('img').each(function(){//取出子元素中的圖片元素
$(this).imgShow(imgLoad);//載入顯示處理
});
});
},
imgShow:function(imgLoad){//圖片顯示處理
if(this.get(0).nodeName.toLowerCase()!='img')return;//判斷如果調的元素不是圖片標籤取消操作
var base=this;//儲存物件本身
$(window).resize(function(){//新增窗囗大小變動事件
$(this).judge(base,imgLoad);//判斷處理顯示
}).scroll(function(){//新增滾動事件
$(this).judge(base,imgLoad);//判斷處理顯示
}).judge(base,imgLoad);//初始第一次要必須顯示的圖片
},
judge:function(img,imgLoad){//判斷顯示圖片
var base=this;//儲存物件本身
setTimeout(function(){//延時處理，減少大量同時請求
var offset=img.offset(),imgimg.attr(imgLoad); //取出圖片的TOP與圖片地址資料
base.scrollTop()+base.height()>offset.top&&img.attr('src')!==imgSrc&&img.attr('src',imgSrc);//判斷當前窗囗是否到圖片的位置，是載入圖片
},100)//延時0.1秒
}
});
$(window).ready(function(){$('img').imgMoverStart('load_src');})//啟動外掛

上面這段程式碼主要是處理上下滾動時當窗顯示的內容到了圖片的上端位置時開始載入圖片。這個功能很像JQuery的lazyload外掛，當然沒有這個外掛功能全。

外掛是擴充套件選擇器物件，一共擴充套件了三個方法，那麼只要通過 $.('篩選字元').擴充套件方法名 就可以使用這個外掛。在外掛內的this就是這個選擇器物件，所以我們可以直接使用this.each() this.get() 等選擇器可以使用的方法基本上都可以拿來用。非常的方便。當然還有很多的擴充套件方法。但基本相思就是給框架新增功能。

轉載於:https://blog.51cto.com/php2012web/1285782