jQuery插件

jQuery插件的种类

编写插件的目的是给已有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。jQuery的插件主要分为以下三种类型：

1.封装对象方法的插件

这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是一种最常见的插件。绝大部分的jQuery插件都是封装对象方法的插件。此类插件可以发挥出jQuery的强大优势。

2.封装全局函数的插件

可以将独立的函数加到jQuery命名空间之下。例如noConflict()方法是jQuery内部作为全局函数的插件附加到内核上去的。

3.选择器插件

极少数的情况下，需要用到选择器插件。虽然jQuery的选择器十分强大，但还是会需要扩充一些适用的选择器。

 jQuery插件的基本要点

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

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

（3）插件内部，this指向的是当前通过选择器获取的jQuery对象，对于一般的方法，内部的this指向的是DOM元素。

（4）可以通过this.each来遍历所有元素。

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

（6）通常情况下，插件应该返回一个jQuery对象，以保证插件能够链式操作。

（7）避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示，这样可以避免冲突。当然可以用笔包这种技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。常见的jQuery插件的结构如下：

//为了更好的兼容性，开始前加分号
;(function($){
    /*这里放置代码，可以使用$作为jQuery对象别名*/
})(jQuery);//这里将jQuery作为实参传递给匿名函数

jQuery插件的机制

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

1.jQuery.extend()

可以用于扩展后两种插件。该方法是对jQuery对象的扩展，可以理解为静态方法，不需要实例jQuery就可以使用，代码如下：

jQuery.extend({
    add : function(a, b){
        return a + b;
    }  
});
alert($.add(2, 3)); //7

jQuery.extend()方法除了可以用于扩展jQuery对象之外，还能用于扩展已有的Object对象。如合并settings对象和options对象，修改并返回settings对象，代码如下：

var defaults = {name:'ZhangSan', sex:'男', age:20};
var options = {name:'LiSi', age:22};
var newOpts = $.extend(defaults, options);
//结果newOpts = {name:'LiSi', sex:'男', age:22};

2.jQuery.fn.extend()

用于扩展之前提到的三种类型插件中的第一种。该方法是对jQuery元素的扩展，只能用在jQuery元素上，可以理解为普通方法，即获取了相应的jQuery对象才能调用。定义插件时需要返回this，以支持jQuery的链式操作，代码如下：

$.fn.extend({
        color : function(c){
            this.css("color", c);
        }
    });
alert($('#test').color('red'));

编写jQuery插件

常见jQuery插件的结构如下：

;(function($){
    //这里编写插件的代码，可以继续使用$作为jQuery的别名
    //定义一个局部变量foo，仅方法内部可以访问
    var foo;
    var bar = function(){
        /*
            在匿名函数内部的函数都可以访问foo，即使在外部调
            用bar()的时候，也可以在bar()的内部访问foo，但
            无法在匿名函数外部直接访问foo
        */   
    }
    /*
        下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围，
        这样就可以在匿名函数的外部通过$.BAR()来访问内部定义的函数
        bar()，并且内部函数bar()也能访问foo
    */
    $.BAR = bar;
})(jQuery);

1.封装jQuery对象方法的插件

这里主要是为了说明编写jQuery插件的过程和注意事项，就以一个简单的实例（设置和获取颜色）来说明。

1）插件功能说明

（1）设置匹配元素的颜色。

（2）获取匹配元素的颜色。

2）将该插件按规范命名为jquery.color.js。

3）在JS文件中搭好框架，由于是对jQuery对象的方法扩展，因此采用扩展插件方法jQuery.fn.extend()来编写，代码如下：

;(function($){
    $.fn.extend({
        color : function(c){
            //这里写插件的代码
        }
    });
})(jQuery);

4）编写插件的实现代码如下：

;(function($){
    $.fn.extend({
        color : function(c){
            if(c == undefined){//如果不传值，则获取字体颜色
                return this.css("color");
            } else { //如果传值，则设置字体颜色
                return this.css("color", c);
            }
        }
    });
})(jQuery);

这样，一个简单的jQuery插件算是完成了。

 

2.封装全局函数的插件

这类插件是在jQuery命名空间内部添加一个函数。这类插件只是普通的函数。

例如新增两个函数，分别用于去除左侧和右侧的空格，代码如下：

;(function($){
    $.extend({
        ltrim : function(text){
            return (text || "").replace(/^\s+/g, "");
        },
        rtrim : function(text){
            return (text || "").replace(/\s+$/g, "");
        }
        //(text || "")部分是用于放置传递进来的text这个字符串变量是未定义的状态
        //当text是undified，则返回字符串""，否则返回字符串text
    });
})(jQuery);