jQuery插件开发模式

jQuery是一个非常强大的JavaScript开发框架，它拥有灵活易用的插件扩展机制，开发人员很方便就可以开发自己的插件来实现特定的功能。最近在项目中就开发和扩展了几个jQuery插件，在这里总结一下。主要参考了jQuery官网和learningjquery上的文章。

0 命名规范

最基本的，插件的文件名带上jquey前缀，如 jquery.foo.js。让人一看就知道这是基于jQuery的插件，尤其是项目中用到多个JavaScript框架时。

1 扩展方式

jQuery为开发插件提拱了两个方法，分别是：

jQuery.extend(object);

• 扩展jQuery类本身，为类添加新的方法。可以理解为添加静态方法。这个方法不会返回jQuery对象。

jQuery.fn.extend(object);

• 扩展jQuery对象，为jQuery对象添加方法。返回相应的jQuery对象

一般情况下，我们说的插件开发，都是指的第二种方法。

2 使用闭包

选好了扩展方式，就可以开始编写插件代码了。但在这之前，先用个闭包把代码包起来。即：

1 2 3 4 5

( function ($){     $.fn.foo = function (){    //foo插件代码     } })(jQuery)

这样做的好处是，避免与第三方的代码冲突，很好的兼容了jQuery操作符$和jQuery，还能保护插件内的私有变量和函数。jQuery官方推荐每个插件都使用闭包。

3 命名空间

使用命名空间是为了避免全局冲突。一般来说，一个插件只做一件事情，因此定义一个函数就OK了。但如果插件里提供了多个函数(例如，$.fn.tooltipShow()和$.fn.tooltipHide()。)怎么办呢？答案是使用使用命名空间。请看代码示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

( function ( $ ){      var methods = {      init : function ( options ) { // THIS },      show : function ( ) { // IS   },      hide : function ( ) { // GOOD },      update : function ( content ) { // !!! }    };      $.fn.tooltip = function ( method ) {        // Method calling logic      if ( methods[method] ) {        return methods[ method ].apply( this , Array.prototype.slice.call( arguments, 1 ));      } else if ( typeof method === 'object' || ! method ) {        return methods.init.apply( this , arguments );      } else {        $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );      }         };   })( jQuery );

使用命名空间可以更好的封装代码，也是jQuery官方强烈推荐的。对于事件的绑定和解除，也建议使用命名空间，此处不再详述。

4 提供options参数以控制插件的行为

大多数时候，我们开发的插件需要提供一些参数，以便调用时控制插件的行为。对此，最佳的方案是，提供名为options的调用参数。插件内设定一个缺省参数数组，并通过$.extend()与调用方传来的options参数合并。这已经是jQuery插件开发的固定模式。

5 适当暴露插件的设置和函数

jQuery插件也是可以扩展的，也即是插件的插件。为了达到这个目的，访问插件内的设置和一些函数。把这些东西暴露出来，在扩展插件的时候会很方便。例如，对于插件tooltip方法中的默认设置defaults和方法format()。

1 2 3 4 5 6 7 8

$.fn.tooltip.defaults = {      foreground: 'red' ,      background: 'yellow' };   $.fn.tooltip.format = function (txt) {      return '<strong>' + txt + '</strong>' ; };

在使用的时候，只需这样一行代码

1	$.fn.hilight.defaults.foreground = 'blue' ;

就可以改变插件的行为，对于函数也是如此。

7 总是返回jQuery对象

这也是显而易见的一条，对于$.fn.extend()的扩展方式，总是返回this对象，以维持jQuery的链式调用关系。