编写jQuery插件

一、插件的种类

       jQuery的插件主要分为三种类型：

       1、封装对象方法的插件

                        将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。

       2、封装全局函数的插件

                       可以将独立的函数加到jQuery命名空间之下。如jQuery.ajax()等，都是将jQuery内部作为全局函数的插件附加到内核上去的。

       3、选择器插件

                     个别情况下，会需要用到选择器插件。需要扩充一些自己喜欢的选择器等。

二、插件的基本要点

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

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

       3、在插件内部，this指向的是当前通过选择器获取的jquery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素。

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

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

      6、插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或数组等。

     7、避免在插件内部使用$作为jQuery对象的别名，而应该使用完整的jQuery来表示，这样可以避免冲突。当然，也可以利用闭包这种技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。

三、插件中的闭包

       闭包：允许使用内部函数（即函数定义和函数表达式位于另一个函数的函数体内），而且，这些内部函数可以访问他们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数，当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。即内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必须访问其外部函数的局部变量、参数及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。

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

      必须的jquery结构：

//注意为了更好的兼容性，开始前有个分号
;（function($){              //此处将$作为匿名函数的形参
        /*这里置放代码，可以使用$作为jQuery的缩写别名*/  
}）(jQuery);   //这里将jQuery作为实参传递给匿名函数了

      

        常见的jquery结构：

;(function($){
   //这里编写插件的代码，可以继续使用$作为jQuery的别名
  //定义一个局部变量foo,仅函数内部可以访问，外部无法访问
   var foo;
   var bar = function(){
          /*
                在匿名函数内部的函数都可以访问foo,即便是在匿名函数的外部调用bar()的时候，也可以在bar()的内部访问到foo,但在匿名函数的外部直接访问foo是做不到的
         */
   }

    /*
          下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围内。这样就可以在匿名函数的外部通过调用jQuery.BAR()来访问内部定义的函数bar(),并且内部函数bar()也能访问匿名函数内的变量foo
    */
     $.BAR = bar ;
})(jQuery);

    

四、jQuery插件中的机制

     jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。

     前者用于扩展之前提到的对象方法插件，后者用于扩展全局函数和选择器插件。

     这两种方法都接受一个参数，类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。jQuery.extend()方法除了可以用于扩展jQuery对象之外，还有一个很强大的功能，就是用于扩展/修改已有的Object对象。

//后面的对象会覆盖前面重复的对象
jQuery.extend(target,obj1,obj2,....);

通过使用jQuery.extend()方法，可以很方便的用传入的参数来覆盖默认值。

jQuery.extend, jQuery.fn.extend  和 jQuery.fn.pluginName 的联系与区别：

jQuery.extend（）的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而jQuery.fn.extend()的调用把方法扩展到prototype上。所以实例化一个jQuery对象的时候，它就具有了这些方法。

 jQuery.fn.extend = jQuery.prototype.extend

;(function(){
    $.fn.pluginName = function(options){
         
     };
     //等价于
     var pluginName = {
          function(options){

          }
     }

      // so
     $.fn.extend(pluginName) = $.prototype.extend(pluginName) = $.fn.pluginName
})(jQuery);

   

     

五、编写jQuery插件

      插件编写示例：

<script>
     //插件编写
     ;(function(){
           $.fun.extend({
                "color":function(value){
                     return this.css('color',value); 
                 }
           });
      })(jQuery);

     //插件应用
       $(function(){
              alert($('div').color('red'));
        });
</script>

<div class='a'>red</div>
<div style="color:blue">blue</div>