用jQuery技術開發(fā)特色插件

邢素萍

用jQuery技術開發(fā)特色插件

邢素萍

介紹了當前Web開發(fā)新技術jQuery技術中的插件的種類，插件開發(fā)的要點及如何編寫自定義插件。通過編寫插件講述了對象級別插件的開發(fā)及插件引用、類級別的插件開發(fā)及引用的方法。

Web；插件引用；類級別

0 引言

近年來，WEB開發(fā)領域的新技術和新工具層出不窮，jQuery就是新技術之一，是業(yè)界最流行的JavaScript庫。jQuery 庫是專為加快JavaScript 開發(fā)速度而設計的。通過簡化編寫 JavaScript 的方式，減少代碼量。使用 jQuery 庫時，我們會發(fā)現(xiàn)在編程時經常為一些常用函數(shù)重寫相同的代碼。如果根據需要編寫自定義的jQuery 插件，就可以減少代碼的重寫。

雖然，有大量優(yōu)秀的插件可供用戶免費下載使用，但開發(fā)人員更希望自己能編寫根據自身項目特點的插件。在jQuery中，編寫插件也不是一件很難的事，只要編寫的代碼符合插件的各項功能要求，就可以實現(xiàn)自定義各項功能的插件。本文介紹插件的基礎知識及如何編寫自定義插件。

1 插件的種類的分析

從廣義上來說，插件分為3類，即封裝方法插件、封閉函數(shù)插件、選擇器插件，最后一種很少人去開發(fā)使用，自定義的插件種類多數(shù)屬于前面兩種。

封裝方法插件：封裝方法插件在本質上來說，是一個對象級別的插件，該類插件首先通過jQuery選擇器獲取對象，并為對象添加方法，然后，將方法進行打包，封裝成一個插件，這種類型的插件編寫簡單，極易調用，也很方便地使用了jQuery中功能強大的選擇器，因此，成為開發(fā)插件的首選。

封閉函數(shù)插件：封閉函數(shù)插件是一個類級別的插件，該類插件的最大特點，就是可以直接給jQuery添加靜態(tài)方法，并且可以將函數(shù)置于jQuery命名空間中，如最為常見的就是$.ajax()、$.trim()全局性函數(shù)，都是以內部插件的形式植入jQuery內核中。

2 插件開發(fā)要點及注意的事項

2.1插件的文件命名必須嚴格遵循jQuery.[插件名].js的規(guī)則，以便于區(qū)分其他js文件，如新插件文件jQuery.newqlugin.js。如果是對象級別插件，所有的方法都應依附于jquery.fn主體對象；如果是類級別插件，所有的方法都應依附于jquery對象。

2.2在插件內部的代碼中，如果要訪問每個元素，可以使用this.each方法來遍歷全部元素。要注意，在插件的內部，this所代表的是通過jQuery選擇器所獲取的對象，而非傳統(tǒng)意義上的對象的引用。

2.3盡量不要使用“$”符號，以避免與別的代碼沖突。在編寫對象級別的插件時，使用jQuery.fn.extend()方法進行功能擴展；而針對類級別的插件，則使用jQuery.extend()方法進行擴展。

3 對象級別插件的開發(fā)

我們通過一個開發(fā)插件示例，學習對象級別插件的開發(fā)及其引用。

功能描述：在列表＜ul〉元素中，鼠標在表項＜li〉元素移動時，可以自定義其獲取焦點（focus）時的背景顏色，即設置表項＜li〉元素選中時的背景色。

搭建一個js文件，命名為jquery.lifocuscolor.js，并在文件中使用$.fn.extend()方法完成框架的搭建。其實現(xiàn)的代碼如下：

/*--------------------------------------------------------/

功能：設置列表中表項獲取鼠標焦點時

參數(shù)：li_col[可選]鼠標所在表項行的背景色

返回：原調用對象

示例：$（”ul”）.focusColor(“red”);

/--------------------------------------------------------*/

;(function($){

$.fn.extend({

“yourPluginName”: function(pran_value){

//各種默認屬性或參數(shù)的設置

This.each(functoun(){ //插件實現(xiàn)的代碼 }) } }）}）（jQuery）;

3.1 代碼編寫

根據功能描述，在搭建框架中，首先設置插件的默認屬性值，由于允許用戶設置自己的顏色值，因此，創(chuàng)建一個顏色參數(shù)，并對該值進行初始化設置，同時，根據參數(shù)是否為空，賦予該參數(shù)不同的顏色值；另外，設置一個變量保存丟失焦點時的顏色值，其實現(xiàn)的代碼如下所示：

;（function($){

$.fn.extend({

“focusColor”:function(li_col) {

var def_col=”#ccc”;//默認獲取焦點的色值var lst_col=”#fff”;//默認丟失焦點的色值

/

/如果設置的顏色不為空，使用設置的顏色，否則為默認的顏色

li_col=(li_col==undefined)?def_col : li_col ; //遍歷表項＜”li”〉中的全部元素

$(this).find(“l(fā)i”).each(function(){ }); } });

})(jQuery);

然后，在遍歷表項＜li〉中，需針對對象編寫兩個事件，一個是鼠標移入事件mouseover()，在該事件中，將傳回的變量def_col值，設置為對象的背景色，其代碼如下：

$(this).find(“l(fā)i”).each(function(){

$(this).mouseover(function(){ //獲取焦點事件

$(this).css(“background-color”,lst_col);//恢復原來的顏色 }）

}）

最后，編寫另外一個鼠標移出事件mouseout()，在該事件中，將背景色還原成鼠標移入前，被變量lst_col保存的顏色值，其代碼如下：

$(this).find(“l(fā)i”).each(functoun(){

$(this).mouseout(function(){ //鼠標焦點移出事件

$(this).css(“background-color”, li_col); //恢復原來的顏色 }）

}）

由于這兩個事件可以進行合并鏈寫，因此，最終的代碼如下：

$(this).find(“l(fā)i”).each(function(){ //遍歷表項＜li〉中的全部元素

$(this).mouseout(function(){ //獲取鼠標焦點事件

$(this).css(“background-color”,li_col) ; //使用設置的顏色}）.mouseout(function() { //鼠標焦點移出事件

$(this).css(“background-color”,”#fff”) //恢復原來的顏色}）}）

在代碼最后結果時，必須返回一個jQuery對象，以方便其調用對象的鏈寫操作，因此，最后加上一行返回jQuery對象的如下代碼：

return $(this); // 返回jQuery對象，保持鏈式操作

經過上述分析，js 文件jquery.liocuscolor.js最終完整的代碼如下所示：

;(function($){

$.fn.extend({

“focusColor”:function(li_col){

var drf_col=”#ccc”; //默認獲取焦點的色值

var lst_col=”#fff”; //默認丟失焦點的色值

/

/ 如果設置的顏色不為空，使用設置的顏色，否則 為默認色

li_col=(li_col==undefined) ? def_col : li_col;

/

/ 遍歷表項＜li〉 中的全部元素

$(this).find(“l(fā)i”).each(function(){

$(this).mouseover(function(){//獲取鼠標焦點事件

$(this).css(“background-color”, li_col ); // 使用設置的顏色

}).mouseout(function(){ // 鼠標焦點移出事件

$(this).css(“background-color”,”#fff” ); //恢復原來的顏色}) });

Return $(this); //返回jQuery對象，保持鏈式操作 } });

})(jQuery);

3.2 引用插件

自己編寫的插件保存為js文件后，就可以象其它插件一樣，被需要使用的文件所調用，其使用的方法也是一樣，先引入js文件，然后在js代碼中調用該插件中的各種方法。為了驗證文件jquery.lifocuscolor.js中插件功能，新創(chuàng)建一個html文件p_Xsp.html，引入該文件，并調用該插件的方法，其加入的代碼如下：

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"〉＜html xmlns="http://www.w3.org/1999/xhtml"〉

＜head〉

＜title〉編寫一個對象級別的插件＜/title〉

＜script type="text/javascript" src="Jscript/jquery-1.4.2-vsdoc.js"〉

＜/script〉

＜script type="text/javascript" src="Jscript/jquery-1.4.2.js"〉

＜/script〉

＜script type="text/javascript" src="Plugin/jquery.lifocuscolor.js"〉

＜/script〉

＜style type="text/css"〉

body{font-size:12px}

.divFrame{width:260px;border:solid 1px #666}

.divFrame .divTitle{padding:5px;background-color:#eee;font -weight:bold}

.divFrame .divContent{padding:8px;line-height:1.6em} .divFrame .divContent

ul{padding:0px;margin:0px;list-style-type:none}

.divFrame .divContent ul li span{margin-right:20px}＜/style〉

＜script type="text/javascript"〉

$(function() {

$("#u1").focusColor("red");//調用自定義的插件

})＜/script〉

＜/head〉

＜body〉

＜div class="divFrame"〉

＜div class="divTitle"〉

對象級別的插件

＜/div〉

＜div class="divContent"〉

＜ul id="u1"〉

＜li〉＜span〉張大海＜/span〉＜span〉男＜/span〉＜/li〉

＜li〉＜span〉李麗萍＜/span〉＜span〉女＜/span〉＜/li〉

＜li〉＜span〉王健康＜/span〉＜span〉男＜/span〉＜/li〉

＜/ul〉

＜/div〉

＜/div〉

＜/body〉

＜/html〉

執(zhí)行html文件p_Xsp.html后的效果圖，如圖1所示：

圖1 使用默認色值

執(zhí)行$(“#u1”).fousColor()使用默認色值，當鼠標指向“李麗萍”時，執(zhí)行$(“#u1”).fousColor(“red”)，是自定義色值，如圖2所示：

4 類級別的插件開發(fā)

類級別的插件開發(fā)就是給jQuery類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是$.AJAX()這個函數(shù)，將函數(shù)定義于jQuery的命名空間中。關于類級別的插件開發(fā)可以采用如下幾種形式進行擴展：

4.1 添加一個新的全局函數(shù)

添加一個全局函數(shù)，我們只需如下定義：

jQuery.foo = function() { alert('This is a test. This is onl y a test.'); };

4.2 增加多個全局函數(shù)

添加多個全局函數(shù)，可采用如下定義：

jQuery.foo = function() { alert('This is a test. This is only a test.') };

jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".'); };

調用時和調用一個函數(shù)是一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

4.3 使用jQuery.extend(object);

jQuery.foo = function() { alert('This is a test. This is only a test.'); };

jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".'); };

調用時和一個函數(shù)的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

jQuery.extend({

foo: function() {

alert('This is a test. This is only a test.'); },

bar: function(param) { alert('This function takes a parameter, which is "' + param +'".'); } });

4.4一個類級別插件開發(fā)的實例：

4.4.1 功能描述

新增兩個類級別的全局函數(shù)，分別用于計算兩數(shù)之和與兩數(shù)之差，并將結果返回調用的頁面中。

4.4.2 搭建框架

新建一個jquery.two.js文件，使用$.extend()方法完成框架的搭建，其實現(xiàn)的代碼如下：

/*--------------------------------------------------------------/

功能：計算二個數(shù)字相加或相關的結果

參數(shù)：數(shù)字p1,p2

返回：兩數(shù)相加后的結果

示例：$AddNum(1,2);

/----------------------------------------------------------------------*/

;(function($){

$.extend({ “yourPlugin-Name”:function(pram_value){

//插件實現(xiàn)的代碼 }

}）

}）（jQuery）;

4.4.3 代碼的編寫

根據功能描述，編寫一個用于計算兩數(shù)之和的全局函數(shù)，該函數(shù)先對用戶傳來的兩個參數(shù)進行檢測，判斷其是否為undefined類型，以獲取其最終用于計算的值，然后通過return語句，返回其最終的計算結果，其實現(xiàn)的代碼如下：

“addNum”: function(p1,p2) {

//如果傳入的數(shù)字不為空，使用傳入的數(shù)字，否則為0

p1=(p1==undefined) ? 0 : p1;

p2=(p2==undefined) ? 0 : p2;

var intResult=parseInt(p1)+parseInt(p2);

return intResult;

}

然后，使用同樣的方式，增加一個用戶計算兩數(shù)之差的全局函數(shù)，由于最后返回一個兩數(shù)相減的結果，因此在進行基本檢測后，判斷第一個參數(shù)是否大于第二個參數(shù)，如果大于，則返回前者減去后者的結果，其實現(xiàn)的代碼如下：

“subNum”: function( p1, p2) {

/

/如果傳入的數(shù)字不為空，使用傳入的數(shù)字，否則為0

var intResult=0;

p1=(p1==undefined) ? 0 : p1;

p2=(p2==undefined) ? 0 : p2;

if(p1〉p2){//如果傳入的參數(shù)前者大于后者intResult=parseInt(p1)-parseInt(p2); } return intResult; }

最后，使用jQuert.extend()方法，直接對jQuery對象進行拓展，以擴充其全局函數(shù)，其最終實現(xiàn)的完整代碼如下

;(function($) {

$.extend({

“addNum”:function(p1,p2){

//如果傳入的數(shù)字不為空，使用傳入的數(shù)字，否則為0

p1=(p1==undefined) ? 0 : p1;

p2=(p2==undefined) ? 0 : p2;

var intResult=parseInt(p1)+parseInt(p2); return intResult; },

“subNum”: function(p1,p2) {

//如果傳入的數(shù)字不為空，使用傳入的數(shù)字，否則為0

var intResult=0;

p1=(p1==undefined) ? 0 : p1;

p2=(p2==undefined) ? 0 : p2;

if(p1〉p2){//如果傳入的參數(shù)前者大于后者intResult=parseInt(p1)-parseInt(p2); }

return intResult; } });

})(jQuery);

4.4.4 插件的引用

與引用對象級別插件一樣，類級別的插件也是先在＜script〉標記中導入插件的js文件，然后編寫js代碼，調用插件中的公用方法或函數(shù)。

為檢測插件的功能，新建一個HTML文件pp_Two.html，在頁面中，單擊上下兩個“等于”按鈕后，分別調用插件中的全局函數(shù)addNum與subNum,計算文本框中的兩數(shù)之和與兩數(shù)之差。其實現(xiàn)的代碼如下：

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"〉

＜html xmlns="http://www.w3.org/1999/xhtml"〉

＜head〉

＜title〉編寫一個類級別的插件＜/title〉

＜script type="text/javascript" src="Jscript/jquery-1.4.2-vsdoc.js"〉

＜/script〉

＜script type="text/javascript" src="Jscript/jquery-1.4.2.js"〉

＜/script〉

＜script type="text/javascript" src="Plugin/jquery.two.js"〉

＜/script〉

＜style type="text/css"〉

body{font-size:12px}

.divFrame{width:260px;border:solid 1px #666}

.divFrame .divTitle{padding:5px;background-color:#eee;f ont-weight:bold}

.divFrame .divContent{padding:8px;line-height:1.6em}

.txt{border:#666 1px solid;padding:2px;

width:150px;margin-right:3px;width:16px}

.btn {border:#666 1px solid;padding:2px;width:50px;

filter:progid:DXImageTransform.Microsoft.Gradient(Grad ientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}

＜/style〉

＜script type="text/javascript"〉

$(function() {

$("#Button1").click(function() {

$("#Text3").val(

$.addNum($("#Text1").val(),

$("#Text2").val()));

}); //調用自定義的插件計算兩數(shù)之和

$("#Button2").click(function() {

$("#Text6").val(

$.subNum($("#Text4").val(),

$("#Text5").val()));

}) //調用自定義的插件計算兩數(shù)之差})

＜/script〉

＜/head〉

＜body〉

＜div class="divFrame"〉

＜div class="divTitle"〉 類級別的插件

＜/div〉

＜div class="divContent"〉輸入兩數(shù)相加：

＜input id="Text1" type="text" class="txt" /〉 +

＜input id="Text2" type="text" class="txt" /〉 =

＜input id="Text3" type="text" class="txt" /〉

＜input id="Button1" type="button"

value="等于" class="btn" /〉

＜hr /〉輸入兩數(shù)相減：

＜input id="Text4" type="text" class="txt" /〉- 

＜input id="Text5" type="text" class="txt" /〉 =

＜input id="Text6" type="text" class="txt" /〉

＜input id="Button2" type="button"

value="等于" class="btn"/〉

＜/div〉

＜/div〉

＜/body〉

＜/html〉

執(zhí)行html文件pp_Two.html后，點擊第1個“等于”按鈕，調用全局函數(shù)$.addNum(p1,p2)計算兩數(shù)之和，點擊第2個“等于”按鈕調用全局函數(shù)$.addNum(p1,p2)計算兩數(shù)之差，頁面效果如圖3所示：

圖3 引用自定義的類級別插件

5 總結

無論是編寫對象級別的插件，還是編寫類級別的插件，都要嚴格遵守插件開發(fā)的要素，先搭框架，后進行開發(fā)，不同的插件使用不同的拓展方法。根據需要編寫自定義的jQuery 插件，可以減少代碼的重寫，加快 JavaScript 開發(fā)速度，可極大地推動WEB開發(fā)技術的發(fā)展。

[1] 《鋒利的jQuery（第2版）》單東林，張曉菲，魏然 編著 人民郵電出版社

[2] 《jQuery實戰(zhàn)》 （美國)BearBibeault (美國)YehudaKatz人民郵電出版社

Using jQuery Technology to Develop Special Plug-Ins

Xing Suping
(Nanjing Institute of Industry Technology,Nanjing210046,China)

This paper introduces new types of jQuery plug-in in the current development of Web technology, key points of plug-in development and how to write a user-defined plug-in. The plug-in compiling shows the development and references on both object level and class level.

Web; Plug-In references; Class Level

TP311

A

2014.04.01）

邢素萍（1957-），南京工業(yè)職業(yè)技術學院，教授，研究方向：計算機應用與多媒體教學，南京，210046

1007-757X(2014)08-0059-06