jQuery 插件開發(fā)

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

插件的編寫

原理

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

jQuery.fn.myPlugin = function() {
  // Do your awesome plugin stuff here
};

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

;(function ($){
  $.fn.myPlugin = function (){
    // Do your awesome plugin stuff here
  };
})(jQuery);

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

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

;(function ($, window) {
  $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
  };
}(jQuery, window));

需要注意的是，在插件內(nèi)部，this關(guān)鍵字指的是jQuery對象的實例。而在一般的jQuery回調(diào)函數(shù)之中，this關(guān)鍵字指的是DOM對象。

(function ($){
  $.fn.maxHeight = function (){
    var max = 0;
    // 下面這個this，指的是jQuery對象實例
    this.each(function() {
        // 回調(diào)函數(shù)內(nèi)部，this指的是DOM對象
        max = Math.max(max, $(this).height());
    });
    return max;
  };
})(jQuery);

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

大多數(shù)情況下，插件應(yīng)該返回jQuery對象，這樣可以保持鏈式操作。

(function ($){
  $.fn.greenify = function (){
    this.css("color", "green");
    return this;
  };
})(jQuery);

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

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

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

$.fn.myNewPlugin = function() {
    return this.each(function() {
        // 處理每個對象
    });
};

插件可以接受一個屬性對象參數(shù)。

(function ($){
  $.fn.tooltip = function (options){
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);
    return this.each(function (){
      // 填入插件代碼
    });
  };
})(jQuery);

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

偵測環(huán)境

jQuery逐漸從瀏覽器環(huán)境，變?yōu)橐部梢杂糜诜?wù)器環(huán)境。所以，定義插件的時候，最好首先偵測一下運行環(huán)境。

if (typeof module === "object" && typeof module.exports === "object") {
  // CommonJS版本
} else {
  // 瀏覽器版本
}

實例

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

(function($){
    $.fn.showLinkLocation = function() {
        return this.filter('a').append(function(){
            return ' (' + this.href + ')';
        });
    };
}(jQuery));

// 用法
$('a').showLinkLocation();

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

插件的發(fā)布

編寫插件以后，可以將它發(fā)布到jQuery官方網(wǎng)站上。

首先，編寫一個插件的信息文件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"
  }
}

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

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

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

git tag 0.1.0
git push origin --tags

以后，你要發(fā)布新版本，就做一個新的tag。

參考鏈接

• jquery-boilerplate, How did we get here?
• jquery-boilerplate, How to publish a plugin in jQuery Plugin Registry