メインコンテンツへ移動
黯羽軽揚毎日少しずつ

JS コードスタイルガイド

無料2015-04-26#JS#代码风格

コードスタイルは、早く知れば知るほど良い

一。基本フォーマット

  1. インデント

各レベル 4 つのスペー��を推奨。エディターに tab = 4 スペースを設定し、自動変換可能

  1. セミコロン

セミコロンを省略しないでください。ASI（自動セミコロン挿入）エラーを防止

  1. 行幅

1 行のコードは 80 文字を超えない。長すぎる場合は演算子で手動改行

  1. 改行

演算子は前一行の末尾に。次行は 2 レベルインデント。代入文の場合は等号の後続部分と揃える

  1. 空行

関数宣言と関数宣言、変数宣言と関数宣言、関数内部のロジックブロックの間は空行で区切る

著者ニコラスはフロー制御ブロックの顶部にも空行を設けることを推奨しているが、例は明確ではない

  1. 命名

    • 変数名/関数名：Camel（キャメル）規則。最初の語の最初の文字を小文字、以降の語の最初の文字を大文字、残りは小文字

    • 定数名：C 言語式。全て大文字、アンダースコアで語を区切る

    • コンストラクタ：Pascal 規則。すべての語の最初の文字を大文字、残りは小文字

  2. リテラル

    • 文字列：二重引用符で囲む。改行は [+] 演算子を使用。\エスケープ文字は使用しない

    • 数値：小数点の前後を省略しない。8 進数形式は使用しない

    • Null：null を Object のプレースホルダーとしてのみ使用。引数の検出には使用しない。未初期化変数の検出にも使用しない

    • Undefined：すべてのオブジェクトを null に初期化し、未定義と未初期化を区別

    • オブジェクトリテラル/配列リテラル：コンストラクタ方式でオブジェクトと配列を宣言しない

二。コメント

P.S. 書籍に非常に经典的な説明があります：

Appropriately written comments help tell the story of code, allowing other developers to drop into a part of the story without needing to hear the beginning.

  1. 単行コメント

    • 行末：1 レベルのインデントでコードを区切り、// の後にスペースを 1 つ

    • 独立行：以下をコメント。コメント対象のコードと同じインデント

    • 行頭：複数行のコードをコメント

  2. 複数行コメント

大規模コメントを囲む。Eclipse スタイルを推奨。例：

    code
    
    /* 
     * comment line1
     * comment line2
     */

注意：

-  複数行コメントの上に空行を 1 つ

-  \*アスタリスクの後にスペースを 1 つ

-  複数行コメントは最低 3 行（1 行目と最終行の後ろにはコメントを追加しない）

3. どこにコメントを追加するか

-  自己説明できないコード

-  意図的だがエラーに見える箇所

-  ブラウザ向け hack

4. ドキュメントコメント

各関数にコメントを追加。機能説明、パラメータ、戻り値、スローされるエラーなど。推奨 Eclipse スタイル：

    /**
     * 指定要素をデフォルト配列に追加
     * 
     * @method add
     * @param {Number} 追加する要素
     * @return {Boolean} 追加成功/失敗
     * @throw {TypeError} パラメータタイプが一致しない
     */
    function add(item){
        if(typeof item === "number"){
            arr.push(item)
        }
        else{
            throw new TypeError();
        }
    }

三。文と式

  1. 中括弧の揃え方

行末スタイルを推奨。次行スタイルは非推奨

  1. ブロック文スペース

if 後の丸括弧部分の前後にそれぞれスペースを 1 つ。例：

    if (expr) {
        code
    }

3. switch 文

-  インデント：case は switch と揃え、break は 1 レベルインデント

-  case 貫通：空行またはコメント//falls through で case 貫通が意図的であることを示す

-  default：default を保留、またはコメント//no default で default がないことを示す

P.S.『JavaScript 言語精粋』の著者ダグラスは case 貫通を使用すべきでない（鶏肋と称す）。バグを引き起こしやすい。ニコラスは空行またはコメントで説明すればよいと考える

  1. with 文

使用しない

  1. for ループ

すべての変数は関数体顶部で宣言。for ループ初期化部分で使用される変数も含む。hosting（巻き上げ）によるバグを回避（グローバル変数を遮蔽する可能性）

  1. for-in ループ

配列の走査には使用しない。使用する際は hasOwnProperty でフィルタ。意図的にプロトタイプ属性を走査する場合はコメントで説明

四。変数、関数、演算子

  1. 変数宣言

関数体 = 変数宣言 + 関数宣言 + ロジック文。各部分を空行で区切る

  1. 関数宣言

宣言してから使用。関数宣言を if ブランチに配置しない。ブラウザの理解が異なり、ES に標準がない

  1. 関数呼び出し

丸括弧の前後はスペースを追加しない。ブロック文と混同を回避

  1. 匿名関数即時実行

即時実行する匿名関数を丸括弧で囲む。匿名関数宣言と混同を回避

  1. 厳格モード

グローバル作用域で厳格モードを有効にしない。関数内部のみで有効。複数関数には匿名関数即時実行で厳格モードの作用域を限定

  1. 等価判断

=== と!== のみ使用

  1. eval

eval() と new Function() は使用しない。匿名関数で setTimeout() と setInterval() を最適化

  1. 基本包装タイプ

new Boolean(), new String(), new Number() は使用しない

五。スタイルの良い範例コード

var obj = { // オブジェクトリテラルのインデント揃えに注意
    
    attr1: 1,  // コロンの前後のスペースと本行前の空行に注意
    attr2: (function() {
    
        // IIFE 特別な丸括弧位置に注意。(function(){})() ではない
    }()),
    _privateAttr: 2,   // プライベート属性名はアンダースコアで開始
    
    doSomething: function(arg) {   // メソッド名は動詞で開始、アンダースコア不使用
        
        // if-else if-else のスペース使用と改行方式に注意
        if (arg === 1) {
        
        } else if (arg === 2) {
        
        } else {
        
        }
    }
}

function Fun() {    // コンストラクタ名は非動詞で開始、Pascal 規則（本行の 2 スペースに注意）

    // 複数変数は一緒に宣言、等号揃えに注意（コメントの前に空行）
    var count   = 10,       // 変数名は名詞で開始、fun と混同回避、アンダースコア不使用
        isTrue  = (2 > 1),  // 右辺に比較演算がある場合、右辺全体に括弧
        color   = 0xcccccc; // 10 進数と 16 進数使用可能、8 進数は使用しない（例：011）
        
    /**
     * メソッドコメントはこのドキュメントコメント形式を使用、@param など
     * 複数行コメントは各行の前に* を保証、整列に注意
     * すべてのコメント（行末単行コメントを除く）の前に空行
     */
    function fun(arg1, arg2) {  // 本行の 3 スペースに注意（関数宣言と変数宣言は空行で隔てる）
        
        var arr = [1, 2, 3],    // デフォルト値のある属性を先に宣言
            i,                  // ループ（for-in を含む）初期化部分で使用される変数も事前宣言
            len;                // デフォルト値のない属性を後に宣言
            
        for (i = 0, len = arr.length; i < len; i++) {
            
            // for 構造内のスペース使用に注意
        }
        
        for (i in arr) {
            
            // TODO: 注釈、未完了タスクを示す
            // HACK: 注釈、特定ブラウザ向け hack を示す
            // XXX: 注釈、非常に重要なエラーを示す
            // FIXME: 注釈、あまり重要でないエラーを示す
            // REVIEW: 注釈、より良い実装方法がある可能性を示す
        }
        
        while (i < len) {
            
            switch (i) {
            
                case 1:
                    /* falls through */
                    
                case 2:
                    break;
                    
                default:
                    break;
                    
                // または
                // no default
            
            }
        }
        
        do {
            
            // すべての文ブロック前に空行、コードブロックのコメントには//を使用、/**/はコメントブロック用
//            try {
//                //
//            } catch (err) {
//                //
//            } finally {
//               //
//            }
        } while (i < len);  // while 前後のスペースに注意
        
        return (len > 1 ? true : false);    // 戻り値が複雑な式の場合、全体に括弧
    }
}

###参考資料

  • 『Maintainable JavaScript』

  • 『JavaScript 言語精粋』

コメント

コメントはまだありません

コメントを書く