javascriptで名前空間を作って生産効率を上げる

名前空間の利用

名前空間を利用するとJavaScriptがもっと楽しくなる。

何でもかんでも、Globalなオブジェクトに登録していくと、どうしても限界が早くなる。

コードを書くよりもコードを読むのに時間がかかるという点です。問題に深く集中して売る時、腰を据えて午後の時間をかなりの量のコード作成に費やすことが出来ます。その為に「namespace」による管理は、管理コストを下げ共同作業をやりやすくするという点において最高ですね。

global だと変数名の衝突も置きて頭抱えることになる。

名前空間のはじめの一歩。

var takuya = {};

なければ作る名前空間

var takuya = {}; が２度呼び出されると、初期化されてしまうので、名前空間が破壊されてしまう。

そこで次のようにする。

シンプルで美しい

var takuya = takuya || {}

ベターなやり方

ちゃんとチェックしてもいいけどめんどくさいよね。

if ( typeof takuya == 'undefined' ) {
  var takuya = {};
}

複数個の namespace をどうするんだい

いくら シンプルで美しい 書き方でも、何度も書くと冗長すぎる・・・

var takuya = takuya || {}
var takuya.arrays  = takuya.arrays || {}
var takuya.utils   = takuya.utils || {}
var takuya.connect = takuya.connect || {}
var takuya.logins  = takuya.logins || {}

ちょっと関数を作っておきます。

function define_namespace( path ){
    var paths = path.split('.')
    var namespace = ''
    var _global = this;//window or global
    paths.reduce( function(prev,curr) {
      if ( !prev.hasOwnProperty(curr) ) {
        prev[curr] = {}
      }
      curr = prev[curr];
      return curr ;
    }, _global )
}

これで、マルっとオブジェクト作れますね

define_namespace('takuya.maps.drawing.lines.point')
console.log( takuya )
console.log( takuya.maps )
console.log( takuya.maps.drawing )
console.log( takuya.maps.drawing.lines )
console.log( takuya.maps.drawing.lines.point )

名前空間を使ったモジュール関数を作る。

名前空間を作ってモジュール化できることがわかったので、モジュール関数を作る

define_namespace('takuya.blog.sample')
takuya.blog.sample.log = function(e){
  console.log(e)
}
takuya.blog.sample.log('Hello from module func')

まぁ当たり前でですね。

名前空間を使ったモジュールにコンストラクタを作る

define_namespace('takuya.blog')
takuya.blog.Book = function(name){
  this.name = name 
  this.getName = function getName (){
    return this.name
  }
}
var book = new takuya.blog.Book('Hello from module constructor')
console.log(book.getName())

名前空間に定数を作る？

定数は存在しないので、大文字で書いて、定数であることを明示するくらいしか出来ない。

define_namespace('takuya.screen')
takuya.screen = {
  MAX_WIDTH: 1280;
  MAX_HEIGT:  720;
}
takuya.screen.MAX_HEIGHT;

参考資料

JavaScriptパターン ―優れたアプリケーションのための作法

https://www.amazon.co.jp/JavaScriptパターン-優れたアプリケーションのための作法-Stoyan-Stefanov/dp/4873114888/ref=sr_1_1?ie=UTF8&qid=1487917553&sr=8-1&keywords=javascript+パターン