javascriptのプラグイン(ほかのjsファイルに定義した関数の呼び出し)作成の基本と注意点
javascriptが複雑になると分割してプラグイン作成の必要がある
- クライアント側で簡単なjs処理では一つのjsファイルに定義すればよいです
- js処理が複雑になると、複数の関数、複数のjsファイルに分割して記述する必要になります
- javascriptがほかの言語のようなインポート機能は揃っていないです
- htmlで複数のjsファイルをロードする記述が必要です
- jsファイルのロード順序、処理タイミングなどを考慮しなければならないです
- 複数のファイルに分割してjavascript関数を定義するときに一定のルールに従ったほうが読みやすくなります
方法1:ネームスペース(window.namespace)よりプラグイン作成
- javascriptのウィンドオブジェクト(Window Object)に特定な処理をバインドします
- windowオブジェクトに以下のようにプラグインをバインドします
// プラグインの定義
(function($) {
var namespace; // 任意な名前
namespace = { // オブジェクトの定義
something : function() { // オブジェクトなインナー関数
// 処理の記述
},
bodyInfo : function() { // 別のインナー関数
// 処理の記述
}
};
window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング
})(jQuery);
// プラグインの呼び出し方
$(function() {
ns.something(); // プラグインの関数を呼び出し
ns.bodyInfo();
});
- この方法では、比較的に直観的、シンプル、理解しやすいです
方法2:jQueryのプラグイン作成ルールに従います
- jQueryが幅広く利用されています。jQueryのプラグイン作成ルールを理解する必要があります
- jQueryのプラグイン作成ルールに従えば、ソースの共有度が高くなります
- jQueryのプラグインの作成に基本的に三つの部分に分けれ記述します
- このプラグインの基本構造のコード説明は以下のとなります
(function($){
$.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す
var settings = jQuery.extend({ // プラグインの初期設定
param:'value', // 任意の変数定義
}, options); // 'options'の設定を優先で、初期設定を上書き
var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる
var output={ // プラグインの本体:実行の結果
'function1':function(param){ // プラグイン内部関数: 実行の過程を記述
$jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行
var _this=this; // この関数のオブジェクトの保存
});
return output; // 実行結果
},
'init':function(){ // 初期の実行
$jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行
var _this=this;
_this.$this=$(this); // 各オブジェクトへの参照
var privatefun=function(){} // 初期での準備記述
privatefun(); // 初期準備関数の実行
_this.$this.on('click',function(){ //例としての初期準備関数
//jQuery related stuffs
});
});
output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す
}
};
output.init(); // プラグインの実行開始
return output; // プラグインの実行結果を返す
};
})(jQuery); // jQueryオブジェクトを'$'に渡す
- プラグインを呼び出すには、jQueryに選択されたオブジェクトのメソッドとして呼び出されます
$("#element").myplugin() ;
- 一度この構造を覚えれば、jsコードの整理に役に立ちます