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

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

JavaScriptで汎用コンポーネントを作る へのコメントはまだありません



ちょっとしたJavaScriptのテクニックのご紹介。
JavaScriptを多用するようなWebアプリケーションを書いていると、よく利用する汎用的な関数なんかが出てくると思います。ただ単にJSファイルに functionを定義してしまうと、グローバルfunctionになってしまいます。小さなサイトならこれで問題ないケースが多いと思うのですが、中規模ぐらいになると名前がバッティングしたりして、問題が発生したりします。

そんなこんなで、JavaScriptで汎用的なコンポーネントを作り、名前のバッティング、グローバルfunctionになるのを避けつつ、便利に使いましょう的なテクニックです。

テストしてみよう!

ここで実際にテストできます。

テスト用HTML

こちらがテスト用スクリプト

ポイント説明!

上記のソースコードのハイライトされた部分、つまり

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 汎用コンポーネント


About the author:

Tags:

Related Posts

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Back to Top