jQuery外掛程式開發

標籤：des   style   blog   http   color   os   使用   io   java   

　　轉自：來自《JavaScript 標準參考教程（alpha）》，by 阮一峰

　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.0git push origin --tags

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

 

jQuery外掛程式開發