1. 插件的種類
編寫插件的目的是給已經有的一系列方法或函數做一個封裝,以便在其他地方重複使用,友善後期維護和提高開發效率。
jQuery的插件主要分為三種類型:1.封裝對象方法的插件;2.封裝全局函數的插件;3.選擇器插件;
1.1 封裝對象方法的插件
這種插件是将對象方法封裝起來,用于對通過選擇器擷取的jQuery對象進行操作,是最常用的一種插件。95%以上的jQuery插件都是封裝對象方法的插件。此類插件可以發揮出jQuery選擇器的強大優勢。
1.2 封裝全局函數的插件
可以将獨立的函數加到jQuery命名空間下之下。例如解決沖突用的jQuery.noConflict()方法,常用的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法等,都是jQuery内部作為全局函數的插件附加到核心上去的。
1.3 選擇器插件
個别情況下,會需要用到選擇器插件。雖然jQuery的選擇器十分強大,但還是會需要擴充一些自己喜歡的選擇器。
2. 插件的基本要點
2.1 jQuery插件的檔案名推薦命名為jquery.[插件名].js,以免和其他javascript庫插件混淆。例如命名為jquery.color.js。
2.1 所有的對象方法都應當附加到jQuery.fn對象上,而所有的全局函數都應當附加到jQuery對象本身上。
2.2 在插件内部,this指向的是目前通過選擇器擷取的jQuery對象,而不像一般的方法那樣,例如click()方法,内部的this指向的是DOM元素。
2.3 可以通過this.each來周遊所有元素。
2.4 所有的方法或函數插件,都應該以分号結尾,否則壓縮的時候可能出現問題,為了更穩妥些，甚至可以在插件頭部先加上一個問号。
2.5 插件應該傳回一個jQuery對象,以保證插件的可鍊式操作,除非插件需要傳回的是一些需要擷取的量,例如字元串或者數組等。
2.6 避免在插件内部使用$作為jQuery對象的别名,而應該使用完整的jQuery來表示,這樣可以避免沖突。當然,也可以使用閉包這種技巧來回避這個問題,使插件内部繼續使用$作為jQuery的别名。
3. 插件中的閉包
閉包的概念:ECMAsscript對其進行了簡單的描述,允許使用内部函數(即函數定義和函數表達式位于另一個函數的函數體内),而且,這些内部函數可以通路它們所在的外部函數中聲明的所有局部變量,參數和聲明的其他内部函數,當其中一個這樣的内部函數在包含它們的外部函數之外被調用時,就會形成閉包。即内部函數會在外部函數傳回後被執行。而當這個内部函數執行時,它仍然必須通路其外部函數的局部變量,參數以及其他内部函數。這些局部變量,參數和函數聲明(最初時)的值是外部函數傳回時的值,但也會受到内部函數的影響。
利用閉包的特性,即可以避免内部臨時變量影響全局空間，又可以在插件内容繼續使用$作為jQuery的别名。常見的jQuery插件都是以下這種形式的:
(function(){
/*這裡放置代碼*/
})(); 首先定義一個匿名函數function(){/*這裡放置代碼*/}，然後用括号括起來,變成(function(){/*這裡放置代碼*/})這種形式,最後通過()這個運算符來執行。可以傳遞參數進行,以供内部函數使用。
//為了更好的相容性,開始前有個分号
;(function($){ //此處将$作為匿名函數的形參
/*這裡放置代碼,可以使用$作為jQuery的縮寫别名*/
})(jQuery); //這裡就将jQuery作為實參傳遞給匿名函數了 上面的代碼是一種常見的jQuery插件的結構。
對于插件的制作來說,我們隻需要知道所有的插件代碼都必須放置在下面這兩句代碼内就可以了:
;(function($){
/*此處編寫jQuery插件代碼*/
})(jQuery); 4. jQuery插件機制
jQuery提供了兩個用于拓展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用于拓展封裝對象方法的插件,jQuery.extend()方法用于拓展封裝全局函數的插件和選擇器插件。這兩個方法都接受一個參數,類型為Object。Object對象的"名/值對"分别代表"函數或方法名/函數主體"。
5. 編寫jQuery插件
5.1 封裝jQuery對象方法的插件
編寫設定和擷取顔色的插件，該插件用于實作以下兩個功能:
(1). 設定比對元素的顔色。
(2). 擷取比對的元素(元素集合中的第一個)的顔色。
由于是對jQuery對象的方法拓展,是以采用拓展第一類插件的方法jQuery.fn.extend()來編寫,代碼如下:
;(function(){
jQuery.fn.extend({
"color":functon(value){
return this.css("color",value);
}
});
})(jQuery); 這裡給這個方法提供了一個參數value,如果調用方法的時候傳遞了value這個參數,那麼就是用這個值來設定字型顔色,否則就是擷取比對元素的字型顔色的值。
現在來測試一下該插件：
建構如下代碼，并放入插件以及測試代碼。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>編寫設定和擷取顔色的插件</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
//插件編寫
;(function(){
jQuery.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
//插件應用
$(function(){
//檢視第一個div的color樣式值
alert($("div").color()+"\n傳回字元串,證明此插件可用。");
//把所有的div的字型顔色都設為紅色
alert($("div").color("red")+"\n傳回object,證明得到的是jQuery對象。");
});
</script>
</head>
<body>
<div class="a">red</div>
<div style="color:blue">blue</div>
<div style="color:green">green</div>
<div style="color:yellow">yellow</div>
</body>
</html> 另外，如果要定義一組插件,可以使用如下所示寫法:
;(function(){
jQuery.fn.extend({
"color":function(value){
//插件代碼
}，
"border":function(value){
//插件代碼
}，
"background":function(value){
//插件代碼
}
});
})(jQuery); 5.2 封裝全局函數的插件
這類插件是在jQuery命名空間内部添加一個函數。這類插件很簡單,隻是普通的函數,沒有特别需要注意的地方。
例如新增兩個函數,用于去除左側和右側空格。雖然jQuery已經提供了jQuery.trim()方法來去除兩端空格,但在某些情況下,會隻希望去除某一側的空格。
去除左側,右側的空格的函數分别寫成如下jQuery代碼:
;(function($){
$.extend({
ltrim:function( text ){
return (text || "").replace(/^\s+/g,"");
},
rtrim:function( text ){
return (text || "").replace(/^\s+/g,"");
}
});
})(jQuery); <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>封裝全局函數的插件</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
;(function($){
$.extend({
ltrim:function( text ){ //去除左側空格
return (text || "").replace(/^\s+/g,"");
},
rtrim:function( text ){ //去除右側空格
return (text || "").replace(/^\s+/g,"");
}
});
})(jQuery);
$("#trimTest").val(
jQuery.trim(" test ")+"\n"+
jQuery.ltrim(" test ")+"\n"+
jQuery.rtrim(" test ")
);
</script>
</head>
<body>
<textarea id="trimTest" rows="5" cols="20"></textarea>
</body>
</html> 懷有希望!!
![jQuery實作百度搜尋框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)