jQuery

jQueryのプラグインを作るための基本的な方法がsitepointで載っていましたので、自己流に訳しながら記載。

1.実際にjQueryのpluginを使う時

仮にjQueryのプラグインを作ったら、以下のようにして動くようにするのが望ましいですね。

$("p#comment").myplugin();

2.プラグインの設定方法

jQueryのプラグインの書き方は簡単。以下のように書けば宣言できます。

jQuery.fn.reverseText = function(params) { ... };

他のライブラリとの衝突を防ぐために、こうやって書いても問題は無いです。

(function($) {
$.fn.reverseText = function(params) { ... };
})(jQuery);

3.pluginの引数パラメータ設定方法

普通にPHP等と同じ、引数に変数の形で書けば問題は無いです。

(function($) {
$.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// example
$("p").reverseText(0, 100);

もし引数が一杯あったり、複雑な関数を作る場合は、JSONを使うと良いですよ。（PHPの配列みたいなもの）

(function($) {
$.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// example
$("p").reverseText(0, 100);

JSON形式で引数のパラメーターが無い場合のデフォルト値を設定するならこんな感じ。

// merge default and user parameters
params = $.extend( {minlength: 0, maxlength: 99999}, params);

4.本体部分のプログラムを書く

実際に本体部分にあたるプログラムをここに書きます。

// traverse all nodes
this.each(function() {

	// express a single node as a jQuery object
	var $t = $(this);

	// find text
	var origText = $t.text(), newText = '';

	// text length within defined limits?
	if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {

		// reverse text
		for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
		$t.text(newText);
	}
});

ポイントは、最初のeach。必ずしも1つのオブジェクトだけとは限らないので、ここはとりあえずeachにする事。

5.戻り値を忘れるな

jQueryの特徴であるメソッドチェーン記法をする為には、処理したオブジェクト全体をreturnしないとだめです。だから、最後にコレをお忘れなく。

reutrn this;

これで出来上がり！出来上がったプラグインはこれ。

(function($) {

	// jQuery plugin definition
	$.fn.reverseText = function(params) {

		// merge default and user parameters
		params = $.extend( {minlength: 0, maxlength: 99999}, params);

		// traverse all nodes
		this.each(function() {

			// express a single node as a jQuery object
			var $t = $(this);

			// find text
			var origText = $t.text(), newText = '';

			// text length within defined limits?
			if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {

				// reverse text
				for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
				$t.text(newText);

			}

		});

		// allow jQuery chaining
		return this;
	};

})(jQuery);

(元記事) sitepoint – How To Develop a jQuery Plugin

http://www.sitepoint.com/blogs/2009/07/22/how-to-develop-a-jquery-plugin/