用jQuery技术开发特色插件

邢素萍

用jQuery技术开发特色插件

邢素萍

介绍了当前Web开发新技术jQuery技术中的插件的种类，插件开发的要点及如何编写自定义插件。通过编写插件讲述了对象级别插件的开发及插件引用、类级别的插件开发及引用的方法。

Web；插件引用；类级别

0 引言

近年来，WEB开发领域的新技术和新工具层出不穷，jQuery就是新技术之一，是业界最流行的JavaScript库。jQuery 库是专为加快JavaScript 开发速度而设计的。通过简化编写 JavaScript 的方式，减少代码量。使用 jQuery 库时，我们会发现在编程时经常为一些常用函数重写相同的代码。如果根据需要编写自定义的jQuery 插件，就可以减少代码的重写。

虽然，有大量优秀的插件可供用户免费下载使用，但开发人员更希望自己能编写根据自身项目特点的插件。在jQuery中，编写插件也不是一件很难的事，只要编写的代码符合插件的各项功能要求，就可以实现自定义各项功能的插件。本文介绍插件的基础知识及如何编写自定义插件。

1 插件的种类的分析

从广义上来说，插件分为3类，即封装方法插件、封闭函数插件、选择器插件，最后一种很少人去开发使用，自定义的插件种类多数属于前面两种。

封装方法插件：封装方法插件在本质上来说，是一个对象级别的插件，该类插件首先通过jQuery选择器获取对象，并为对象添加方法，然后，将方法进行打包，封装成一个插件，这种类型的插件编写简单，极易调用，也很方便地使用了jQuery中功能强大的选择器，因此，成为开发插件的首选。

封闭函数插件：封闭函数插件是一个类级别的插件，该类插件的最大特点，就是可以直接给jQuery添加静态方法，并且可以将函数置于jQuery命名空间中，如最为常见的就是$.ajax()、$.trim()全局性函数，都是以内部插件的形式植入jQuery内核中。

2 插件开发要点及注意的事项

2.1插件的文件命名必须严格遵循jQuery.[插件名].js的规则，以便于区分其他js文件，如新插件文件jQuery.newqlugin.js。如果是对象级别插件，所有的方法都应依附于jquery.fn主体对象；如果是类级别插件，所有的方法都应依附于jquery对象。

2.2在插件内部的代码中，如果要访问每个元素，可以使用this.each方法来遍历全部元素。要注意，在插件的内部，this所代表的是通过jQuery选择器所获取的对象，而非传统意义上的对象的引用。

2.3尽量不要使用“$”符号，以避免与别的代码冲突。在编写对象级别的插件时，使用jQuery.fn.extend()方法进行功能扩展；而针对类级别的插件，则使用jQuery.extend()方法进行扩展。

3 对象级别插件的开发

我们通过一个开发插件示例，学习对象级别插件的开发及其引用。

功能描述：在列表＜ul〉元素中，鼠标在表项＜li〉元素移动时，可以自定义其获取焦点（focus）时的背景颜色，即设置表项＜li〉元素选中时的背景色。

搭建一个js文件，命名为jquery.lifocuscolor.js，并在文件中使用$.fn.extend()方法完成框架的搭建。其实现的代码如下：

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

功能：设置列表中表项获取鼠标焦点时

参数：li_col[可选]鼠标所在表项行的背景色

返回：原调用对象

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

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

;(function($){

$.fn.extend({

“yourPluginName”: function(pran_value){

//各种默认属性或参数的设置

This.each(functoun(){ //插件实现的代码 }) } }）}）（jQuery）;

3.1 代码编写

根据功能描述，在搭建框架中，首先设置插件的默认属性值，由于允许用户设置自己的颜色值，因此，创建一个颜色参数，并对该值进行初始化设置，同时，根据参数是否为空，赋予该参数不同的颜色值；另外，设置一个变量保存丢失焦点时的颜色值，其实现的代码如下所示：

;（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(“li”).each(function(){ }); } });

})(jQuery);

然后，在遍历表项＜li〉中，需针对对象编写两个事件，一个是鼠标移入事件mouseover()，在该事件中，将传回的变量def_col值，设置为对象的背景色，其代码如下：

$(this).find(“li”).each(function(){

$(this).mouseover(function(){ //获取焦点事件

$(this).css(“background-color”,lst_col);//恢复原来的颜色 }）

}）

最后，编写另外一个鼠标移出事件mouseout()，在该事件中，将背景色还原成鼠标移入前，被变量lst_col保存的颜色值，其代码如下：

$(this).find(“li”).each(functoun(){

$(this).mouseout(function(){ //鼠标焦点移出事件

$(this).css(“background-color”, li_col); //恢复原来的颜色 }）

}）

由于这两个事件可以进行合并链写，因此，最终的代码如下：

$(this).find(“li”).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(“li”).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中插件功能，新创建一个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〉

执行html文件p_Xsp.html后的效果图，如图1所示：

图1 使用默认色值

执行$(“#u1”).fousColor()使用默认色值，当鼠标指向“李丽萍”时，执行$(“#u1”).fousColor(“red”)，是自定义色值，如图2所示：

4 类级别的插件开发

类级别的插件开发就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

4.1 添加一个新的全局函数

添加一个全局函数，我们只需如下定义：

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

4.2 增加多个全局函数

添加多个全局函数，可采用如下定义：

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 + '".'); };

调用时和调用一个函数是一样的: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 + '".'); };

调用时和一个函数的一样的: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一个类级别插件开发的实例：

4.4.1 功能描述

新增两个类级别的全局函数，分别用于计算两数之和与两数之差，并将结果返回调用的页面中。

4.4.2 搭建框架

新建一个jquery.two.js文件，使用$.extend()方法完成框架的搭建，其实现的代码如下：

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

功能：计算二个数字相加或相关的结果

参数：数字p1,p2

返回：两数相加后的结果

示例：$AddNum(1,2);

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

;(function($){

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

//插件实现的代码 }

}）

}）（jQuery）;

4.4.3 代码的编写

根据功能描述，编写一个用于计算两数之和的全局函数，该函数先对用户传来的两个参数进行检测，判断其是否为undefined类型，以获取其最终用于计算的值，然后通过return语句，返回其最终的计算结果，其实现的代码如下：

“addNum”: function(p1,p2) {

//如果传入的数字不为空，使用传入的数字，否则为0

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

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

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

return intResult;

}

然后，使用同样的方式，增加一个用户计算两数之差的全局函数，由于最后返回一个两数相减的结果，因此在进行基本检测后，判断第一个参数是否大于第二个参数，如果大于，则返回前者减去后者的结果，其实现的代码如下：

“subNum”: function( p1, p2) {

/

/如果传入的数字不为空，使用传入的数字，否则为0

var intResult=0;

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

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

if(p1〉p2){//如果传入的参数前者大于后者intResult=parseInt(p1)-parseInt(p2); } return intResult; }

最后，使用jQuert.extend()方法，直接对jQuery对象进行拓展，以扩充其全局函数，其最终实现的完整代码如下

;(function($) {

$.extend({

“addNum”:function(p1,p2){

//如果传入的数字不为空，使用传入的数字，否则为0

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

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

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

“subNum”: function(p1,p2) {

//如果传入的数字不为空，使用传入的数字，否则为0

var intResult=0;

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

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

if(p1〉p2){//如果传入的参数前者大于后者intResult=parseInt(p1)-parseInt(p2); }

return intResult; } });

})(jQuery);

4.4.4 插件的引用

与引用对象级别插件一样，类级别的插件也是先在＜script〉标记中导入插件的js文件，然后编写js代码，调用插件中的公用方法或函数。

为检测插件的功能，新建一个HTML文件pp_Two.html，在页面中，单击上下两个“等于”按钮后，分别调用插件中的全局函数addNum与subNum,计算文本框中的两数之和与两数之差。其实现的代码如下：

＜!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()));

}); //调用自定义的插件计算两数之和

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

$("#Text6").val(

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

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

}) //调用自定义的插件计算两数之差})

＜/script〉

＜/head〉

＜body〉

＜div class="divFrame"〉

＜div class="divTitle"〉 类级别的插件

＜/div〉

＜div class="divContent"〉输入两数相加：

＜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 /〉输入两数相减：

＜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〉

执行html文件pp_Two.html后，点击第1个“等于”按钮，调用全局函数$.addNum(p1,p2)计算两数之和，点击第2个“等于”按钮调用全局函数$.addNum(p1,p2)计算两数之差，页面效果如图3所示：

图3 引用自定义的类级别插件

5 总结

无论是编写对象级别的插件，还是编写类级别的插件，都要严格遵守插件开发的要素，先搭框架，后进行开发，不同的插件使用不同的拓展方法。根据需要编写自定义的jQuery 插件，可以减少代码的重写，加快 JavaScript 开发速度，可极大地推动WEB开发技术的发展。

[1] 《锋利的jQuery（第2版）》单东林，张晓菲，魏然 编著 人民邮电出版社

[2] 《jQuery实战》 （美国)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-），南京工业职业技术学院，教授，研究方向：计算机应用与多媒体教学，南京，210046

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