キーポイント

• 賢さ最初の賢さ：非常に読みやすいコードは、保守性とコラボレーションを改善し、理解しやすいコードを作成して修正することが重要です。
• 関數(shù)とファイル管理：機能を使用して、再利用可能なコードをカプセル化し、大きなファイルをより小さく、より管理しやすい部分に分割して、ナビゲーションと理解を簡素化します。
• 命名規(guī)則：読みやすさを改善し、追加のコメントの必要性を減らすために、関數(shù)と変數(shù)の明確で記述的な名前を選択します。
• 過度の最適化を避ける：簡潔で最適化されたコードは魅力的ですが、最新のJavaScriptエンジンはコード最適化が非常に効率的であるため、パフォーマンスの影響が重要ではない場合は読みやすさを優(yōu)先する必要があります。
• 慎重なコメント：コメントを使用して、「何をすべきか」ではなく「なぜ」を「なぜ」と説明し、コメントを関連付けて最新の狀態(tài)に保ち、非自明なコードロジックを理解するのに役立ちます。

この記事は、マット?バーネット、サイモン?コドリントン、ニルソン?ジャックによってレビューされました。 SitePointコンテンツを最高の狀態(tài)にしてくれたすべてのSitePointピアレビュアーに感謝します！ もう一度コードを見ることなく、一度に1回の実行でプロジェクトを完了したことがありますか？どちらの私もいない。古いプロジェクトに取り組んでいるときは、コードの仕組みを理解して、ほとんどまたはまったく時間を費やさないようにすることができます。読みやすいコードは、製品を維持し、あなたとあなたの同僚や協(xié)力者を満足させるために不可欠です。

この記事では、コードを読みやすくするためのヒントとトリック、および回避する落とし穴を調(diào)べます。

コードセグメンテーション

形式の類推に持続すると、フォームが部品に分割されることがあり、難しくなりません。コードは同じことができます。それをセクションに分割することにより、読者はジャングルを閲覧するのに苦労するのではなく、それらに関連するセクションにジャンプできます。

クロスファイル

長年にわたり、ネットワークのあらゆる種類のものを最適化してきました。 JavaScriptファイルも例外ではありません。 MINIFINGとPRE-HTTP/2について考えて、スクリプトを1つに組み合わせることでHTTP要求を保存します。今日、私たちは希望どおりに作業(yè)し、GulpやGruntなどのタスクランナーを使用してファイルを処理できます。私たちが好きな方法をプログラムし、ツールに最適化（接続など）を殘すことができると言っても安全です。

// 從 API 加載用戶數(shù)據(jù)
var getUsersRequest = new XMLHttpRequest();
getUsersRequest.open('GET', '/api/users', true);
getUsersRequest.addEventListener('load', function() {
    // 對用戶執(zhí)行某些操作
});

getUsersRequest.send();

//---------------------------------------------------
// 不同的功能從這里開始。也許
// 這是一個分成文件的時機。
//---------------------------------------------------

// 從 API 加載帖子數(shù)據(jù)
var getPostsRequest = new XMLHttpRequest();
getPostsRequest.open('GET', '/api/posts', true);
getPostsRequest.addEventListener('load', function() {
    // 對帖子執(zhí)行某些操作
});

getPostsRequest.send();

function

関數(shù)を使用すると、再利用可能なコードブロックを作成できます。一般に、関數(shù)の內(nèi)容はインデントされているため、関數(shù)の開始位置と終了位置を簡単に確認できます。良い習(xí)慣は、関數(shù)を小さく保つことです-10列以下です。また、関數(shù)が正しく命名されたときに関數(shù)が呼び出されたときに何が起こるかを理解するのも簡単です。後で命名規(guī)則を紹介します。

// 從 API 加載用戶數(shù)據(jù)
function getUsers(callback) {
    var getUsersRequest = new XMLHttpRequest();
    getUsersRequest.open('GET', '/api/users', true);
    getUsersRequest.addEventListener('load', function() {
        callback(JSON.parse(getUsersRequest.responseText));
    });

    getUsersRequest.send();
}

// 從 API 加載帖子數(shù)據(jù)
function getPosts(callback) {
    var getPostsRequest = new XMLHttpRequest();
    getPostsRequest.open('GET', '/api/posts', true);
    getPostsRequest.addEventListener('load', function() {
        callback(JSON.parse(getPostsRequest.responseText));
    });

    getPostsRequest.send();
}

// 由于命名正確，因此無需閱讀實際函數(shù)即可輕松理解此代碼
// getUsers(function(users) {
//     // 對用戶執(zhí)行某些操作
// });
// getPosts(function(posts) {
//     // 對帖子執(zhí)行某些操作
// });

上記のコードを簡素化できます。これらの2つの関數(shù)はほとんど同じであることに注意してください。 「自分自身を繰り返さないでください」（ドライ）原則を適用できます。これは混亂を防ぎます。

function fetchJson(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.addEventListener('load', function() {
        callback(JSON.parse(request.responseText));
    });

    request.send();
}

// 下面的代碼仍然很容易理解
// 無需閱讀上面的函數(shù)
fetchJson('/api/users', function(users) {
    // 對用戶執(zhí)行某些操作
});
fetchJson('/api/posts', function(posts) {
    // 對帖子執(zhí)行某些操作
});

POSTリクエストを通じて新しいユーザーを作成したい場合はどうなりますか？この時點で、1つのオプションは、関數(shù)にオプションのパラメーターを追加して、関數(shù)に新しいロジックを?qū)毪贰㈤v數(shù)になるには複雑すぎるようにすることです。別のオプションは、コードの複製を引き起こすために、投稿リクエスト専用に特別に新しい関數(shù)を作成することです。

オブジェクト指向のプログラミングを通じて両方の利點を取得でき、保守性を維持しながら構(gòu)成可能な単一使用オブジェクトを作成できます。

注：オブジェクト指向のJavaScriptの初心者が必要な場合は、このビデオをお勧めします。オブジェクト指向のJavaScriptの権威あるガイド< オブジェクト指向のプログラミング

function HttpRequest(url) {
    this.request = new XMLHttpRequest();

    this.body = undefined;
    this.method = HttpRequest.METHOD_GET;
    this.url = url;

    this.responseParser = undefined;
}

HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';

HttpRequest.prototype.setMethod = function(method) {
    this.method = method;
    return this;
};

HttpRequest.prototype.setBody = function(body) {
    if (typeof body === 'object') {
        body = JSON.stringify(body);
    }

    this.body = body;
    return this;
};

HttpRequest.prototype.setResponseParser = function(responseParser) {
    if (typeof responseParser !== 'function') return;

    this.responseParser = responseParser;
    return this;
};

HttpRequest.prototype.send = function(callback) {
    this.request.addEventListener('load', function() {
        if (this.responseParser) {
            callback(this.responseParser(this.request.responseText));
        } else {
            callback(this.request.responseText);
        }
    }, false);

    this.request.open(this.method, this.url, true);
    this.request.send(this.body);
    return this;
};

new HttpRequest('/users')
    .setResponseParser(JSON.parse)
    .send(function(users) {
        // 對用戶執(zhí)行某些操作
    });

new HttpRequest('/posts')
    .setResponseParser(JSON.parse)
    .send(function(posts) {
        // 對帖子執(zhí)行某些操作
    });

// 創(chuàng)建一個新用戶
new HttpRequest('/user')
    .setMethod(HttpRequest.METHOD_POST)
    .setBody({
        name: 'Tim',
        email: 'info@example.com'
    })
    .setResponseParser(JSON.parse)
    .send(function(user) {
        // 對新用戶執(zhí)行某些操作
    });

。コードを読みやすくすることは、より細心の蕓術(shù)です。わずかな詳細は大きな影響を與える可能性があります。たとえば、ラインの長さを80文字に制限することは簡単なソリューションであり、通常は垂直線を介して編集者によって強制されます。しかし、もっとあります！ name 適切な命名は、値が何であるか、または関數(shù)の役割を見つけることなく、即座に認識される可能性があります。

関數(shù)は通常、ラクダの命名法を使用します。通常、動詞から始めてから被寫體から始めるのに役立ちます。

// 從 API 加載用戶數(shù)據(jù)
var getUsersRequest = new XMLHttpRequest();
getUsersRequest.open('GET', '/api/users', true);
getUsersRequest.addEventListener('load', function() {
    // 對用戶執(zhí)行某些操作
});

getUsersRequest.send();

//---------------------------------------------------
// 不同的功能從這里開始。也許
// 這是一個分成文件的時機。
//---------------------------------------------------

// 從 API 加載帖子數(shù)據(jù)
var getPostsRequest = new XMLHttpRequest();
getPostsRequest.open('GET', '/api/posts', true);
getPostsRequest.addEventListener('load', function() {
    // 對帖子執(zhí)行某些操作
});

getPostsRequest.send();

変數(shù)名の場合は、逆ピラミッド法を適用してみてください。トピックは前に配置され、屬性は後ろに配置されます。

// 從 API 加載用戶數(shù)據(jù)
function getUsers(callback) {
    var getUsersRequest = new XMLHttpRequest();
    getUsersRequest.open('GET', '/api/users', true);
    getUsersRequest.addEventListener('load', function() {
        callback(JSON.parse(getUsersRequest.responseText));
    });

    getUsersRequest.send();
}

// 從 API 加載帖子數(shù)據(jù)
function getPosts(callback) {
    var getPostsRequest = new XMLHttpRequest();
    getPostsRequest.open('GET', '/api/posts', true);
    getPostsRequest.addEventListener('load', function() {
        callback(JSON.parse(getPostsRequest.responseText));
    });

    getPostsRequest.send();
}

// 由于命名正確，因此無需閱讀實際函數(shù)即可輕松理解此代碼
// getUsers(function(users) {
//     // 對用戶執(zhí)行某些操作
// });
// getPosts(function(posts) {
//     // 對帖子執(zhí)行某些操作
// });

通常の変數(shù)と特別な変數(shù)を區(qū)別できることも重要です。たとえば、定數(shù)の名前は通常、大文字で記述され、下線が引かれます。

function fetchJson(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.addEventListener('load', function() {
        callback(JSON.parse(request.responseText));
    });

    request.send();
}

// 下面的代碼仍然很容易理解
// 無需閱讀上面的函數(shù)
fetchJson('/api/users', function(users) {
    // 對用戶執(zhí)行某些操作
});
fetchJson('/api/posts', function(posts) {
    // 對帖子執(zhí)行某些操作
});

クラスは通常、大文字から始まるラクダの命名法を使用します。

function HttpRequest(url) {
    this.request = new XMLHttpRequest();

    this.body = undefined;
    this.method = HttpRequest.METHOD_GET;
    this.url = url;

    this.responseParser = undefined;
}

HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';

HttpRequest.prototype.setMethod = function(method) {
    this.method = method;
    return this;
};

HttpRequest.prototype.setBody = function(body) {
    if (typeof body === 'object') {
        body = JSON.stringify(body);
    }

    this.body = body;
    return this;
};

HttpRequest.prototype.setResponseParser = function(responseParser) {
    if (typeof responseParser !== 'function') return;

    this.responseParser = responseParser;
    return this;
};

HttpRequest.prototype.send = function(callback) {
    this.request.addEventListener('load', function() {
        if (this.responseParser) {
            callback(this.responseParser(this.request.responseText));
        } else {
            callback(this.request.responseText);
        }
    }, false);

    this.request.open(this.method, this.url, true);
    this.request.send(this.body);
    return this;
};

小さな詳細は略語です。略語を大文字にすることを選択する人もいれば、ラクダの命名法に固執(zhí)することを選択する人もいます。前者を使用すると、その後の略語を特定することがより困難になる場合があります。

シンプルさと最適化

多くのコードベースでは、文字の數(shù)を減らすか、アルゴリズムのパフォーマンスを改善するための「特別な」コードが遭遇する可能性があります。

シングルラインコードは、簡潔なコードの例です。殘念ながら、彼らは通常、トリックや不明瞭な構(gòu)文に依存しています。以下に示すネストされた三元演算子は一般的な例です。簡潔ですが、通常のIFステートメントと比較してその効果を理解するのに1?2秒かかる場合があります。構(gòu)文のショートカットには注意してください。

new HttpRequest('/users')
    .setResponseParser(JSON.parse)
    .send(function(users) {
        // 對用戶執(zhí)行某些操作
    });

new HttpRequest('/posts')
    .setResponseParser(JSON.parse)
    .send(function(posts) {
        // 對帖子執(zhí)行某些操作
    });

// 創(chuàng)建一個新用戶
new HttpRequest('/user')
    .setMethod(HttpRequest.METHOD_POST)
    .setBody({
        name: 'Tim',
        email: 'info@example.com'
    })
    .setResponseParser(JSON.parse)
    .send(function(user) {
        // 對新用戶執(zhí)行某些操作
    });

マイクロ最適化はパフォーマンスの最適化であり、通常はほとんど影響を與えません。ほとんどの場合、それらはより低いパフォーマンスの等価物ほど読みやすいものではありません。

function getApiUrl() { /* ... */ }
function setRequestMethod() { /* ... */ }
function findItemsById(n) { /* ... */ }
function hideSearchForm() { /* ... */ }

JavaScriptコンパイラは、私たちのコードの最適化に非常に優(yōu)れており、常に改善しています。最適化されていないコードと最適化されたコードの違いが明らかでない限り（通常、數(shù)千または數(shù)百萬の操作の後）、読みやすいコードを選択することをお勧めします。

非コード

これは皮肉ですが、コードを読みやすくするためのより良い方法は、実行されない構(gòu)文を追加することです。それを非コードと呼びましょう。

スペース

すべての開発者が他の開発者にそれを提供しているか、特定のWebサイトの圧縮コードをチェックしていると確信しています - ほとんどのスペースが削除されているコードです。初めてこれに遭遇するのは非常に驚くべきことかもしれません。デザインやタイポグラフィなどの視覚蕓術(shù)のさまざまな分野では、空白が充填と同じくらい重要です。 2つの間に微妙なバランスを見つける必要があります。このバランスの認識は、企業(yè)、チーム、開発者によって異なります。幸いなことに、一般的にによって認識されるいくつかのルールがあります。

インデントブロックの含有量、
• 追加のラインブレークを使用して、コードセクションを分離できます。
他のルールは、一緒に働く人と議論する必要があります。同意するコードスタイルに関係なく、一貫性が重要です。

var element = document.getElementById('body'),
    elementChildren = element.children,
    elementChildrenCount = elementChildren.length;

// 定義一組顏色時，我在變量前加“color”前綴
var colorBackground = 0xFAFAFA,
    colorPrimary = 0x663399;

// 定義一組背景屬性時，我使用 background 作為基準
var backgroundColor = 0xFAFAFA,
    backgroundImages = ['foo.png', 'bar.png'];

// 上下文可以改變一切
var headerBackgroundColor = 0xFAFAFA,
    headerTextColor = 0x663399;

スペースと同様に、コメントはコードにいくつかのスペースを提供し、コードに詳細を追加できるようにするための優(yōu)れた方法です。表示にコメントを追加してください：

• 解決されたエラーまたは例外と利用可能なソースを修正しました。

var URI_ROOT = window.location.href;

// 從 API 加載用戶數(shù)據(jù)
var getUsersRequest = new XMLHttpRequest();
getUsersRequest.open('GET', '/api/users', true);
getUsersRequest.addEventListener('load', function() {
    // 對用戶執(zhí)行某些操作
});

getUsersRequest.send();

//---------------------------------------------------
// 不同的功能從這里開始。也許
// 這是一個分成文件的時機。
//---------------------------------------------------

// 從 API 加載帖子數(shù)據(jù)
var getPostsRequest = new XMLHttpRequest();
getPostsRequest.open('GET', '/api/posts', true);
getPostsRequest.addEventListener('load', function() {
    // 對帖子執(zhí)行某些操作
});

getPostsRequest.send();

インラインドキュメント

オブジェクト指向ソフトウェアを作成する場合、通常のコメントのようなインラインドキュメントは、コードに呼吸スペースを提供できます。また、屬性または方法の目的と詳細を明確にするのにも役立ちます。多くのIDはプロンプトにそれらを使用し、生成されたドキュメントツールもそれらを使用します！理由が何であれ、ドキュメントを書くことは優(yōu)れた習(xí)慣です。

// 從 API 加載用戶數(shù)據(jù)
function getUsers(callback) {
    var getUsersRequest = new XMLHttpRequest();
    getUsersRequest.open('GET', '/api/users', true);
    getUsersRequest.addEventListener('load', function() {
        callback(JSON.parse(getUsersRequest.responseText));
    });

    getUsersRequest.send();
}

// 從 API 加載帖子數(shù)據(jù)
function getPosts(callback) {
    var getPostsRequest = new XMLHttpRequest();
    getPostsRequest.open('GET', '/api/posts', true);
    getPostsRequest.addEventListener('load', function() {
        callback(JSON.parse(getPostsRequest.responseText));
    });

    getPostsRequest.send();
}

// 由于命名正確，因此無需閱讀實際函數(shù)即可輕松理解此代碼
// getUsers(function(users) {
//     // 對用戶執(zhí)行某些操作
// });
// getPosts(function(posts) {
//     // 對帖子執(zhí)行某些操作
// });

コールバックの問題

イベントと非同期呼び出しはJavaScriptの強力な機能ですが、通常、コードの読み取りが難しくなります。

非同期コールは通常、コールバックを使用して提供されます。時々、それらを順番に実行するか、すべての非同期呼び出しが準備ができているのを待ちます。

function fetchJson(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.addEventListener('load', function() {
        callback(JSON.parse(request.responseText));
    });

    request.send();
}

// 下面的代碼仍然很容易理解
// 無需閱讀上面的函數(shù)
fetchJson('/api/users', function(users) {
    // 對用戶執(zhí)行某些操作
});
fetchJson('/api/posts', function(posts) {
    // 對帖子執(zhí)行某些操作
});

Promiseオブジェクトは、ES2015（ES6とも呼ばれます）で導(dǎo)入され、両方の問題を解決しました。ネストされた非同期リクエストを平らにすることができます。

function HttpRequest(url) {
    this.request = new XMLHttpRequest();

    this.body = undefined;
    this.method = HttpRequest.METHOD_GET;
    this.url = url;

    this.responseParser = undefined;
}

HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';

HttpRequest.prototype.setMethod = function(method) {
    this.method = method;
    return this;
};

HttpRequest.prototype.setBody = function(body) {
    if (typeof body === 'object') {
        body = JSON.stringify(body);
    }

    this.body = body;
    return this;
};

HttpRequest.prototype.setResponseParser = function(responseParser) {
    if (typeof responseParser !== 'function') return;

    this.responseParser = responseParser;
    return this;
};

HttpRequest.prototype.send = function(callback) {
    this.request.addEventListener('load', function() {
        if (this.responseParser) {
            callback(this.responseParser(this.request.responseText));
        } else {
            callback(this.request.responseText);
        }
    }, false);

    this.request.open(this.method, this.url, true);
    this.request.send(this.body);
    return this;
};

他のコードを?qū)毪筏蓼筏郡?、これは正しく説明しやすいです。 Promiseの詳細はこちらをご覧ください：JavaScriptは非同期（そして素晴らしい）になります

es6/es2015

new HttpRequest('/users')
    .setResponseParser(JSON.parse)
    .send(function(users) {
        // 對用戶執(zhí)行某些操作
    });

new HttpRequest('/posts')
    .setResponseParser(JSON.parse)
    .send(function(posts) {
        // 對帖子執(zhí)行某些操作
    });

// 創(chuàng)建一個新用戶
new HttpRequest('/user')
    .setMethod(HttpRequest.METHOD_POST)
    .setBody({
        name: 'Tim',
        email: 'info@example.com'
    })
    .setResponseParser(JSON.parse)
    .send(function(user) {
        // 對新用戶執(zhí)行某些操作
    });

function getApiUrl() { /* ... */ }
function setRequestMethod() { /* ... */ }
function findItemsById(n) { /* ... */ }
function hideSearchForm() { /* ... */ }