插件是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方法

?

轉載于:https://www.cnblogs.com/wphl-27/p/6903170.html

總結

以上是生活随笔為你收集整理的JQuery插件开发学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。