プロジェクト内で作成する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);