ちょっとしたJavaScriptのテクニックのご紹介。 JavaScriptを多用するようなWebアプリケーションを書いていると、よく利用する汎用的な関数なんかが出てくると思います。ただ単にJSファイルに functionを定義してしまうと、グローバルfunctionになってしまいます。小さなサイトならこれで問題ないケースが多いと思うのですが、中規模ぐらいになると名前がバッティングしたりして、問題が発生したりします。 そんなこんなで、JavaScriptで汎用的なコンポーネントを作り、名前のバッティング、グローバルfunctionになるのを避けつつ、便利に使いましょう的なテクニックです。 テストしてみよう! ここで実際にテストできます。 new Date() new Date()をyyyy/MM/dd化 テスト用HTML [html] <button id=”btnNormal” class=”btn btn-primary”>new Date()</button> <br> <button id=”btnUseComponent” class=”btn btn-primary”>new Date()をyyyy/MM/dd化</button> [/html] こちらがテスト用スクリプト [javascript mark=”9″] jQuery(function($){ $(“#btnNormal”).click(function(){ alert(new Date()); }); $(“#btnUseComponent”).click(function(){ //new はしない、即時実行 var dtStr = Common.getFormatDate(new Date()); alert(dtStr); }); }); [/javascript] ポイント説明! 上記のソースコードのハイライトされた部分、つまり Common.getFormatDate(new Date()); この部分が汎用コンポーネント呼び出しです。 Commonとは、以下のソースコードに定義されており、 function convertNum(num, keta) function getDate(dateStr) function getFormatDate(rcvDate, rcvFormat) の3つのメソッドを持っている。 このメソッドを、下のソースの最後の方で globalsという変数にセットし、 var Common = function(){} の戻り値としている。 そして、最後の行の }(); この ()がもうひとつの肝で、Commonを即時実行関数にしなさいという命令。このようにした場合、利用する側で、いきなり Common.メソッド名として利用できるようになります。 今回はCommonに定義されている getFormatDateメソッドを利用しましたが。残りの2つのメソッドも同様の呼び出し方で利用できます。オブジェクト指向言語に慣れている人なら、new Common().xxxx じゃないのか???などと疑問を抱くかもしれませんが、ここは new しないところがポイントです。 var Common = functon(){ return globals; } で、戻り値のglobalsがJavaScriptの連想配列であり、ここに定義されているメソッド(function)がつめ込まれている形になります。ちょっと難しかったですかね?この方法を利用すると Common という変数自体はグローバルになってしまいますが、それ以外は隠蔽した形で利用できますので、何かと便利です。 こちらがJavaScript 汎用コンポーネント [js mark=”1,3,11,25,51,65,66″] var Common = function(){ function convertNum(num, keta) { var str = String(num); while (str.length < keta) { str = "0" + str; } return str; } function getDate(dateStr){ if (dateStr.length != 10){ return null; } var y = dateStr.substr(0,4); var m = dateStr.substr(5,2); var d = dateStr.substr(8,2); var dt = new Date(y,m -1 ,d); return dt; } function getFormatDate(rcvDate, rcvFormat){ var year = rcvDate.getFullYear(); var month = rcvDate.getMonth() + 1; var day = rcvDate.getDate(); if ( month < 10 ) { month = '0' + month; } if ( day < 10 ) { day = '0' + day; } var str = ''; if (typeof rcvFormat === 'undefined'){ str = year + '/' + month + '/' + day; } else if (rcvFormat == 'mm/dd'){ str = month + '/' + day; } return str; } var globals = { convertNum: function(num, keta){ return convertNum(num, keta); }, getDate : function(dateStr){ return getDate(dateStr); }, getFormatDate : function(rcvDate, rcvFormat){ return getFormatDate(rcvDate, rcvFormat); } } return globals; }(); //即時実行とする [/js]
Read more
Recent Comments