JavaScriptコーディング規約 | TechSchool

JavaScriptコーディング規約

カテゴリプログラミング技術

ファイル構成

すべてのJavaScriptファイルは、プロジェクト共通の'''script'''フォルダの下に置きます。
使用するサードパーティのライブラリファイルは、'''script/lib'''フォルダの下に配置します。
再利用可能なカスタムモジュールは'''script/commons'''フォルダの下に配置します。再利用モジュールが複数のサブファイルに関連する場合は、専用のモジュールフォルダを別途作成する必要があります。
個別ページモジュールで使用するJavaScriptファイルは、'''script/{module_name}'''フォルダの下に配置します。
プロジェクトのモックJSONデータは'''script/json'''フォルダの下に配置し、ページごとにサブフォルダを別々に作成します。
JavaScriptでMVCフレームワークを適用する場合、使用するテンプレートファイルは'''script/templates'''フォルダの下に配置し、ページごとにサブフォルダを別々に作成します。

フォーマット

一般的な原則は[PhpGuideline PHPコーディング規約]を参照してください。
変数の定義には常にvarを使用します。

var global = '';

function method() {
    var local = '';
}

1行の宣言文は常にセミコロンで終了します。
配列とオブジェクトでは余分な","を使用しないでください（IE互換のため）。

//wrong
var arr = [1,2,];
var person = {
    name: 'name',
    age: 20,
};
//wrong
var arr = [1,2];
var person = {
    name: 'name',
    age: 20
};

inBikeのようなトップレベルの名前空間を定義し、その下にモジュールに応じてプライベートな名前空間を定義します。
すべてのモジュールコードは匿名の自己呼び出し関数の中に置き、windowオブジェクトの下のカスタム名前空間に代入することで公開します。

if (!window.inBike) {
    window.inBike = {};
}
window.inBike.rideway = rideway;

イベントバインドのコードは、DOM ready関数内で実行する必要があります。

$(function() {
     //bind function is in the init function
     window.inBike.rideway.init();
})

カスタムモジュールのメソッドはオブジェクト内に置き、メソッド名は":"の直前に置きます。":"とfunctionの間に1スペース、function()と後ろの"{"の間に1スペース空けます。

var module = function() {
    method: function() {

    }
};

文字列はシングルクォートで囲みます。

var str = 'some text';

使用する変数は使用前に定義し、定義後すぐに初期化する必要があります。

var obj = null;
var num = 0;
var arr = [];
var isEmpty = true;

ブラウザのconsoleツールを使用する前に、まずサポートされているかどうかを判断する必要があります。

if (console) {
    console.log('this is my log');
}

命名

一般的な原則は[PhpGuideline PHPコーディング規約]を参照してください。
変数名とメソッド名はキャメルケースを使用し、先頭は小文字にします。クラス名は先頭を大文字にします。

var numberList = [1,2];
var util = {
    removeNode: function(){
        ....
    }
};

function Person(name, age) {
    this.name = name;
    this.age = age;
}

jQueryオブジェクトは$nameで命名し、ネイティブDOM要素はdomで始めます。オブジェクト内のプライベート変数はアンダースコアで始めます。

var $image = $('#cover');
var domImage = document.getElementById('cover');
var obj = {
    _privateVar: null,
    method: function() {

    }
};

コメント

一般的な原則は[PhpGuideline PHPコーディング規約]を参照してください。
ロジックブロックの意味を示すために、単行コメントを多用します。

// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
    return rootjQuery.find( selector );
}

// Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;

クラスのコンストラクタメソッドを明記します。

/**
 * @constructor
 */
some.long.namespace.MyClass = function() {
};

列挙型定数の型と意味を注記します。

/** @enum {string} */
some.long.namespace.Fruit = {
  APPLE: 'a',
  BANANA: 'b'
};

メソッドや変数の可視性をコメントで示し、静的チェックを容易にします。

/** @protected */
AA_PublicClass.staticProtectedProp = 31;

/** @private */
AA_PublicClass.prototype.privateMethod_ = function() {};

ベストプラクティス

evalの使用は避けます。
オブジェクトにはwithを、配列にはfor-inを使用しないようにします。
クロージャの使用は慎重にし、循環参照を避けます。
thisが置かれているコンテキストに注意します。

var $button = $('#my-button');
$button.click(function(){
    var self = this;
    var util = {
       getVal: function() {
           return self.val();
       }
    }
});

三項演算子、論理スイッチ、インクリメント演算子など、短いコードをできるだけ使用します。

var name = ('undefined' == typeof(name)) ? '' : name;
(age < 0) && (age = 0);
count++;

ブロックスコープ内でfunctionを使用しないでください。

// 错误
if (x) {
  function foo() {}
}

// 正确
if (x) {
  var foo = function() {}
}

親ノードにイベントリスナーをバインドし、イベントソースに応じて個別に応答します。
複雑なページモジュールには、SeaJS、RequireJSなどの依存管理ライブラリや、Backbone、Knockout、StapesなどのMVCフレームワークを使用してコードを整理します。

← PHPコード規約

Google HTMLコーディングスタイルガイド →

購読