JavaScriptには権威あるコーディングスタイルガイドはありませんが、代わりに人気のあるコーディングスタイルです。
コードコピーは次のとおりです。
GoogleのJavaScriptスタイルガイド(以下Googleと呼ばれる)
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
NPMエンコーディングスタイル(以下NPMと呼ばれる)
https://npmjs.org/doc/coding-style.html
Felixのnode.jsスタイルガイド(以下、node.jsと呼ばれる)
http://nodeguide.com/style.html
慣用性javascript(以下、慣用と呼ばれる)
https://github.com/rwldrn/iiomatic.js/
jQuery javascriptスタイルガイド(以下、jqueryと呼ばれる)
http://contribute.jquery.org/style-guide/js/
ダグラスクロックフォードのJavaScriptスタイルガイド(以下、クロックフォードと呼ばれる)、ダグラスクロックフォードは、Web開発の分野で最も有名な技術当局の1つであり、ECMA JavaScript 2.0標準化委員会のメンバーである
http://javascript.crockford.com/code.html
もちろん、JavaScript構文チェッカーJSLINTおよびJSHINTには、デフォルト設定の選択肢もあります。問題は、ほとんどの開発者が従うことができる究極のJavaScriptコーディングスタイルは何ですか?以下のこれらの6つのスタイルガイドからいくつかのコンセンサススタイルを見つけましょう。
1。コードスタイルの比較
1.1インデント
2つのスペース、もはやインデントではなく、タブのインデントなし:Google、NPM、node.js、Idiomatic
タブインデント:jQuery
4スペース:クロックフォード
1.2パラメーターと式の間のスペース
コンパクトスタイルを使用:Google、NPM、node.js
次のようにコードをコピーします。project.myclass= function(arg1、arg2){
スペースの使用が多すぎる:慣用的、jQuery
次のようにコードをコピーします:for(i = 0; i <length; i ++){
コメントなし:クロックフォード
ほとんどのガイドでは、開発者は声明の最後にスペースがないことを思い出させます。
1.3コード行の長さ
最大80文字:Google、NPM、node.js、Crockford(コードブロックにある場合、2つのスペースを除く他のインデントにより、関数パラメーターを最初の関数パラメーターの位置と整列させることができます。別のオプションは、2つではなくラインをラッピングするときにインデントに4つのスペースを使用することです。
コメントなし:jquery、慣用
1.4セミコロン
暗黙の挿入に依存しないセミコロンを常に使用します:Google、node.js、crockford
期待しないでください:場合によってはnpm
コメントなし:jquery、慣用
1.5コメント
JSDOCの規則に従ってください:Google、Idiomatic
コメントなし:NPM、node.js、jquery、crockford
1.6引用符
推奨される単一の引用:Google、node.js
二重引用符:jQuery
コメントなし:NPM、慣用、クロックフォード
1.7変数宣言
コンマ:node.jsを使用せずに1つずつ宣言します
コードコピーは次のとおりです。
var foo =”;
var bar =”;
一度に倍数を宣言し、コンマを使用して行の端で分離します:慣用、jquery
コードコピーは次のとおりです。
var foo = ""、
bar = ""、
QUUX;
ラインの先頭でコンマを使用します:npm
コメントなし:Google、Crockford
1.8ブレース
同じ行のオープニングブレースを使用してください:Google、NPM、node.js、Idiomatic、JQuery、Crockford
次のようにコードをコピーします:function thisisblock(){
NPMガイドは、コードブロックに次の行を含める必要がある場合にブレースのみを使用しているため、使用されないことを示しています。
1.9グローバル変数
グローバル変数を使用しないでください:Google、Crockford(Googleは、グローバル変数の命名対立はデバッグが難しいと言い、2つのプロジェクトが統合されている場合、いくつかの難しい問題がある可能性があります。一般的なJavaScriptコードの共有を促進するには、競合を避けるために条約を作成する必要があります。
コメントなし:Idiomatic、jQuery、npm、node.js
2つの命名スタイル
2.1可変命名
最初の最初の単語は小文字であり、その後のすべての単語の最初の文字は大文字です:Google、NPM、node.js、Idiomatic
コードコピーは次のとおりです。
var foo = "";
var fooname = "";
2.2一定の命名
大文字の使用:Google、NPM、node.js
コードコピーは次のとおりです。VARCONS= 'VALUE';
コメントなし:jquery、ithiomatic、crockford
2.3関数の命名
最初の最初の単語は小文字であり、その後のすべての単語の最初の文字は大文字(キャメル)です:Google、NPM、Idiomatic、node.js(長い、記述的関数名を使用することをお勧めします)
コードコピーは次のとおりです。
verylongoperationName機能
function short()..
キーワード形式の関数の命名:
コードコピーは次のとおりです。
function isready()
functionsetname()
関数getName()
コメントなし:jquery、クロックフォード
2.4アレイネーミング
複数形の使用:ithiomatic
コードコピーは次のとおりです。vardocuments = [];
コメントなし:Google、jquery、npm、node.js、crockford
2.5オブジェクトとクラスの命名
次のフォームを使用します:Google、NPM、node.js
コードコピーは次のとおりです。
var thisisobject = new Date;
コメントなし:jquery、ithiomatic、crockford
2.6その他の命名
長いファイル名と構成キーには、オールローワーHyphen-CSSケースを使用してください:npm
3.上記のスタイルに従って.jshintrcファイルを構成する
Jshint(http://www.jshint.com/)は、コードスタイルに関連する問題を思い出させるために使用できるJavaScriptの構文とスタイルのチェックツールです。一般的に使用されている多くの編集者によく統合でき、チームコーディングスタイルを統合するための優れたツールです。
jshintドキュメント:http://www.jshint.com/docs/#optionsから利用可能なオプションを表示できます。
以下は、上記の各カテゴリの下にある最初のスタイルに基づいて.jshintrcファイルを作成するためです。プロジェクトのルートディレクトリに配置でき、Jshint-Avareコードエディターは、プロジェクトのすべてのコードスタイルを統合します。
コードコピーは次のとおりです。
{
「Camelcase」:本当、
「インデント」:2、
「undef」:本当、
「Quotmark」:シングル、
「マクレン」:80、
「トレイル」:本当、
「カーリー」:本当です
}
さらに、次のヘッダーをJavaScriptファイルに追加する必要があります。
コードコピーは次のとおりです。
/ * jshintブラウザ:true、jquery:true */
node.jsファイルで追加する必要があります。
コードコピーは次のとおりです。
/ *jshintノード:true */
さまざまなJavaScriptファイルに次のステートメントを追加することもできます。
コードコピーは次のとおりです。
「Strictを使用」;
これはJshintとJavaScriptエンジンに影響を与え、それほど互換性がないかもしれませんが、JavaScriptはより速く実行されます。
4. gitをコミットする前に、jshintを自動的に実行します
すべてのJSコードが.jshintrcで定義されているスタイルと一致していることを確認する場合は、.git/hooks/pre-commitファイルに次のものを追加できます。また、新しく変更されたファイルをプロジェクトに送信しようとすると、スタイルチェックが自動的に実行されます。
コードコピーは次のとおりです。
#!/bin/bash
#javascriptファイルでJshintを実行するためのgitフックを事前にコミットする。
#
#テストなしで絶対にコミットする必要がある場合、
#使用:gitコミット - ノーベリフィー
filenames =($(git diff - cached -nameのみのヘッド))
どのjshint&> /dev /null
if [$? -ne 0];
それから
エコー「エラー:jshintが見つかりません」
echo "インストール:sudo npmインストール-g jshint"
終了1
fi
「$ {filenames [@]}」の私のために
する
if [$ i =〜 /.js$]];
それから
エコーJshint $ i
jshint $ i
if [$? -ne 0];
それから
終了1
fi
fi
終わり