【jQuery】プラグインの作り方

サンプル

sampleというプラグインを定義して実行してみる。

プラグインの定義

//POINT1 即時実行の無名関数で囲うこと
(function($) {
  $.fn.sample = function(option){

    //POINST2 パラメータとデフォルト値のマージ
    var defaults = {text:'hello'};
    var option = $.extend(defaults,option);

    //ここに処理を書く！

    //POINT3 メソッドチェーンに対応するためthisを返す
    return(this);
  };
})(jQuery);

jQueryを読み込んで、プラグインの定義したファイルを読みこむ。
jQueryオブジェクトのメソッドにプラグインが追加されているので実行できる。

プラグインの実行

$('p').sample();

POINT解説

POINT1 即時実行の無名関数で囲うこと

グローバル汚染しないため。

POINST2 パラメータとデフォルト値のマージ

オプションはオブジェクト$.extend()を使うとマージが簡単！

var option = $.extend(defaults,option);

POINT3 メソッドチェーンに対応するためthisを返す

これはマナー的な感じ。

参考：はじめてのjQueryのプラグインの作り方