フロントエンドのコードスタイル

ファイル名

複数の構造体場合小文字で、複雑な命名法の使用を分離下線が引かれています

ディレクトリ名：scripts、styles、images、data-models
ファイル名： example.js retina-sprites.css

ジャバスクリプト

注記

ときに使用します

スニペットを理解することは困難
エラーコードスニペットがあるかもしれません
特殊ブラウザHACKコード
私は、ロジック製品のTucao、協力の同僚を希望します
強力なビジネス・ロジック・コードに関連します

// 单行注释斜杠后面要留有一个空格

/*
 * 多行注释最少三行，注释内容与星标前保留一个空格
 */
 
 var hello = '';        // 描述变量可以这样写在变量右边
 
/*
 * 描述方法（函数）必须使用多行描述
 * 如有必要可以加上参数和返回值说明，参考 http://usejsdoc.org/
 * @param {Object} balabalabala
 * @return {Object} balabalabala
 */
 function foo() {
     // 描述下面代码时做什么的，方法第一行不需要留空格
     doSomething();
     
     // 描述下面代码时做什么的，上方需要留一个空行
     afterDoSomething();
     
     if (flag) {
         // 描述下面代码时做什么的，代码块的第一行也不需要留空格
         drive();
     }
 }

文法

4つのスペースソフトタブを使用する - これは、さまざまな環境で表示され、一貫したコードを確保するための唯一の方法です。
通常の状況下ではどこのキーワードスペースがあるはずです
文字列の使用単一引用符の代わりに二重引用符： `するvar strの= 'Hello Worldの';`
エディタはソフトラップになっている場合、単一の行の長さは、理論的には、以上80は、しかし、我々は、単一の行の長さを考慮することはできません
接続され、ラップ、オペレータの存在を必要に応じて、オペレータが行を変更する必要があり、その行の変更は、4つのスペースをインデント
注ここでのラップを繰り返しているならば、インデントを続行する必要がないこと、例えば、これは以下の最適な形式です。

if (typeof qqfind === "undefined" ||
    typeof qqfind.cdnrejected === "undefined" ||
    qqfind.cdnrejected !== true) {
    url = "http://pub.idqqimg.com/qqfind/js/location4.js";
} else {
    url = "http://find.qq.com/js/location4.js";
}

Objectオブジェクトを作成します。

// Bad
var team = new Team();
team.title = "AlloyTeam";
team.count = 25;

// Good  
var team = {
    title: "AlloyTeam",        // 冒号后需要跟一个空格
    count: 25
};

Arrayオブジェクトを作成します

// Bad
var colors = new Array("red", "green", "blue");
var numbers = new Array(1, 2, 3, 4);

// Good
var colors = [ "red", "green", "blue" ];  // 中括号左右均需要一个空格
var numbers = [ 1, 2, 3, 4 ];

コンストラクタ

/**
 * 创建一个构造函数
 */
function Modal(options) {    // 函数名使用大写字母开头，驼峰式命名
    this.width = options.width;    // 属性在构造函数体中定义
    this.height = options.height;
}

Modal.prototype.show = function() {    // 方法定义在原型链上
    // show
}

Modal.prototype.hide = function() {
    // hide
}

// 实例化对象
var modal = new Modal({
        width: 200,
        height: 300
    });

文法の場合

// if else 前后留有空格，
if (flag) {

} else {

}

文法について

// 普通for
var values = [ 1, 2, 3, 4, 5, 6, 7 ],
    i, len;
for (i=0, len=values.length; i<len; i++) {
    process(values[i]);
}

// for in, （一般情况下不要用for in）
var prop;
for (prop in object) {
    // 注意这里一定要有 hasOwnProperty 的判断,不要把原型链上的属性枚举出来
    if (object.hasOwnProperty(prop)) {
        console.log("Property name is " + prop);
        console.log("Property value is " + object[prop]);
    }
}

スイッチ文法

// switch和括号之间有空格， case需要缩进， break之后跟下一个case中间留一个空行
switch (condition) {
    case "first":
        // code
        break;

    case "third":
        // code
        break;

    default:
    // code
}

// 没有default的情况需要注释特别说明
switch(condition) {
    case "first":
        // code
        break;

    case "second":
        // code
        break;

    // no default
}

声明

変数宣言

var _body = $(document.body); // 全局变量使用下划线 _ 开头
function foo() {
    var result,    // 一个代码块里的变量声明只用一个var
         length,    // 一个变量一行，行末跟注释
         mainWrap;// 驼峰式命名法
         
}

定数宣言

すべて大文字+の命名方法を使用して、下線付き

var IMAGE_DOMAIN = 'WWW.XXX.COM';

関数の宣言

統一コマンド関数宣言は、関数を使用して宣言されます

// good
function foo() {        // 小括号前不需要空格，小括号与大括号间需要一个空格
    doSomething(); // 函数调用括号前后不需要空格
    return "hello world";
}

// bad
var foo = function() {
    return "hello world";
}

// bad
var foo = new Function(
    'return "hello world"'
);

機能の今文言実行、パッケージ必見ブラケットの最外層

// Good
(function() {
    "use strict";    // 使用严格模式

    function doSomething() {
        // code
    }

    function doSomethingElse() {
        // code
    }

})();

空行

説明：注：次のコードは、実際のコードで空白行を表します

function foo1() {
    
}
// 方法之间加空行
function foo2() {
    
}
// 逻辑块与方法之间加空行增加可读性
for (var i=0; i<10; i++) {
    
} 
// 逻辑块之间加空行增加可读性
if (flag) {
    
} else {
    
}
// 文件结尾留一个空行

雑多

文字列型のみが使用可能に== !=なif(x == 'a')===！==その他の場合は、条件に厳密に比較しなければなりません
evalの非特別なサービス、無効になって！！！
非特別なサービスで、無効になって！！！

CSS

文法

セレクタの組み合わせを使用する場合、別個のセレクタを保持それぞれ1行を占有します。
コードの読みやすさのために、それぞれの文の括弧の前にスペースを追加します。
右かっこ宣言ブロックは別々の行にする必要があります。
各ステートメントは、次のとおりです。スペースを挿入する必要があるとき。
各ステートメントは、より正確なエラー報告を確保するためにのみ1行を占有する必要があります。
すべてのステートメントはセミコロンで終了しなければなりません。最後の文の後のセミコロンはオプションですが、彼がいない場合、あなたのコードは、エラーが発生しやすくなりますが。
カンマ区切り値は、コンマの後にスペースを追加する必要があります。例えば、ボックスの影
カラー値RGB（）RGBA（）HSL（）HSLA（）とRECT（）は、スペースを追加しないでください。
（例えば、別の0.5 0.5の使用）不要前回値0で行います。
すべての16進値は、例えば#FFFため、小文字でなければなりません。小文字は、形状の大きい品種を持っているので、文書を閲覧するとき、彼らはより容易に区別することができます。
引用符は属性値セレクタ、そのような入力[タイプ=「テキスト」]を追加します。引用符を使用は、一貫性を向上させることができるようにいくつかのケースでは、彼らは、唯一のオプションです。
このような使用のマージンとして0単位、指定しないでください：0;代わりにマージン：0PX;。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
    padding: 15px;
    margin: 0px 0px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 2px #C0C0C0, inset 0 1px 0 #F8F8F8
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #c0c0c0, inset 0 1px 0 #f8f8f8;
}

宣言順

属性宣言は、パケット処理の次の順序で関連する必要があります。

ポジショニング
ボックスには、ボックスモデルをモデル化
表記上のレイアウト
外観

彼は通常のテキストの流れのうちの要素を作ることができ、およびボックスモデルは、関連するスタイルをカバーしているため、最初に配置します。彼は部品のサイズと位置を決定するので、ボックスモデルは、続きます。

コンポーネント内の他の属性だけの仕事や、彼らは背面にあるので、前の2例の結果には影響を与えません。

完全な属性とその順序については、を参照してください休会

.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
}

クラス名

クラス名にすべて小文字を維持するには、（DOはアンダースコアやキャメルケースの名前を使用しない）ダッシュを使用することができます。ダッシュは、クラス関連の自然な切れ目ようにする必要があります。（例えば、.btn、および.btn-danger）。
略語の過度の使用は避けてください。.btnこれはよくで記述することができるボタンが、.sいない任意の要素の代わりに。
使用.js-*（スタイルに関して）の挙動を表現するが、CSSでこれらのクラスが含まれていないクラスが。

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

セレクタ

代わりに、一般的なラベル要素の使用クラスは、レンダリング性能を最適化します。
属性セレクタの使用を避ける（例えば、[^ =クラス「は...」]）アセンブリで頻繁に表示されます。ブラウザのパフォーマンスは、これらの条件に影響されます。
理想的には3内に制御すべきであるセレクタエントリの各組み合わせを選択するセレクタの長さを減少させます。
唯一の子孫セレクタ必要に応じて（例えば、接頭辞を持つクラスを使用せずに）。

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

使用しないでください@import

そして、<link>ラベルに比べて@importはるかに遅いされる命令、リクエストの追加番号を追加するだけでなく、予期せぬ問題につながります。いくつかの選択肢があります：

複数の使用<link>の要素
以下サスやファイルの複数としてコンパイルプリプロセッサCSSのCSSファイルでのように

HTML

文法

二つのスペースの代わりに、タブ（タブ）で - これは、すべての環境で示されたのと同一の方法に保証アクセスする唯一の方法です。
プロパティでは、二重引用符を使用して、単一引用符を使用しません。
彼らはオプションであることをHTML5仕様の状態 - 自動的にスラッシュの最後に閉じたラベルを使用しないでください。
オプションの終了タグ（例えば、</ LI>と</ body>を）見過ごしてはいけません。
ネストされたノードが（4つのスペース）インデントされなければなりません。

文字コード

明示的に文字エンコーディングを宣言することによって、あなたのブラウザが迅速かつ容易にページコンテンツをレンダリング判断することを確認することができます。この利点は、文書のエンコーディング（一般的にUTF-8エンコーディングを使用）を持つすべての一貫性のため、HTMLの文字エンティティタグ（文字エンティティ）の使用を避けることです。

CSSとJavaScriptの導入

HTML5の仕様によると、通常、あなたはそれらのデフォルト値ですjavascriptのテキスト/ CSSとテキスト/として、CSSやJavaScriptを導入する際のタイプを指定する必要はありません。

属性の順序

彼らは読みやすさを確保するために特定の順序のように見えるようHTML属性。

クラス
ID
名前
データ-*
SRC、タイプ、HREF、値、最大長、MAX、MIN、パターン、のために
プレースホルダ、タイトル、ALT
aria- *、役割
無効、読み取り専用、必要

クラスは、高再利用可能なコンポーネントを使用して設計され、理論的には、彼らが最初の場所でなければなりません。IDS、より具体的な、彼らは二位であるので、（ページのブックマークの中など、）の使用を最小限に抑える必要があります。

ラベルを生成するためにJavaScriptを使用しないでください

見つけるのはそれがより困難にするために生成されたコンテンツのラベル、編集するには難しく、JavaScriptファイルで悪化した性能。私たちは、このような状況を回避しようとしてください。

サンプルコード


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- External CSS -->
    <link rel="stylesheet" href="code-guide.css">
    <!-- In-document CSS -->
    <style>
      /* ... */
    </style>
  </head>
  <body>
    <a id="..." class="..." data-modal="toggle" href="#">
      Example link
    </a>
    <input class="form-control" type="text">
    <img src="..." alt="...">
    
    <!-- JavaScript -->
    <script src="code-guide.js"></script>
  </body>
</html>