JQuery插件写法的总结
原文http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0418/110.html
JQuery插件写法的总结
最近Web应用程序中越来越多地用到了JQuery等Web前端技术。这些技术框架有效地改善了用户的操作体验，同时也提高了开发人员构造丰富客户端UI的效率。JQuery本身提供了丰富的操作，但是，有时候我们需要根据我们自己的业务和系统特色（风格）构造一些我们常用的前端UI组件，而JQuery的插件给了我们一个较好的方式来构造这些UI组件，方便我们日后反复重用这些组件。
网上也有很多关于JQuery插件的文章，我也搜了一些，但是，这些文档太过离散，没有有效地组织并充分说明JQuey插件该如何编写，并且有哪几种形式，什么情况下使用哪种形式。下面，我将说明JQuery插件常用的写法，以及这些插件的常用场景。
一、插件的两种写法
首先，在具体说明编写插件之前，我们先假定一个使用场景：有一个HTML页面（或.aspx页面），页面上放置了一个5行3列的表格，即：<table></table>标记，具体代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<tableid=
"newTable"
>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
</table>
|
OK，结合这个场景，我们进一步探讨如何利用JQuery插件实现上述功能。常用的JQuery插件有如下几种写法：
1. 对JQuery自身的扩展插件
顾名思义，这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.MethodName()的方式直接使用。
插件代码示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$.extend({
handleTableUI :
function
(table){
varthisTable = $(
"#"
+ table);
$(thisTable).find(
"tr"
).bind(
"mouseover"
,
function
() {
$(
this
).css({ color:
"#ff0011"
, background:
"blue"
});
});
$(thisTable).find(
"tr"
).bind(
"mouseout"
,
function
() {
$(
this
).css({ color:
"#000000"
, background:
"white"
});
});
}
});
|
|
1
2
3
4
5
|
<scripttype=
"text/javascript"
>
$(document).ready(
function
() {
$.handleTableUI(
"newTable"
);
});
</script>
|
使用这种插件的扩展方式，在使用此插件时，需要首先引用经过JQuery包装的页面元素，如：$("#tableId").Method()。
插件代码示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
(
function
($){
$.fn.tableUI =
function
(options){
var
defaults = {
evenRowClass:
"evenRow"
,
oddRowClass:
"oddRow"
,
activeRowClass:
"activeRow"
}
var
options = $.extend(defaults, options);
this
.each(
function
(){
var
thisTable=$(
this
);
//添加奇偶行颜色
$(thisTable).find(
"tr:even"
).addClass(options.evenRowClass);
$(thisTable).find(
"tr:odd"
).addClass(options.oddRowClass);
//添加活动行颜色
$(thisTable).find(
"tr"
).bind(
"mouseover"
,
function
(){
$(
this
).addClass(options.activeRowClass);
});
$(thisTable).find(
"tr"
).bind(
"mouseout"
,
function
(){
$(
this
).removeClass(options.activeRowClass);
});
});
};
})(jQuery);
|
这里重点说一下这一句
var options= $.extend(defaults, options);
这里其实就是合并多个对象为一个。这里就是，如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。
|
1
2
3
4
5
|
<scripttype=
"text/javascript"
>
$(document).ready(
function
() {
$(
"#newTable"
).setTableUI();
});
</script>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
(
function
($) {
$.tableUI = { set:
function
() {
varthisTable = $(
"table"
);
$(thisTable).find(
"tr"
).bind(
"mouseover"
,
function
() {
$(
this
).css({ color:
"#ff0011"
, background:
"blue"
});
});
$(thisTable).find(
"tr"
).bind(
"mouseout"
,
function
() {
$(
this
).css({ color:
"#000000"
, background:
"white"
});
});
}
};
//此处需要进行自调用
$(
function
() {
$.tableUI.set();
});
})(jQuery);
|
jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JavaScript库插件混淆。例如命名为jquery.color.js。
所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。
在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素。
可以通过this.each来遍历所有元素。
所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更稳妥些，甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。具体方法可以参考后面的代码。
插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等。
避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示。这样可以避免冲突。当然，也可以利用闭包这种技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。很多插件都是这么做的，本教程也会利用这种形式。