《锋利的jQuery》要点归纳（六）插件的使用和写法

《锋利的jQuery》要点归纳（六）插件的使用和写法

一、插件的使用

1 表单验证插件：Validation（略）

http://plugins.jquery.com/project/validate

2 表单插件：Form——升级表单以支持ajax（略）

http://malsup.com/jquery/form/#download

3 动态绑定事件插件：livequery

http://plugins.jquery.com/project/livequery

3.1 即使元素为js动态加载到页面中，也可即时为元素绑定事件

$( " a " ) . livequery( " click " , function (){
// ...
});

3.2 livequery插件还可以为匹配的元素触发一个回调函数，当不再匹配这个元素时，触发另一个回调函数。

$( function (){
$( " li.canBeHover " ) . livequery( function (){
$(this) . hover( function (){
$(this) . addClass( " hover " );
} , function (){
$(this) . removeClass( " hover " );
});
} , function (){
$(this) . unbind( " mouseover " ) . unbind( " mouseout " );

// 如果移除.canBeHover则解绑mouseover和mouseout事件
});
});

3.3 live(type,fn)方法（略）

4 jQueryUI插件

http://ui.jquery.com/download

交互、微件、效果库（略）

5 Cookie插件

http://plugins.jquery.com/project/cookie

写入cookie

$ . cookie( " the_cookie " , " the_value " );

读取cookie

$ . cookie( " the_cookie " );

删除cookie

$ . cookie( " the_cookie " , null );

其他

$ . cookie( " the_cookie " , " the_value " , {
expires : 7 , // (Number/Date) 有效期，单位（天）
path : ' / ' , // (String) cookie的路径属性
domain : ' jquery.com ' , // (String) cookie的域名属性
secure : true // (Boolean) 如果设置为true，此cookie的传输会要求一个安全协议，如https
});

 

二、插件的编写

1 插件的种类

a 封装对象方法的插件

b 封装全局函数的插件

c 选择器插件

 

2 插件的要点

a 推荐命名为：jquery.[插件名].js

b 所有对象方法应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上

c 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样内部的this指向的是DOM元素

d 可以通过this.each来遍历元素

e 所有的方法或函数插件以分号结尾，可以在插件头部先加上一个分号

f 插件一般应该返回一个jQuery对象，以保证插件的可链式操作。

g 避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示以避免冲突。或者通过闭包来回避这个问题

 

3 插件中的闭包

简而言之：所有的插件代码必须放置在如下代码中

;( function ($){ // 开始前的分号保证更好的兼容性，此处将$作为匿名函数的形参
//...这里可以使用$作为jQuery的缩写别名
})(jQuery); // 这里将jQuery作为实参传递给匿名函数

 

4 jQuery插件的机制

jQuery.fn.extend()方法，用来扩展封装对象方法的插件

jQuery.extend()方法，用来扩展封装全局函数的插件和选择器插件

 

5 编写jQuery插件

5.1 封装jQuery对象方法的插件

以编写color()插件为例，框架如下：

;( function ($){
$ . fn . extend({
" color " : function (value){
// 插件代码
}
});
})(jQuery);

color()插件代码：

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

因css()方法内部已经有判断value是否为undefined的机制，所以可以借助css()方法的这个特性来处理，删除if()部分，简化如下：

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

 

注意：

jQuery的选择符可能会匹配1个或多个元素，所以可以在插件内部调用each()方法来遍历匹配元素。插件框架如下：

;( function ($){
$ . fn . extend({
" somePlugin " : function (options){
return this . each ( function (){
// 插件代码
});
}
});
})(jQuery);

 

5.2 封装全局函数的插件（略）

5.3 自定义选择器（略）

转载于:https://www.cnblogs.com/bienfantaisie/archive/2010/12/08/1900504.html