JavaScript プログラミング言語は、最も人気のあるクライアント側スクリプト言語として、多くの Web 開発者に長年親しまれてきました。 Web2.0 時代の到来と Ajax テクノロジーの普及により、JavaScript は徐々に注目を集めています。仕事でさらに求められるのは、JavaScript 言語の深い学習、柔軟なアプリケーション、コーディング品質の保証です。
C/C または Java 言語に精通しているエンジニアにとって、JavaScript は柔軟でシンプルで理解しやすく、コード形式の要件も比較的緩いです。学習して独自のコードに適用するのは簡単です。このため、JavaScript コーディング標準は過小評価され、開発プロセス中にいじられることが多く、最終的には後続のメンテナにとって悪夢となります。ソフトウェアの長期的な存在価値は、そのコーディングの品質に直接比例します。コーディング標準は、プログラミングにおける不必要なトラブルを減らすのに役立ちます。 JavaScript コードは顧客のブラウザに直接送信され、顧客と直接やり取りするため、コーディングの品質にさらに注意を払う必要があります。
この記事では、JavaScript プログラミングのコーディング標準について簡単に説明し、その理由を分析します。より多くの Web 開発者が JavaScript コーディング標準とソフトウェア製品の品質問題に注意を払うことが期待されます。
はじめに
C/C や Java のコーディング標準に関しては、多くのエンジニアがよく知っていると思います。しかし、JavaScript 言語のコーディング標準に関して言えば、笑ってしまうかもしれません。 JavaScript の構文は非常に柔軟です。変数はいつでも使用および宣言できます。文字列や数値を追加することもできます。パラメーターが 1 つ未満であっても、エラーが発生することはありません。そう、C/C や Java の厳格な文法規則から JavaScript 言語に切り替えると、ずっと自由でリラックスした気分になれるのです。緩やかな構文は JavaScript の重要な機能です。柔軟で理解しやすく、開発者に多くの利便性をもたらしますが、作成プロセス中に注意を払わないと、コードのデバッグとメンテナンスのコストが目に見えないほど増加します。
JavaScript エンコーディングはクライアントのブラウザに直接送信されます。コード仕様はコードの品質を保証するだけでなく、製品の長期的な評判にも影響します。 JavaScript プログラミング言語の仕様問題も、より多くの友人の注目を集めることを願っています。
JavaScript コーディング標準の推奨事項
この記事では、JavaScript コーディング プロセスに含まれるいくつかの特殊なシンボルのレイアウト、命名、宣言、範囲、および使用について説明します。個人的な経験を要約し、あなた自身の提案をいくつか述べ、参考となる理由を分析します。
JavaScript ファイル リファレンス
JavaScript プログラムは、呼び出す必要がある場合は、できるだけ .js ファイルに配置する必要があり、< を使用して HTML 内で呼び出す必要があります。 ; スクリプト src="ファイル名.js "> が含まれています。 JavaScript コードが HTML ファイルに固有でない場合は、HTML ファイルに JavaScript コードを直接記述することは避けてください。これにより、HTML ファイルのサイズが大幅に増加し、コードの圧縮やキャッシュが困難になるためです。
また、
このような注釈は JavaScript コードでよく見られます。 「initialize valueA to be sero」のようなコメントは、「var valueA = 0;」というコピー文からわかるのでしょうか?コピー アンド ペーストによって発生するタイミング エラーも、このステートメントに対するプログラマの理解を誤解させます。 setTimeout() 関数の目的は、関数実行のタイムアウトを設定することではなく、呼び出された関数を実行する前に一定時間待機することですが、これは非常に有害です。このようなコメントは削除した方が良いでしょう。
また、JavaScript のコメントには「//」と「/* .... */」の 2 種類があります。「//」はコード行のコメントとして使用することをお勧めします。 /* .... */" " 形式は、コード セグメント全体をログアウトするか、関数パラメーター、関数、ファイル関数などのより正式な宣言で使用されます。
識別子の命名
JavaScript での識別子の命名規則:
◆ 文字、アンダースコア '_' またはドル記号 '$' を使用します
◆ 名前に文字、数字、アンダースコア「_」、ドル記号「$」を含めることができます。
◆ 大文字と小文字を区別します。
変数、パラメータ、メンバー変数、関数の名前コンストラクターはすべて小文字で始まり、コンストラクターの名前は大文字で始まります。アンダースコア「_」で始まる変数は、通常、プライベート/ローカル メンバーを識別するために使用されます。ドル記号「$」で始まる変数は、システム プロセスなどのシステム関連の変数を識別するために使用されます。アンダースコア「_」またはドル記号「$」を使用して識別子に名前を付けることは避けてください。コードを読む負担を可能な限り軽減します。
宣言
変数の宣言
ただし、JavaScript 言語では、使用する前に変数を宣言する必要はありません。 。しかし、私たちはこの良い習慣を身につける必要があります。これにより、宣言されていない変数を検出しやすくなり、それらが隠れたグローバル変数になって隠れた危険を引き起こすのを防ぐことができます。
関数の先頭で、まず var キーワードを使用して関数で使用するローカル変数を宣言し、関数と変数の意味についてコメントし、それらをアルファベット順に並べ替える必要があります。コメントを追加できるように、各変数は個別の行に配置する必要があります。これは、JavaScript では関数の {} のみがスコープを示すため、var キーワードを使用して宣言されたローカル変数は関数内でのみ有効ですが、var のない変数はグローバル変数とみなされます。リスト 3 を見てみましょう。
リスト 3. ローカル変数宣言
コード:
コードをコピー コードは次のとおりです:
上記の例の出力から、var で宣言された変数 valueA と宣言されていない変数 valueB の間に違いがあることがわかり、驚きました。関数内で var で宣言された変数はローカル変数であることに注意することが特に重要です。これにより、同じ名前を持つローカル変数とグローバル変数によって引き起こされるエラーを効果的に回避できます。
関数の宣言
関数は、内部変数を宣言する var ステートメントの後で宣言する必要があります。これにより、内部変数と内部変数を明確に示すことができます。内部関数のスコープ。 さらに、関数名とその関数を明確に表示するために、関数名は左括弧 '(' のすぐ間にある必要があり、右括弧 ')' とそれに続く '{' の間にはスペースが必要です。パラメータ部分と関数本体の先頭。関数が匿名/名前なし関数の場合、関数キーワードと左括弧 '(' の間にスペースが必要です。そうしないと、関数名が function であると誤解される可能性があります。
リスト 4内部関数宣言
コード:
<スクリプト言語="javascript">
var innerA = 1;
function outF () {
var innerA = 2;
>alert ("valueA= " innerA);
}
_inF ();
}
outF (); // 出力: valueA=2
_inF (); innerF が定義されていません
リスト 4 の出力からわかるように、inF () 関数は outF () 関数内でのみ有効です。変数 innerA は、内部関数のスコープ内で有効になります。同時に、代入ステートメントで値を代入するために関数とオブジェクトを使用する場合、そのコーディング方法では変数と関数のスコープが明確になります。場合によっては、代入ステートメントの最後にセミコロンを追加する必要があります。これは、JavaScript では改行文字が出現すると、すべての式がステートメントとして解析されるためです。このとき、不規則な改行やセミコロンの欠落により、for、while、do、switch、try... などの複合文のコード本体に新たなエラーが発生する可能性があります。 catch、関数定義の関数本体、オブジェクト定義などは中括弧 '{}' の中に置く必要があります。
◆ '{' は行末にあり、コードの先頭を示します。
◆ '}' はコード ブロックの終わりを示す行の先頭にある必要があり、'{' が配置されている行の先頭と揃えて、それを示す必要があります。完全な複合文セグメントを作成すると、コードの可読性が大幅に向上し、制御ロジックが明確に表示されます。段落に文が 1 つしかない場合は、中括弧「{}」を含める必要があります。中括弧なしでコーディングすることは間違いではありませんが、ステートメントを追加する必要がある場合は、次のような理由でコンパイル エラーやロジック エラーが発生しやすくなります。中括弧の省略。
return ステートメントも注意して使用する必要があります。式の実行を戻り値として使用する場合は、改行文字が終わりとして誤解されないように、式と return を同じ行に配置してください。ステートメントの間違いが発生し、リターンミスが発生します。 return キーワードの後に return 式がない場合は、unknown が返されます。コンストラクターのデフォルトの戻り値は次のとおりです。
リスト 5. return 式
コード:
コードをコピー
コードは次のとおりです。
リスト 6 では、2 つの変数 valueA と valueB の値は明らかに等しくありません。少なくとも valueA は文字列であり、valueB は数値です。ただし、「==」を使用して判断すると、プログラムは等しい単語を出力します。これは、コンパイラーが 2 つの変数を比較するときに、それらの型が異なるため、自動的に valueB を文字列に変換し、それを valueA と比較するためです。 「===」を使用して得られた判定結果は、期待された結果と一致しています。
プラス記号 ' ' もプログラマによく知られている演算子の 1 つです。 JavaScript と他のプログラミング言語の違いは、JavaScript では数値の追加や文字列の連結に加えて、「 」を単項演算子として使用して文字列を数値に変換することもできることです。したがって、使い方を誤ると自動インクリメント記号「 」と混同され、計算ミスを引き起こす可能性があります。これはリスト 7 で明らかです。
リスト 7. 賢い数字
コード:
コードをコピー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
