優れた JavaScript の書き方

はじめに

実際の仕事では、機能的には問題ないものの、コーディングスタイルや仕様が非常に貧弱であることが多く、読み進めるのが怖くなったり、その日の読者の気分に影響を与えたりすることがあります。これらのコードは、読みにくいだけでなく、保守も困難です。通常、プログラミングを始めたばかりの初心者プログラマー、または数年間働いている経験豊富なプログラマーによって作成されます。したがって、この記事の目的は、適切なコーディング スタイルを開発できておらず、対応するコーディング標準への認識が不足している JavaScript 学習者がコーディングのイメージを向上させることを支援することです。

コーディングイメージ

上記では、私が個人的に考えるコーディング画像の概念を提案しました:

编码形象 = 编码风格 +　编码规范

プログラマーにとって、優れたコーディング イメージは、身なりの良い若者に相当します。これは、同僚があなたの優れた能力を理解する最も直接的かつ簡単な方法です。

悪いコーディング画像を見てみましょう:

//打个招呼
function func(){
    var age=18,sex='man';
    var greeting='hello';
    if(age<=18&&sex==&#39;man&#39;){
        console.log(greeting+&#39;little boy&#39;)
    }

    ...
}
func()

上記のコードは密集しており、標準を意識していないため、読むのに耐えられません。

良いコードイメージを見てみましょう:

// 打个招呼
function greetFn() {
    var age = 18,
        sex = 'man',
        greeting = 'hello';

    if (age <= 18 && sex === &#39;man&#39;) {
        console.log(greeting + &#39;little boy&#39;);
    }

    ...
};

greetFn();

上記のコードの方が快適でしょうか?

良いコーディングイメージを作成することが重要であることがわかります。この記事では主に JavaScript に基づいたコーディングイメージ、つまり JavaScript ベースのコーディングスタイルとコーディング仕様について説明します。

では、コーディング スタイルとは何ですか、コーディング仕様とは何ですか。また、両者の違いは何でしょうか?

コーディングスタイル

まず、コーディングスタイルはスタイルですので、正しいも間違いもありません。人それぞれ服装が異なるのと同じように、より適切な服装をする人もいれば、よりカジュアルな服装をする人もいます。

JavaScript のコーディングスタイルには、比較的まともなスタイルもあります。特にチーム開発では、自分のスタイルを自由に書くことはできません。

ここではランダムなコーディング スタイルをいくつか示し、適切なコーディング スタイルと比較します。

1. 合理的なコメント

rreerree

2. 適度な間隔

rreerree

3. 適度なインデント

// 不推荐的写法
var name = '劳卜';//代码和注释之间没有间隔

if (name) {
    /*
     *注释之前无空行
     *星号后面无空格
     */
}

rree

4. 合理的な空行

// 推荐的写法
var name = '劳卜'; // 代码和注释之间有间隔

if (name) {

    /*
     * 注释之前有空行
     * 星号后面有空格
     */
}

rree

5. 合理的なネーミング

// 不推荐的写法
var name='劳卜'; // 等号和两侧之间没有间隔

// if块级语句间没有间隔
if(name){
    console.log('hello');
}

rree

6. 合理的な発言

// 推荐的写法
var name = '劳卜'; // 等号和两侧之间有间隔

// if块级语句间有间隔
if (name) {
    console.log('hello');
}

rree

7. 妥当な結末

// 不推荐的写法：没有合理缩进
function getName() {
console.log('劳卜'); 
}

rree

上記は主に一般的なコーディング例を 7 つ挙げて比較したものであり、推奨される記述方法と推奨されない記述方法のどちらが正しいかはありません。ただ、推奨される記述方法の方が読みやすく、保守しやすいというだけです。チーム開発用であり、優れたコーディングイメージの具現化でもあります。

コーディング標準

コーディング規約に関しては、標準なので一定のルールに従って書く必要があります。コーディング標準に違反するコードを無作為に記述すると、プログラム エラーや潜在的なバグが発生する可能性があるため、コーディング スタイルよりも厳格である必要があり、コーディング標準にコーディング スタイルを含める人もいます。

一般的なコード例をいくつか示します:

1. パラメータを比較します

// 推荐的写法：合理缩进
function getName() {
    console.log('劳卜');
}

rreee

2. if ステートメントをラップします

// 不推荐的写法: 代码功能块之间没有空行
function getName() {
    var name = '劳卜';
    if (name) {
        console.log('hello');
    }
}

// 推荐的写法：代码功能块之间有空行
function getName() {
    var name = '劳卜';

    if (name) {
        console.log('hello');
    }
}

3. eval は注意して使用してください

// 不推荐的写法
var getName = '劳卜'; // 变量命名前缀为动词

// 函数命名前缀为名词
function name() {
   console.log('hello');
}

rreeee

4. タイプを決定します

// 推荐的写法
var name = '劳卜'; // 变量命名前缀为名词

// 函数命名前缀为动词
function getName() {
   console.log('hello');
}

rree

5. 属性の検出

// 不推荐的写法：函数在声明之前使用
getName(); 

function getName() {
    console.log('hello');
}

// 推荐的写法：函数在声明之后使用
function getName() {
    console.log('hello');
}

getName();

上記では、主に一般的なコーディング標準の 5 つの例を示しています。独自のコードを合理的に標準化すると、不必要なメンテナンス コストと潜在的なバグのリスクを大幅に削減できます。

結論

「プログラムは人が読むために書かれており、コンピュータによって実行されることはまれです。一時的な便宜のためだけで自分のコード イメージを破壊することは、他の人やプロジェクト全体に不必要な迷惑をもたらすことになります。」

この記事の内容は、書籍「Writing Maintainable JavaScript」から参照されています。

以上が優れた JavaScript の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。