ENTEREAL

jQueryプラグインの作り方

まえおき

プロジェクト内で作成するjQueryやJavaScriptは、基本的にクライアントの環境に最適化して納品するため、別の環境では必ず動く保証はないし、動いてもパフォーマンス的や面、その他の面で何かしらの不具合が発生する可能性があります。

そこで、今回は個別の環境だけではなく、広く配布し、様々な環境での実装に耐える形(プラグイン)にする方法をご紹介していきます。

テンプレート

作り方は、至って簡単です。下のテンプレートの中に自由に処理を書いて「ファイル名.js」として保存するだけです。

(function($) {
$.fn.プラグイン名 = function() {
// ここに処理を記載
alert('Hello World!');
};
})(jQuery);

実行するときは、普段使っているjQuery関数の様に使えます。

$('#element').testPlugin('slow');					   // 対象オブジェクト.プラグイン名('オプションパラメータ');

オプション(パラメータ、デフォルト)

プラグインとして配布した後は、様々な人が使う事が想定されます。その中には、技術的が高い人/そうでない人、性格がマメな人/そうでない人など。なので、簡単に使える事、だれが使っても最低限動く事が重要になります。

そのため、標準的な使い方をする際に必要なパラメータ群をデフォルトとして定義しておくと便利です。

(function($) {
$.fn.testPlugin = function(options) {
var settings = $.extend({					   // デフォルトのパラメータ
'message'   : 'Hello',
'messageTo' : 'World'
}, options);

// ここからが実処理
alert(settings.message + ' ' + settings.messageTo + '!');
};
})(jQuery);

実行するときは、

$('#element').testPlugin();							 // "Hello World!"
$('#element').testPlugin({'messageTo' : 'Guys'});	   // "Hello Guys!"

メソッド

一つの処理を行うに当たり、事前処理、実処理、事後処理など複数に場合分けして処理を行いたい時は、メソッドという形で記載します。そうすればネームスペース(他のプラグインと共有する名前のエリア)を節約できますし、プラグインのプログラム自体も見通しの良いものになります。

(function($) {
$.fn.testPlugin = function(options) {
var settings = $.extend({					   // デフォルトのパラメータ
'message'   : 'Hello',
'messageTo' : 'World'
}, options);

var methods = {									 // 処理ごとに分けられたメソッド
init : function() {
	// 事前処理
	// ・オブジェクトの位置や形などを決め
	// ・アクションのバインドなど
},
show : function() {
	// 表示処理 (ボタンが押されたタイミングなどの処理)
},
hide : function() {
	// 非表示処理 (ボタンが押されたタイミングなどの処理)
},
end : function() {
	// 事後処理 (何か次の処理を呼び出すなど)
}
};

// ここからが実処理
alert(settings.message + ' ' + settings.messageTo + '!');
};
})(jQuery);

戻り値

jQuery特有のメソッドチェーン(関数の連結)を実現するため、特別な場合を除いては、受け取ったオブジェクトをそのまま戻り値として返します。

(function($) {
$.fn.testPlugin = function(options) {
var settings = $.extend({					   // デフォルトのパラメータ
'message'   : 'Hello',
'messageTo' : 'World'
}, options);

// ここからが実処理
return this.each(function() {					   // 処理後にthisをそのまま返却する
$(this).append('

' + settings.message + ' ' + settings.messageTo + '!

'); }); }; })(jQuery);

Tags

Same Category

jQuery Table Sorterのリリース