jQuery自定义插件编写

有时候jquery中自带的功能不能满足我们的需求，这是我们就可以编写自己的jQuery插件来提高开发效率了。

目的

编写插件的目的就是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。

插件种类

封装对象方法的插件

这个插件的编写用jQuery.fn.extend()方法。

下面的例子是编写设置和获取颜色的插件。

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

插件的应用

//插件应用
$(function(){
$("div").click(function(){
var color = $(this).text();
$("div").color( color ); //设置所有的div的字体颜色
})
})

定义一组插件，可以如下写法：

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

封装全局函数的插件

这个插件的编写用jQuery.extend()方法。实质就是在jQuery命名空间内部添加一个函数。

下面例子是去除左侧、右侧的空格的插件。

//插件编写
;(function($) {
$.extend({
ltrim : function( text ) {
return (text || "").replace( /^\s+/g, "" )
},
rtrim : function rtrim( text ) {
return (text || "").replace( /\s+$/g, "" )
}
});
})(jQuery);

//插件应用
$(function(){
$("#trimTest").val(
jQuery.trim("       test      ") + "\n" +
jQuery.ltrim("       test      ") + "\n" +
jQuery.rtrim("       test      ")
);
})

选择器插件

这个插件的编写用jQuery.extend()方法。

jQuery选择符解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每个选择符执行一个函数，称为选择器函数。最后根据这个选择器函数的返回值为true还是false来决定是否保留这个元素。这样就找到匹配的元素节点。

下面是编写获取索引值得元素的功能插件。

//插件编写
;(function($) {
$.extend(jQuery.expr[":"], {
between :   function( a , i ,m ) {
var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组
return tmp[0]-0<i&&i<tmp[1]-0;
}
});
})(jQuery);

//插件应用
$(function(){
alert("执行前");
$("div:between(2,5)").css("background","white");
alert("执行后");
})

注意，选择器插件中的函数属于运算密集型函数，对执行效率有很高的要求，写此类插件时要秉承优化再优化的原则，千万不要随便写一个能实现功能的函数就草草了事。

插件的基本要点

jQuery插件的文件名推荐命名为jQuery.[插件名].js，以免和其他JavaScript库插件混淆。

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

在插件内部，this指向的是当前通过选择器获取到的jQuery对象。

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

所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更加稳妥些，甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。

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

插件中的闭包

利用闭包的特性，既可以避免内部临时变量影响全局变量，又可以在插件颞部继续使用$作为jQuery的别名。

下面代码是常见的jQuery插件的结构。

//注意为了更好的兼容性，开始前有个分号
;(function($) {//此处将$作为匿名函数的形参

// 这里放置代码，可以使用$作为jQuery的缩写别名
})(jQuery);//这里将jQuery作为实参传递给匿名函数

插件应该会有一些选项是可以让开发者自己根据需要设置的，所以提供恢复默认选项是以有必要的。你可以通过jQuery的extend功能来设置这些选项：

var defaults = {//默认配置参数
'container' : '#container',//容器
'sections' : '.section',//子容器
'easing' : 'ease',//特效方式，ease-in,ease-out,linear
'duration' : 1000,//每次动画执行的时间
'pagination' : true,//是否显示分页
'loop' : false,//是否循环
'keyboard' : true,//是否支持键盘
'direction' : 'vertical',//滑动的方向horizontal,vertical,
};

opts = $.extend({}, defaults , options||{});

jQuery提供了两个用于扩展jQuery功能的方法：jQuery.extend()和jQuery.fn.extend().这两个方法都接受一个参数，类型为Object。Object对象的”名/值对”分别代表”函数或方法名/函数主体”.

特别说明： $.extend()方法的第一个参数是一个空对象，而不是默认参数defaults，这里的原因是为了保护默认参数值不会被用户自定义参数所修改。

第一个参数默认为false，是浅拷贝。如果有重复的属性，会直接覆盖。第一个参数为true时，是深拷贝。是进行递归合并，对已有属性进行覆盖，对没有的属性进行添加。

//深拷贝
{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
//浅拷贝
//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}