写一个 jQuery 插件(转)

写jQuery插件的目的

主要是对一些重复使用率高的一系列方法或函数做封装，能够提高开发的效率，也方便后期维护

写插件前需要知道的预备知识

jQuery插件有哪几种类型？

1. 封装对象方法的插件（对象级别）

   这类插件是最常见的一种，即将对象方法进行封装，然后通过选择器获取的jQuery对象进行操作。
   用法：$('#id').myPlugin()。

2. 封装全局函数的插件（类级别）

   即将独立的函数加到jquery命名空间下, 拓展jQuery类，典型例子$.ajax()
   用法：$.myPlugin()

jQuery插件中的闭包

常见的jQuery插件形式如下：

//为了更好的兼容性，开始有个分号 
;(function ($) { 
    /*你的插件代码*/
 })(jQuery); 

利用闭包的特性，避免内部变量影响全局空间，通过形参$将jQuery传递给匿名函数，在插件内部就可以使用$作为jQuery的别名。

jQuery插件的机制

//扩展第一种类型（即对象级别）的插件 
 jQuery.fn.extend() 
//扩展第二种类型（即类级别）的插件 
 jQuery.extend() 

extend()方法接受一个Object类型的参数，key值为函数名或方法名，value值为函数主体。

//给jQuery对象添加方法，就是对jQuery.prototype扩展，给jQuery类添加成员方法 
$.fn.extend({ 
    getInputText: function(){ 
        $(this).click(function(){ 
            alert($(this).val()); 
        }); 
    } 
});
 //$("#username").getInputText(); 
//给jQuery类扩展，相当于给jQuery添加静态方法 
$.extend({
　　add: function(a, b){return a + b;}
}); // $.add(1, 2); 
//return 3 

除了可以扩展jQuery对象，$.extend(default, options)还可以扩展Object对象，用传入的参数options覆盖默认值default。

function myPlugin(options) { 
  var defaults = {
        color: 'blue',
        width: '100' };
    options = $.extend(defaults, options);
}
//myPlugin({color: 'white'}); 
//myPlugin({color: 'white', width: '200'}); 
//myPlugin();

需要注意的问题

• 插件名推荐命名为jquery.插件名.js，比如jquery.myPlugin.js

• 插件内部this的指向为将要执行的jquery对象，而在其他包含callback的jQuery函数里，this指向原生DOM元素。

  (function($) {
      $.fn.myPlugin = function () {         
      //此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。        
       //$(this)等同于 $($('#element'));         
      this.fadeIn('normal', function () {         
      //此处callback函数中this关键字代表一个DOM元素     
    });
      };
  })(jQuery); 

• 用this.each对所有元素进行遍历，同时为了保持插件的链式调用，确保插件返回this关键字

  (function($) {
      $.fn.myPlugin = function () {         
      return this.each(function () {             
      //此处是你的插件代码     
      });
      };
  })(jQuery); 

• 保护好默认参数

回顾上面讲$.extend(default, options)时举的例子

``` function myPlugin(options) { 
   var defaults = {
        color: 'blue',
        width: '100' };
    options = $.extend(defaults, options);
} ``` 

这种写法不好，调用extend时会改变defaults的值，defaults作为插件默认值应维持原状，若后续想再使用默认值，会发现它已被用户传来的值所更改。
所以更好的写法是把一个新的空对象作为extend的第一个参数，接下来是defaults和options，那么所有值合并后保存到了这个空对象上，保护了默认值。

function myPlugin(options) { 
  var defaults = {
        color: 'blue',
        width: '100' };
    options = $.extend({}, defaults, options);
}