jQuery插件開發實例詳解

今天為大家介紹的是jQuery插件開發實例詳解，希望大家會喜歡。

所謂“插件”，就是用戶自己新增的jQuery實例對象的方法。由於該方法要被所有實例共享，所以只能定義在jQuery構造函數的原型對象(prototype)之上。對於用戶來說，把一些常用的操作封裝成插件(plugin)，使用起來會非常方便。

插件的編寫

本質上，jQuery插件是定義在jQuery構造函數的prototype對象上面的一個方法，這樣做就能使得所有jQuery對象的實例都能共 享這個方法。因為jQuery構造函數的prototype對象被簡寫成jQuery.fn對象，所以插件采用下面的方法定義。

jQuery.fn.myPlugin = function() {

// Do your awesome plugin stuff here

};

更好的做法是采用下面的寫法，這樣就能在函數體內自由使用美元符號($)。

;(function ($){

$.fn.myPlugin = function (){

// Do your awesome plugin stuff here

};

})(jQuery);

上面代碼的最前面有一個分號，這是為了防止多個腳本文件合並時，其他腳本的結尾語句沒有添加分號，造成運行時錯誤。

有時，還可以把頂層對象(window)作為參數輸入，這樣可以加快代碼的執行速度和執行更有效的最小化操作。

;(function ($, window) {

$.fn.myPlugin = function() {

// Do your awesome plugin stuff here

};

}(jQuery, window));

需要注意的是，在插件內部，this關鍵字指的是jQuery對象的實例。而在一般的jQuery回調函數之中，this關鍵字指的是DOM對象。

(function ($){

$.fn.maxHeight = function (){

var max = 0;

// 下面這個this，指的是jQuery對象實例

this.each(function() {

// 回調函數內部，this指的是DOM對象

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

});

return max;

};

})(jQuery);

上面這個maxHeight插件的作用是，返回一系列DOM對象中高度最高的那個對象的高度。

大多數情況下，插件應該返回jQuery對象，這樣可以保持鏈式操作。

(function ($){

$.fn.greenify = function (){

this.css("color", "green");

return this;

};

})(jQuery);

$("a").greenify().addClass("greenified");

上面代碼返回this對象，即jQuery對象實例，所以接下來可以采用鏈式操作。

對於包含多個jQuery對象的結果集，可以采用each方法，進行處理。

$.fn.myNewPlugin = function() {

return this.each(function() {

// 處理每個對象

});

};

插件可以接受一個屬性對象參數。

(function ($){

$.fn.tooltip = function (options){

var settings = $.extend( {

'location' : 'top',

'background-color' : 'blue'

}, options);

return this.each(function (){

// 填入插件代碼

});

};

})(jQuery);

上面代碼使用extend方法，為參數對象設置屬性的默認值。

實例

下面是一個將a元素的href屬性添加到網頁的插件。

(function($){

$.fn.showLinkLocation = function() {

return this.filter('a').append(function(){

return ' (' + this.href + ')';

});

};

}(jQuery));

// 用法

$('a').showLinkLocation();

從上面的代碼可以看到，插件的開發和使用都非常簡單。

插件的發布

編寫插件以後，可以將它發布到jQuery官方網站上。

首先，編寫一個插件的信息文件yourPluginName.jquery.json。文件名中的yourPluginName表示你的插件名。

{

"name": "plugin_name",

"title": "plugin_long_title",

"description": "...",

"keywords": ["jquery", "plugins"],

"version": "0.0.1",

"author": {

"name": "...",

"url": "..."

},

"maintainers": [

{

"name": "...",

"url": "..."

}

],

"licenses": [

{

"type": "MIT",

"url": "http://www.opensource.org/licenses/mit-license.php"

}

],

"bugs": "...", // bugs url

"homepage": "...", // homepage url

"docs": "...", // docs url

"download": "...", // download url

"dependencies": {

"jquery": ">=1.4"

}

}

上面是一個插件信息文件的實例。

然後，將代碼文件發布到Github，在設置頁面點擊“Service Hooks/WebHook URLs”選項，填入網址http://plugins.jquery.com/postreceive-hook，再點擊“Update Settings”進行保存。

最後，為代碼加上版本，push到github，你的插件就會加入jQuery官方插件庫。

git tag 0.1.0

git push origin --tags

以後，你要發布新版本，就做一個新的tag。

以上就是我們為大家准備的jQuery插件開發實例詳解的相關內容，希望對大家可以有所幫助。