JavaScriptで汎用コンポーネントを作る

ちょっとした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メソッドを利用しましたが。残りの２つのメソッドも同様の呼び出し方で利用できます。オブジェクト指向言語に慣れている人なら、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]