這篇文章主要介紹了總結(jié)jQuery插件開(kāi)發(fā)中的一些要點(diǎn),包括命名空間與事件events等重點(diǎn)和難點(diǎn)部分的講解,要的朋友可以參考下

基礎(chǔ)

1、jQuery插件開(kāi)發(fā)主要使用如下兩個(gè)方法：

1.1、添加靜態(tài)方法

jQuery.extend(object);

為擴(kuò)展jQuery本身，為類添加新的方法，可以理解文添加靜態(tài)方法。

$.extend({ 

　　addMethod : function(a, b){return a + b;}  // $.addMethod(1, 2); //return 3

});

1.2、添加成員方法

jQuery.fn.extend(object);

jQuery.fn = jQuery.prototype

給jQuery對(duì)象添加方法，對(duì)jQuery.prototype進(jìn)行擴(kuò)展，為jQuery類添加成員方法：

$.fn.extend({ 

  getInputText:function(){ 

    $(this).click(function(){ 

      alert($(this).val()); 

    }); 

  } 

});

$("#username").getInputText();

2、一個(gè)通用的框架：

以下是一個(gè)通用的框架：

(function($){ 

  $.fn.yourPluginName = function(options){ 

    //各種屬性和參數(shù) 

    var options = $.extend(defaults, options); 

    this.each(function(){ 

      //插件的實(shí)現(xiàn)代碼

    }); 

  }; 

})(jQuery);

關(guān)于

$.extend(defaults, options);

就是通過(guò)合并defaults和options來(lái)擴(kuò)展defaults，實(shí)現(xiàn)插件默認(rèn)參數(shù)的功能。

實(shí)踐

1、聲明插件名稱：

添加一個(gè)函數(shù)到j(luò)Query.fn（jQuery.prototype）對(duì)象，該函數(shù)的名稱就是你的插件名稱：

jQuery.fn.myPlugin = function() {

 // Do your awesome plugin stuff here

};

在命名不與jQuery其他函數(shù)沖突的情況，可以使用閉包的方式使用$符號(hào)：

(function( $ ) {

 $.fn.myPlugin = function() {

  // Do your awesome plugin stuff here

 };

})( jQuery );

2、插件中的上下文：

jQuery接收一個(gè)回調(diào)，該回調(diào)本身就指向了dom，直接使用this就相當(dāng)于我們平時(shí)的$(this)的情況：

(function( $ ){

 $.fn.myPlugin = function() {

  // there's no need to do $(this) because

  // "this" is already a jquery object

  // $(this) would be the same as $($('#element'));

  this.fadeIn('normal', function(){

   // the this keyword is a DOM element

  });

 };

})( jQuery );

$('#element').myPlugin();

下面是一個(gè)簡(jiǎn)單的jQuery插件，實(shí)現(xiàn)獲取所有div的最大高度：

(function( $ ){

 $.fn.maxHeight = function() {

  var max = 0;

  this.each(function() {

   max = Math.max( max, $(this).height() );

  });

  return max;

 };

})( jQuery );

var tallest = $('div').maxHeight(); // Returns the height of the tallest div

3、維護(hù)鏈接性：

前面的示例返回一個(gè)整數(shù)值最高的div，但是通常的意圖僅在某種程度上是僅修改插件的元素集合,并將它們傳遞到下一個(gè)鏈中的方法。這樣的jQuery的設(shè)計(jì)優(yōu)雅的地方。所以保持鏈接性放到一個(gè)插件,您必須確保您的插件返回這個(gè)關(guān)鍵字。

(function( $ ){

 $.fn.lockDimensions = function( type ) { 

  return this.each(function() {

   var $this = $(this);

   if ( !type || type == 'width' ) {

    $this.width( $this.width() );

   }

   if ( !type || type == 'height' ) {

    $this.height( $this.height() );

   }

  });

 };

})( jQuery );

$('div').lockDimensions('width').css('color', 'red');

因?yàn)椴寮祷豻his關(guān)鍵字的范圍,它維護(hù)鏈接性，jQuery可以繼續(xù)利用jQuery方法，如. css。所以，如果你的插件不返回一個(gè)內(nèi)在價(jià)值,你應(yīng)該總是返回this。

4、參數(shù)的傳遞，Defaults和Options：

(function( $ ){

 $.fn.tooltip = function( options ) { 

  // Create some defaults, extending them with any options that were provided

  var settings = $.extend( {

   'location'     : 'top',

   'background-color' : 'blue'

  }, options);

  return this.each(function() {    

   // Tooltip plugin code here

  });

 };

})( jQuery );

$('div').tooltip({

 'location' : 'left'

});

通過(guò)$.extend合并默認(rèn)參數(shù)和調(diào)用者傳入的參數(shù)。

5、命名空間：

正確的命名空間在插件開(kāi)發(fā)中是一個(gè)非常重要的部分。正確的命名空間，可以確保你的插件將有一個(gè)很低的幾率在同一個(gè)頁(yè)面上被他插件或代碼覆蓋。

在任何情況下都不應(yīng)該在一個(gè)插件的jQuery.fn對(duì)象中聲稱多個(gè)名稱空間。

(function( $ ){

 $.fn.tooltip = function( options ) { 

  // THIS

 };

 $.fn.tooltipShow = function( ) {

  // IS

 };

 $.fn.tooltipHide = function( ) { 

  // BAD

 };

 $.fn.tooltipUpdate = function( content ) { 

  // !!! 

 };

})( jQuery );

你應(yīng)該收集所有的方法到一個(gè)對(duì)象化字面，并且通過(guò)方法的字面值進(jìn)行調(diào)用：

(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 );

// calls the init method

$('div').tooltip(); 

// calls the init method

$('div').tooltip({

 foo : 'bar'

});

// calls the hide method

$('div').tooltip('hide'); 

// calls the update method

$('div').tooltip('update', 'This is the new tooltip content!');

這種類型的方法封裝和體系結(jié)構(gòu)在jQuery插件社區(qū)中是一個(gè)標(biāo)準(zhǔn)，它適用于無(wú)數(shù)的插件,包括jQueryUI插件和小部件。

6、Events：

Bind方法允許通過(guò)命名空間的方式綁定事件，如果你的插件綁定了事件，可以通過(guò)命名空間的方式，在解除綁定事件時(shí)，你也可以這樣做，來(lái)防止影響到其他的事件?？梢酝ㄟ^(guò)“.<namespace>” 的方式來(lái)設(shè)置綁定事件的命名空間。

(function( $ ){

 var methods = {

   init : function( options ) {

    return this.each(function(){

     $(window).bind('resize.tooltip', methods.reposition);

    });

   },

   destroy : function( ) {

    return this.each(function(){

     $(window).unbind('.tooltip');

    })

   },

   reposition : function( ) { 

    // ... 

   },

   show : function( ) { 

    // ... 

   },

   hide : function( ) {

    // ... 

   },

   update : function( content ) { 

    // ...

   }

 };

 $.fn.tooltip = function( method ) {

  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 );

$('#fun').tooltip();

// Some time later...

$('#fun').tooltip('destroy');

7、Data：

關(guān)于data方法可以參考官方的文檔：http://docs.jquery.com/Data，既是在頁(yè)面的元素中綁定存儲(chǔ)數(shù)據(jù)。

這里通過(guò)編寫(xiě)插件，實(shí)現(xiàn)在頁(yè)面中的每個(gè)元素都綁定一些當(dāng)前的狀態(tài)或者內(nèi)容。

(function( $ ){

 var methods = {

   init : function( options ) {

    return this.each(function(){

     var $this = $(this),

       data = $this.data('tooltip'),

       tooltip = $('<div />', {

        text : $this.attr('title')

       });

     // If the plugin hasn't been initialized yet

     if ( ! data ) {

      /*

 Do more setup stuff here

 */

      $(this).data('tooltip', {

        target : $this,

        tooltip : tooltip

      });

     }

    });

   },

   destroy : function( ) {

    return this.each(function(){

     var $this = $(this),

       data = $this.data('tooltip');

     // Namespacing FTW

     $(window).unbind('.tooltip');

     data.tooltip.remove();

     $this.removeData('tooltip');

    })

   },

   reposition : function( ) { // ... },

   show : function( ) { // ... },

   hide : function( ) { // ... },

   update : function( content ) { // ...}

 };

 $.fn.tooltip = function( method ) {

  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 );