jQuery是一个非常强大的JavaScript开发框架,它拥有灵活易用的插件扩展机制,开发人员很方便就可以开发自己的插件来实现特定的功能。最近在项目中就开发和扩展了几个jQuery插件,在这里总结一下。主要参考了jQuery官网和learningjquery上的文章。
0 命名规范
最基本的,插件的文件名带上jquey前缀,如 jquery.foo.js。让人一看就知道这是基于jQuery的插件,尤其是项目中用到多个JavaScript框架时。
1 扩展方式
jQuery为开发插件提拱了两个方法,分别是:
jQuery.extend(object);
- 扩展jQuery类本身,为类添加新的方法。可以理解为添加静态方法。这个方法不会返回jQuery对象。
jQuery.fn.extend(object);
- 扩展jQuery对象,为jQuery对象添加方法。返回相应的jQuery对象
一般情况下,我们说的插件开发,都是指的第二种方法。
2 使用闭包
选好了扩展方式,就可以开始编写插件代码了。但在这之前,先用个闭包把代码包起来。即:
1
2
3
4
5
|
(
function
($){
$.fn.foo =
function
(){
//foo插件代码
}
})(jQuery)
|
这样做的好处是,避免与第三方的代码冲突,很好的兼容了jQuery操作符$和jQuery,还能保护插件内的私有变量和函数。jQuery官方推荐每个插件都使用闭包。
3 命名空间
使用命名空间是为了避免全局冲突。一般来说,一个插件只做一件事情,因此定义一个函数就OK了。但如果插件里提供了多个函数(例如,$.fn.tooltipShow()和$.fn.tooltipHide()。)怎么办呢?答案是使用使用命名空间。请看代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
(
function
( $ ){
var
methods = {
init :
function
( options ) {
// THIS },
show :
function
( ) {
// IS },
hide :
function
( ) {
// GOOD },
update :
function
( content ) {
// !!! }
};
$.fn.tooltip =
function
( method ) {
// Method calling logic
if
( methods[method] ) {
return
methods[ method ].apply(
this
, Array.prototype.slice.call( arguments, 1 ));
}
else
if
(
typeof
method ===
'object'
|| ! method ) {
return
methods.init.apply(
this
, arguments );
}
else
{
$.error(
'Method '
+ method +
' does not exist on jQuery.tooltip'
);
}
};
})( jQuery );
|
使用命名空间可以更好的封装代码,也是jQuery官方强烈推荐的。对于事件的绑定和解除,也建议使用命名空间,此处不再详述。
4 提供options参数以控制插件的行为
大多数时候,我们开发的插件需要提供一些参数,以便调用时控制插件的行为。对此,最佳的方案是,提供名为options的调用参数。插件内设定一个缺省参数数组,并通过$.extend()与调用方传来的options参数合并。这已经是jQuery插件开发的固定模式。
5 适当暴露插件的设置和函数
jQuery插件也是可以扩展的,也即是插件的插件。为了达到这个目的,访问插件内的设置和一些函数。把这些东西暴露出来,在扩展插件的时候会很方便。例如,对于插件tooltip方法中的默认设置defaults和方法format()。
1
2
3
4
5
6
7
8
|
$.fn.tooltip.defaults = {
foreground:
'red'
,
background:
'yellow'
};
$.fn.tooltip.format =
function
(txt) {
return
'<strong>'
+ txt +
'</strong>'
;
};
|
在使用的时候,只需这样一行代码
1
|
$.fn.hilight.defaults.foreground =
'blue'
;
|
就可以改变插件的行为,对于函数也是如此。
7 总是返回jQuery对象
这也是显而易见的一条,对于$.fn.extend()的扩展方式,总是返回this对象,以维持jQuery的链式调用关系。