JavaScript 名前空間的な何かを導入してコードを整理する

bootstrap3/jQuery の組み合わせは何をするにも必須な予感。だが、クラスを定義できない(カプセル化できない)JavaScriptである程度のコードを書こうとすると、簡単にコードがグチャグチャになってくる。

グローバルスコープを汚しまくって、切った貼ったを繰り返していくと、いずれ識別子がバッティングして思わぬ不具合に遭遇する。

prototypeを使って擬似的にクラスを表現する方法はただ面倒になるだけだし、ローカルルールが増えて管理コストがかかるようになる。

今更感があるが、JavaScriptで名前空間的な何かを導入したことで、かなりスッキリできることがわかったので書いておく。

書き方

例えば、顧客管理システムを書くとする。「顧客」、「製品」 に関する検索処理を行う関数を定義するとき、短い「search」という名前の関数をそれぞれ異なる名前空間に定義できる。切った貼ったを繰り返していくと、いつの間にか同名の関数を作ってしまうことがあるが、これで避けられる。

/* namespace.js */
var App = {};
var App.Customers = {};
var App.Products = {};
/* customer.js */
App.Customers.search = function search() {
...
}
/* product.js */
App.Products.search = function search() {
...
}

すっごい小ネタだが、名前空間に分けるだけで随分見通しがよくなり、費用対効果は高いと思う。
名前空間に分けるだけで、ちゃんとコードを考えて書くようになる副作用もあって良い。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする