jQuery外掛的使用和寫法

NO IMAGE

編寫jQuery外掛

    編寫外掛的目的主要是給已經有的一系列方法或函式做一個封裝,以便在其他地方重複使用,方便後期維護和提高開發效率。

jQuery的外掛主要分成3種型別。

1.封裝物件方法的外掛

   這種外掛是將物件方法封裝起來,用於對通過選擇器獲取的jQuery物件進行操作,是最常見的一種外掛。

2.封裝全域性函式的外掛

   可以將獨立的函式加到jQuery名稱空間之下。例如jQuery.noConflict()方法、常用的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法等,都是jQuery內部作為全域性函式的外掛附加到核心上去的。

3.選擇器外掛

   個別情況下,會需要用到選擇器外掛。

外掛的基本要點

1.jQuery外掛的檔名推薦命名為jquery.[外掛名].js,以免和其他JavaScript庫外掛混淆。

2.所有的物件方法都應該附加到jQuery.fn物件上,而所有的全域性函式都應當附加到jQuery物件本身上。

3.在外掛內部,this指向的是當前通過選擇器獲取的jQuery物件,而不像一般方法那樣,例如click()方法,內部的this指向的DOM元素。

4.可以通過this.each來遍歷所有元素。

5.所有的方法或函式外掛,都應當以分號結尾,否則壓縮的時候可能出現問題。為了更穩妥些,甚至可以在外掛頭部先加上一個分號,以免他人的不規範程式碼給外掛帶來影響。

6.外掛應該返回一個jQuery物件,以保證外掛的可鏈式操作。除非外掛需要返回的是一些需要獲取的量,例如字串或者陣列等。

7.避免在外掛內部使用$作為jQuery物件的別名,而應使用完整的jQuery來表示。這樣可以避免衝突,當然,也可以利用閉包這種技巧來回避這個問題,使外掛內部繼續使用$作為jQuery的別名。很多外掛都是這樣做的。

外掛中的閉包

   關於閉包,ECMAScript對其進行了簡單的描述:允許使用內部函式(即函式定義和函式表示式位於另一個函式體內),而且,這些內部函式可以訪問它們所在的外部函式中宣告的所有區域性變數、引數和宣告的其他內部函式,當其中一個這樣的內部函式在包含它們的外部函式之外被呼叫時,就會形成閉包。即內部函式會在外部函式返回後被執行。而這個內部函式執行時,它仍然必須訪問其外部函式的區域性變數、引數以及其他內部函式。這些區域性變數、引數和函式宣告(最初時)的值是外部函式返回時的值,但也會收到內部函式的影響。

   首先定義一個匿名函式function(){/*這裡放置程式碼*/},然後用括號括起來,變成(function(){/*這裡放置程式碼*/})這種形式,最後通過()這個運算子來執行。可以傳遞引數進去,以供內部函式使用。

//注意為了更好的相容性,開始之前還有一個分號:

;(function($){                 //開始時將$作為匿名函式的形參
/*這裡放置程式碼,可以使用$作為jQuery的縮寫別名*/
})(jQuery);                    //這裡就將jQuery作為實參傳遞給匿名函式了

以上是一種常見的jQuery外掛的結構。

jQuery外掛的機制

   jQuery提供了兩種用於擴充套件jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法。前者用於之前提到的3種外掛型別中的第1種,後者用於擴充套件後兩種外掛。這兩個方法都接受一個引數,型別為Object。Object物件的“名/值對”分別代表“函式或方法名/函式主體”。

   jQuery.extend()方法除了可以用於擴充套件jQuery物件之外,還有一個強大的功能,就是用與擴充套件已有的Object物件。

jQuery程式碼如下:

jQuery.extend(target,obj1,…….[objN])

   用一個或多個其它物件來擴充套件一個物件,然後返回被擴充套件的物件。

   例如合併settings物件和options物件,修改並返回settings物件。

var settings={validate:false,limit:5,name:”foo”};
var options={validate:true,name:”bar”};
var newOptions=jQuery.extend(settings,options);

結果為:

newOptins={valitdate:true,limit:5,name:”bar”};

   jQuery.extend()方法經常被用於設定外掛方法的一系列預設引數,如下面的程式碼所示:

function foo(options){
options=jQuery.extend({
name:”bar”,
limit:5,
datatype:”xml”
},options);
};

   如果呼叫foo()方法的時候,在傳遞的引數options物件中設定了相應的值,那麼就使用設定的值,否則就用預設的值。程式碼如下:

foo({name:”a”,length:”4”,dataType:”json”});
foo({name:”a”,length:”4”});
foo({name:”a”});
foo();

   通過使用jQuery.extend()方法,可以很方便地用傳入的引數來覆蓋預設值。此時,對方法的呼叫依舊保持一致,只不過要傳入的是一個對映而不是一個引數列表。這種機制比傳統的每個引數都去檢測的方式不僅靈活而且更加簡潔。此外使用命名引數意味著再新增新選項也不會影響過去編寫的程式碼,從而使開發者使用起來更加直觀明瞭。

編寫jQuery外掛

1.封裝jQuery物件方法的外掛


編寫設定獲取顏色的外掛

   首先介紹如何編寫一個color()外掛。該外掛用於實現以下兩個功能。

(1)設定匹配元素的顏色。

(2)獲取匹配的元素(元素集合中的第1個)的顏色。

   首先將該外掛按規範命名為jquery.color.js。

   然後再JavaScript檔案裡搭好框架.由於是對jQuery物件的方法擴充套件,因此採用第1類方法jQuery.fn.extend()來編寫。

;(function($){
$.fn.extend({
“color”:function(value){
//這裡寫外掛程式碼
}
});
})(jQuery);

   這裡給這個方法提供一個引數value,如果呼叫了方法的時候傳遞了value這個引數,那麼就是用這個值來設定字型顏色;否則就是匹配元素的字型顏色的值。

   首先,實現第1個功能,設定字型顏色。注意,由於外掛內部的this指向的是jQuery物件,而非普通的DOM物件。程式碼如下:

;(function($){
$.fn.extend({
“color”:function(value){
return this.css(“color”,value);
}
});
})(jQuery);

   接下來實現第2個功能。如果沒用給方法傳遞引數,那麼就是獲取集合物件中第1個物件的color的值。由於css()方法本身就具有返回第1個匹配元素樣式值的功能,因此此處無需通過eq()來獲取第1個元素。只要這兩個方法結合起來,判斷一下value的值是否是undefined即可。

jQuery程式碼如下:

;(function($){
$.fn.extend({
“color”:function(value){
if(color===undefined){
return this.css(“color”,value);
}else{
Return this.css(“color”,value);
}
}
});
})(jQuery);

   這樣一來,外掛也就完成了。現在來測試一下程式碼。

<script type=”text/javascript”>
//外掛編寫
;(function($){
$.fn.extend({
“color”:function(value){
if(color===undefined){
return this.css(“color”,value);
}else{
Return this.css(“color”,value);
}
}
});
})(jQuery);
//外掛應用
$(function(){
//檢視第一個div的color樣式值
alert($(“div”).color() ”\n返回字串,證明此外掛可用。”);
//把所有的div字型顏色都設為紅色
alert($(“div”).color(“red”) ”\n返回object證明得到的是jQuery物件。“);
})
</script>
<div style=”color:red”>red</div>
<div style=”color:blue”>blue</div>
<div style=”color:green”>green</div>
<div style=”color:yellow”>yellow</div>

    另外,如果要定義一組外掛,可以使用如下所示的寫法:

:(function($){
$.fn.extend({
"color":function(value){
//外掛程式碼
},
"border":function(value){
//外掛程式碼
},
"background":function(value){
//外掛程式碼
}
};
})(jQuery);

    表格隔行變色外掛

    表格隔行變色的程式碼如下:

$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
//判斷是否選中
var hasSelected=$(this).hasClass('selected');
//如果選中,則移出selected類,否則就加上selected類
$(this)[hasSelected?"removeClass":"addClass"]('selected')
//查詢內部的checkbox,設定對應的屬性
.find('checkbox').attr('checked'.!hasSelected);
});
//如果核取方塊預設情況下是選擇的,則高色
$('tbody>tr:has(:checked)').addClass('selected');

    首先把外掛方法取名為alterBgColor,然後為該外掛方法搭好框架,jQuery程式碼如下:

;(function($){
$.fn.extend({
"alterBgColor":function(options){
//外掛程式碼
}
});
})(jQuery);

     框架完成後,接下來就需要為options定義預設值。預設構建這樣({odd:”odd”,even:”even”,selected:”selected”})一個Object。這樣就可以通過$(“#sometable”).alterBgColor({odd:”odd”,even:”even”,selected:”selected”})自定義奇偶行的樣式類名以及選中後的樣式類名。同時,直接使用$(“#sometable”).alterBgColor()就可以應用
預設的樣式類名。

jQuery程式碼如下:

;(function($){
$.fn.extend({
"alterBgColor":function(options){
options=$.extend({
odd:"odd",       /*偶數行樣式*/
even:"even",   /*奇數行樣式*/
selected:"selected"     /*選中行樣式*/
},options);
}
});
})(jQuery);

    如果在後面的程式中需要使用options物件的屬性,可以使用如下的方式來獲得:

options.odd;             //獲取options物件中odd屬性的值
options.even;            //獲取options物件中even屬性的值
options.selected;        //獲取options物件中selected屬性的值

    接下來就需要把這些值放到程式中,來代替先前程式中的固定值。

    最後就是匹配元素的問題了。顯然不能直接用$(‘tbody>tr’)選擇表格行,這樣會使頁面中全部的<tr>元素都隔行變色。應該使用選擇器選中某個表格,執行alterBgColor()方法後,將對應的表格內<tr>元素進行隔行變色。因此,需要把所有通過$(‘tbody>tr’)選擇的物件改寫成$(‘tbody>tr’,this),表示在匹配的元素內(當前表格內)查詢,並應用上一步中的預設值。jQuery程式碼如下:

;(function($){
$.fn.extend({
"alterBgColor":function(options){
//設定預設值
options=$.extend({
odd."odd",
even."even",
selected:"selected"
},options);
$("tbody>tr:odd",this).addClass(options,odd);
$("tbody>tr:even",this).addClass(options,even);
$("tbody>tr",this).click(function(){
//判斷是否選中
var hasSelected=$(this).hasClass(options,selected);
//如果選中,則移出selected類,否則加上selected類
$(this)[hasSelected?"removeClass":"addClass"](options,selected)
//查詢內部的checkbox,設定對應屬性
.find(':checkbox').attr('checked',!hasSelected);
});
//如果單選框預設情況下是選擇的,則高色
$('tbody>tr:has(:checkd),this').addClass(options,selected);
rerturn this;  //返回this,使方法可鏈
}
});
})(jQuery);

   
在程式碼的最後,返回this,讓這個外掛具有可鏈性。
   此時,外掛就完成了。現在來測試這個外掛。構造兩個表格,id分別為table1和table2,然後使用其中一個<table>呼叫alterBgColor()方法,以便檢視是否能獨立工作,並且具有可鏈性。
   jQuery程式碼如下:

$('#table2')
.alterBgColor()                     //應用外掛
.find("th").css("color","red");     //可鏈式操作

需要注意的是,jQuery的選擇符可能會匹配1個或者多個元素。因此,在編寫外掛時必須考慮到這些情況。可以在外掛內部呼叫each()方法來遍歷匹配元素,然後執行相應的方法,this會依次引用每個DOM元素。如下jQuery程式碼所示:

;(function($)){
$.fn.extend({
"SomePlugin":function(options){
return this.each(function(){
//這裡置放程式碼
});
}
});
})(jQuery);