JQuery插件開發學習

插件是JQuery強大之處的體現,把最聰明的功能封裝到插件中，能夠爲你及你的團隊節省大量開發時間.

編寫一個JQuery插件，在於給JQuery.fn加入新的功能屬性，此處添加的對象屬性名稱就是你插件的名稱

js代碼

jQuery.fn.myPlugin = function(){ //你本身的插件代碼  }

能夠看到，好像$符號不見了。它仍然存在，爲了確保你的插件不與其餘使用$的庫發生衝突。有一個最佳實踐: 把jQuery傳遞給IIFE (當即調用函數) (自我執行的封閉程序，jQuery在此程序中映射成$符號), 並經過它映射成$, 這樣就避免了在執行的做用域中被其餘庫所覆蓋.

js代碼

(function($){

  $.fn.myPlugin = function(){

     //你本身的插件代碼
     
    };


})（jQuery）

 在這個封閉的程序中，咱們能夠無限制的使用$符號來表示jQuery函數

 

上下文

如今，整個外殼已經寫好，就能夠開始編寫真正的插件代碼了. 在插件的範圍內，this 關鍵字表明瞭這個插件將要執行的jQuery對象.  這裏要特別注意一下, 由於在其餘包含callback的jQuery函數中，this關鍵字表明瞭原生的DOM元素. 這容易致使開發人員誤將this關鍵字無謂的包含在jQuery中,以下： 

(function($){

$.fn.myPlugin = function(){

   //此處沒有必要將this包在$號中,如$(this),由於this已是一個jQuery對象
   //$(this)等同於 $($('#element'));
  
  this.fadeIn('normal', function(){

     // 在這個fadeIn函數內部， this 關鍵字指向DOM對象
 
});
};
})(jQuery);

 

基礎知識點

寫一個簡單的插件，來作一些事情

js 代碼

(function($){

$.fn.maxHeight = function(){

var max = 0;

this.each(function(){

max = Math.max(max,$(this).height());
   
});
return max;
}
})(jQuery);

調用這個jquery plugin
var height = $('div').maxHeight();  //返回頁面上全部div元素中，高度最大的那個div元素的高度

 

實現Chainability

上面的方法中，返回了頁面上最高div的高度，是個整數值. 可是，有的時候，jQuery插件的做用只是修改或者獲取頁面上元素的屬性值，返回一個jQuery對象，而後把它傳遞給調用鏈的下一個方法。聽說這也正是jQuery設計好的地方所在。 那麼，爲了確保jQuery插件的chainability, 必須確保這個jQuery插件返回this關鍵字

如今咱們來寫一個例子，這個jQuery插件，傳入一個type參數 (width或者height),返回插件內部的this, 也就是jQuery對象

 

(function($){

$.fn.getDimension = 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);


調用這個jQuery plugin

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

必定要特別注意這種寫法，由於jQuery plugin 常常這樣使用，return this.each(function(){ // do something }), 這樣，來返回jQuery對象。

在這種使用中，因爲這個jQuery插件返回了this關鍵字，這樣返回值，依然能夠直接使用其餘jQuery方法，如css, 實現了chainability. 

因此，在jQuery插件中，若是不須要返回值，那麼，你應該老是在其做用範圍內返回this關鍵字(jQuery對象)

 

默認設置和選項

jQuery插件，還有一種是傳遞更多選項options參數，提供許多選項，更復雜，更可配置的插件。 這種使用，最佳的實踐是提供一個默認配置, 它能夠在插件調用時 (經過$.extend)被擴展. 

這樣，調用插件時，無需大量參數。 只須要一個對象參數，內容爲你但願不一樣於默認值的那部分設置.  好比下面的例子:

(function($){

$.fn.tooltip = function(options){

var settings = $.extend(
{
'location'  : 'top',
'background-color' : 'blue'
}, 
options);


return this.each(function(){

//tooltip plugin code 

});

};
})(jQuery);


調用tooltip這個jQuery插件

$('div').tooltip(
{
'location' : 'left'
}
);

在這個例子中，用給定選項調用 tooltip 插件後， 默認的 location 設置被覆蓋爲 "left"， 但 bacground-color 設置仍爲默認值 "blue"。最終的設置對象看起來這樣的：

{
  'location'         : 'left',
  'background-color' : 'blue'
}

這是一個很是好的方式， 能夠提供一個高度可配置的插件，又沒必要強制開發者定義全部選項。

 

名稱空間

 首先要明白什麼是jQuery插件中的名稱空間，是這樣的，好比jQuery插件 $.fn.tooltip, tooltip 就是這個插件的名稱空間。  正確的名稱空間很是重要，它能夠確保你的插件很難被其餘插件或同一頁面中的其餘代碼所覆蓋。

這裏有個原則，就是在任何狀況下，一個單獨的插件，都不該該在jQuery.fn對象裏有多個名稱控件，好比 如下作法是徹底不推薦的：

(function($){

$.fn.tooltip = function(options){  };

$.fn.tooltipShow = function(){  };

$.fn.tooltipHide = function(){ };

$.fn.tooltipUpdate = function(content){ };

})(jQuery);

這種寫法是不被鼓勵的，由於它 $.fn使 $.fn的名稱空間搞的混亂。 正確的方法是，你須要把全部插件方法收集到一個對象定義中，並經過傳遞方法名稱字符串調用:(funcvar methods init : function(options){

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


//調用該jquery插件中的 init方法
$('div').tooltip();

//調用該jquery插件中的 init方法
$('div').tooltip(
{foo : 'bar'}
);

//調用該jquery插件中的 hide方法

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

//調用該jquery插件中的 Update方法
$('div').tooltip('update','This is the new tooltip content!');

 

特別注意這種類型的插件結構, 它容許你封裝全部的方法在父包中，經過傳遞該方法的字符串名稱和額外的此方法須要的參數來調用它們。 

這種方法的封裝和架構類型是jQuery插件社區的標準， 它被無數的插件在使用。 包括jQueryUI中的插件和widgets.

 

事件

 bind方法有個特性，它支持爲綁定事件定義名稱空間。若是你的插件要綁定事件，最好爲其定義名稱空間。 這樣的話，後面你想解除事件綁定unbind時，就不會影響到相同事件類型上的其餘已綁定事件。

須要爲事件定義名稱空間，把".<namespace >"附加到要綁定的事件類型後面就能夠。

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



//調用這個jQuery插件
$('#fun').tooltip();

//解除綁定 unbind 
$('#fun').tooltip('destory');

在這個例子中，當tooltip被init方法初始化的時候，它把reposition方法綁定到window對象的resize事件上，名稱空間爲'tooltip'.   

若是開發者哪一天想要銷燬對象，能夠把插件的名稱空間(即 "tooltip")傳給unbind方法，以便解除本插件對全部事件的綁定.

這讓咱們能夠安全地解除本插件的事件綁定，避免意外影響插件以外綁定的事件.

 

數據

插件開發中，你可能常常須要維護狀態，或檢查你的插件是否已經在給定元素上作過初始化。 jQuery data方法