jQueryプラグインを作ってみる

まずはプラグインのファイル名

接頭辞は jQuery として、その後にわかりやすい プラグイン名 を、拡張子として .js にするのが通例のよう。

プラグインを書く前にjQueryがどのように動くかを理解する

以下のコードを例にとってみる。

$("a").css( "color", "red");

上記の例では、$関数を使うことでjQueryオブジェクトが返却される。このオブジェクトの中には、通常僕らが使うメソッド（例えば、　 .css() や .click() などなど）が含まれている。

これらのメソッドは、jQueryオブジェクトに含まれる$.fnオブジェクトから取得することできる。

ということは、自身のメソッドを書きたい場合には、$.fnオブジェクトに含めて書いていけば良いということになる。

標準的なプラグインの書き方

例えば、cssで指定されているcolorがgreenである要素を取り出して、テキストを作成したいと考えた時は、$.fnオブジェクトに、greenifyというようなメソッドを追加し、呼び出すことで実現することができる。

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

$( "a" ).greenify(); // aタグは緑で表示される。

Chaining（チェイニング）

jQueryの特徴として、チェーン化されていることが挙げられる。例えば、プラグインとして幾つかのメソッドを追加した時、それらのメソッドがjQueryオブジェクトを返却することによって達成されていることを把握しておく必要がある。（ただし、.width()などのように要素の幅だけを返却するだけで、チェーン化されていない例外はあるようだ。）

Chaining（チェイニング）の例を以下に示す。

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

$( "a" ).greenify().addClas(); 

$エイリアスの保護とスコープの追加

$変数というのはJavaScriptライブラリの中ですごい人気があるようで。（prototype.jsなんかにも使われてます。）

もしjQueryと一緒に他のライブラリ（例えばprototype.js）を使っていたりすると、JQueryが$変数を使用しないようにjQuery.noConflictを使わなければいけなくなる。

だけど、そんなことをしてしまうとこれから書こうとするプラグインが利用できなくなることにつながってしまい不都合が生じる。

それを 回避するため 、 jQueryの$エイリアスを保護するため 以下のようにしてスコープを追加してあげる必要がある。

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

    $( "a" ).greenify().addClas(); 
}( jQuery ));

プライベートな変数を利用する場合には、以下のようにする。

(function ($) {
    var shade = "#556b2f";
    
    $.fn.greenify = function(){
        this.css( "color", shade);
        return this;
    };

    $( "a" ).greenify().addClas(); 
}( jQuery ));

最小のプラグインを作ってみる

注意したいのは、関数をやたらめったら作成するのではなく、パラメータをうまく利用して関数の種類を少なくすることが望ましい。

以下は推奨されないコード。

(function($){

	$.fn.openPopup = function(){
		// Open popup code.
	};
	$.fn.closePopup = function(){
		// Close popup code.
	};
	
}( jQuery ));

上記のコードは、open/closeの処理をパラメータで分けることができ、そうすることで関数をより少なくできる（同じスコープ内でも関数名が競合しにくくなる）。

以下のコードのようにする。

(function($){
	
	$.fn.popup = function(action){
		if( action === "open"){
			// Open popup code.
		}
		if( action === "close"){
			// Close popup code.
		}
	}
	
}(jQuery));

each()メソッドを使って見る

jQueryを使っていると、時々特定の要素（たとえばDiv要素全体など）に対して操作したい時がある。その場合は、return値の箇所でeach()メソッドを使う方法がある。

$.fn.myNewPlugin = function(){
	
	return this.each(function(){
		// Do something to each element here
	});
}

Optionを受け取ってみる

関数への引数の数が多くなってくると、その関数自体はすごく複雑になりがち。そういう時は、複数の値をまとめてオプションとして渡す方がより効果的である。

(function($){
	
	$.fn.greenify = function(options){
		
		// デフォルト値を定義しておく。
		var settings = $.extended({
			color 				: "#556b2f"
		,	backgroundcolor	: "white"
		}, options);
		
		return this.css({
			color				: settings.color
		,	backgroundcolor	: settings.backgroundcolor
		});
	};
	
}(jQuery));

実際の使い方は以下。

$("div").greenify({color : "orange"});

その他

• 参考にしたサイトはこちら。
• http://learn.jquery.com/plugins/basic-plugin-creation/