Javascript開発ガイド

  • ショップは、複数のAppを利用することができるため、グローバルリソース(オブジェクト、関数、変数)に対するJavascriptのネーミングガイドやネームスペースの定義と使用を推奨しています。(Script、Jquery 含む)

Javascriptネームスペースの使用目的

  • ショップは、複数のAppを選択/設置して利用することができます。この場合、各Appから提供されるスクリプトで使っているグローバルリソース(オブジェクト、関数、変数) に対するネーミングが各App、モジュール、さらにファイル名までその一貫性を維持することができません。
  • そのため、App商相互の衝突による避けられないエラーや動作不能状態が発生する場合があります。
  • そのようなトラブルを未然に防ぐためにネーミング/ネームスペースの使用に関するガイドを提供し、推奨しています。
  •  
  • 本ガイドから提供する内容に関する一覧は以下のようになります。
  •    1) 各Appの間のスクリプト衝突を予防と、開発のためのネーミングなどに関する一貫性維持
  •    2) 同一ネームのグローバルリソース(変数、関数)の使用に関する機能エラー防止

Javascriptネーミングガイド

  • スクリプトのネーミングガイドは、スクリプトネーミングによる相互の衝突防止を目的に推奨している事項です。
  • ファイルパスとファイル名のネーミングルール
ファイルパスとファイル名のネーミングルール
区分 ネームスペース形式 ネームスペースの例 ファイル名の例
Appに従属的なJS {{App名}}_ADMIN_{{詳細パス名}}_{{ファイル名}} SMARTVIEW_ADMIN_MENU_LNB {{ドメイン}}/admin/menu/lnb.js
{{App名}}_FRONT_{{詳細パス名}}_{{ファイル名}} SMARTVIEW_FRONT_AUTH_CS {{ドメイン}}/front/auth/cs.js
{{App名}}_UTIL_{{詳細パス名}}_{{ファイル名}} SMARTVIEW_UTIL_DATE_DIFF {{ドメイン}}/util/date/diff.js

Javascriptネームスペースガイド

  • スクリプトのネームスペース使用ガイドは、グローバルオブジェクトの作成による相互の衝突予防を目的に推奨している事項です。
  • 通常、衝突が起こり得るパターン
// 危険なパターン

var MYAPP = {};

// 改善されたパターン

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

// より短く書ける。

var MYAPP = MYAPP || {};

  • 基本的に推奨するJavaScript使用に関するパターン
    即時実行できる関数内部にグローバル変数を宣言し、グローバル変数を使うリソースを実行関数の中に入れておくと、該当関数がローカル変数化するにつれ、ネーミングの衝突を防ぐことができる。
// できる限りライブラリに依存せずJavaScriptを作成できる方法

(function(){
    // 実行されるJavaScript入力
})();

  • オブジェクトを利用してネームスペースを定義したパターン

var MYAPP = MYAPP || {};

MYAPP.makenamespace = function (ns_string) {
    var parts = ns_string. split('.'),
   parent = MYAPP, i;

   // 最初に重複されるグローバルオブジェクト名は削除する。
    if(parts[0] === MYAPP) {
      parts = parts. slice(1);
   }

    for (i = 0; i < parts.length; i +=1 ) {
      // プロパティが存在しない場合作成する。
       if( typeof parent[parts[i]] === 'undefined') {
      parent[parts[i]] = {};
   }
      parent = parent[parts[i]];
   }
    return parent;
   };

// ネームスペース作成関数を使用する。
MYAPP.makenamespace('MYAPP.modules.module2');

// 上のネームスペース関数は、以下のような結果をリターンする。

var MYAPP = {
   modules : {
      module2 : {}
   }
};