jQuery 插件開(kāi)發(fā)

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

插件的編寫

原理

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

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

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

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

上面代碼的最前面有一個(gè)分號(hào)，這是為了防止多個(gè)腳本文件合并時(shí)，其他腳本的結(jié)尾語(yǔ)句沒(méi)有添加分號(hào)，造成運(yùn)行時(shí)錯(cuò)誤。

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

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

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

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

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

大多數(shù)情況下，插件應(yīng)該返回jQuery對(duì)象，這樣可以保持鏈?zhǔn)讲僮鳌?/p>

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

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

上面代碼返回this對(duì)象，即jQuery對(duì)象實(shí)例，所以接下來(lái)可以采用鏈?zhǔn)讲僮鳌?/p>

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

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

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

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

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

偵測(cè)環(huán)境

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

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

實(shí)例

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

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

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

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

插件的發(fā)布

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

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

上面是一個(gè)插件信息文件的實(shí)例。

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

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

git tag 0.1.0
git push origin --tags

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

參考鏈接

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