javascriptの書き方 色々

javascriptの書き方は色々あるけど、こんな風にかくと
きれいになるのかなぁっと思う書き方を纏めてみた。

javascriptを分業して実装していると、変数名の重複に
注意しなければならないが、名前空間を用いれば気にする
必要がなくなる。クロージャの応用っぽい感じ。

また関数定義やオブジェクト定義、クラス定義など
用途によって使いわける。
prototype.jsやJQueryを使用する場合は、また
ちょっと変わってくるかな。。


▼ config.jsで名前空間と定数定義

var NMSP = {};
NMSP.common = {}; // 共通処理用
NMSP.config = {}; // 定数定義用
NMSP.xxx1 = {}; // 以下用途に合わせて menuやvalidateなど。
NMSP.xxx2 = {};
NMSP.xxx3 = {}; 

// 定数定義
NMSP.config.AAA      = "aaa";
NMSP.config.BBB      = "bbb";
NMSP.config.CCC      = "ccc";

▼ common.jsで関数定義 共通処理とか

(function() {
    
    var xxxArray = [];
    
    function hogefunc1(arg) {
        //処理
    }
        
    function hogefunc2(arg1, arg2) {
        //処理
    }    
    
    function hogefunc3(arg1, arg2) {
        //処理
    }
    
    // 名前空間へのエクスポート
    NMSP.common.hogefunc1 = hogefunc1;
    NMSP.common.hogefunc2 = hogefunc2;
    NMSP.common.hogefunc3 = hogefunc3;
    
})();

▼ hoge1.jsで関数定義

(function() {

    var initObj = {};
    var initWidth = 100;
    var initHeight = 100;
    
    function hogefunc1() {
        //処理
    }

    // 名前空間へのエクスポート
    NMSP.xxx1.hogefunc1 = hogefunc1;

})();

▼ hoge2.jsでクラス定義

// オブジェクト指向に向いている部品の場合はクラスを使用
(function() {

    /**
     *  コンストラクタ
     */
    function Hoge(arg1, arg2, arg3) {
        this.arg1 = arg1;
        this.arg2 = arg2;
        this.arg3 = arg3;
        this._initXxx();
    }

    /**
     *  初期処理
     */
    Hoge.prototype._initXxx = function() {
        // 処理
    }

    /**
     * 実行
     */
    Hoge.prototype._execXxx = function() {
       // 処理
    }
    
    // 名前空間へのエクスポート
    NMSP.xxx2.Hoge = Hoge;

})();

▼ hoge3.jsでオブジェクト定義

NMSP.xxx3 = {
  
  hogefunc1 : function(arg) {
      
  },
  
  hogefunc2 : function(arg) {
      
  },
  
  hogefunc3 : function(arg1, arg2) {
      
  },
  
};

▼ hoge4.jsでオブジェクト定義 別の名前空間を使用

if (typeof(NMSP2) == 'undefined') {
  NMSP2 = {};
}
if (typeof(NMSP2.xxx) == 'undefined') {
  NMSP2.xxx = {};
}

MSP2.xxx = {
  
  hogefunc1 : function(arg) {
      
  },
  
  
  hogefunc2 : function(arg) {
      
  },
  
  hogefunc3 : function(arg1, arg2) {
      
  },
  
};

▼ hoge5.jsでオブジェクト定義 別の名前空間を使用

// 上記とちょっと違う書き方だが好みの問題
if (typeof(NMSP3) == 'undefined') {
  NMSP3 = {};
}
if (typeof(NMSP3.xxx) == 'undefined') {
  NMSP3.xxx = {};
}

NMSP3.xxx.hogefunc1 = function (arg1, arg2) {

};

NMSP3.xxx.hogefunc2 = function (arg1, arg2) {

};