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}