あなたが見逃したJavaScript-2.コード品質

「あなたが見逃したjavascript」シリーズ学習モダンJavascriptチュートリアルは、筆者がjavascriptについて理解していないか、混同しているところをまとめた.すべてのソースは上記のサイトにあります.
このプレゼンテーションでは、コードスタイルやコメントなど、コード品質の面で漏れやすい面について説明します.
コーディングスタイル

ほとんどのjavascriptプロジェクトで開いているカッコは、新しい行ではなく、対応するキーワードの同じ行に「伊蚊」スタイルで作成されます.

if (condition) {
  // 코드 1
  // 코드 2
  // ...코드 n...
}

通常、コードの最大長は80文字または120文字に制限されます.

1つの関数に複数の論理ブロックを含めることができます.各論理ブロック間に垂直にインデントされた空の行を追加してコードを区切ることで、以下に示すようにコードの可読性を向上させることができる.
読みやすいコードを生成するには、縦インデントせずに9行以上のコードを連続的に書かないでください.

function pow(x, n) {
  let result = 1;
  //              <--
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  //              <--
  return result;
}

helper関数を複数作成して使用している場合は、まずコードを作成し、宣言によってコードを変更したほうがいいです.
コードが「何をするか」を考えてコードを読むので、コードが最初に現れるのは自然です.

let elem = createElement();
setHandler(elem);
walkAround();

// --- 헬퍼 함수 ---
function createElement() {
  ...
}
 
function setHandler(elem) {
  ...
}
   
function walkAround() {
  ...
}

コメント

良いコードには「コメント」が多すぎてはいけません.コメントを必要とせず、コード自体だけでコードが何をしているのか簡単に理解できます.
つまり、コメントには「コードがどのように機能しているか」や「コードが何をしているか」という説明は含まず、コードを記述できない場合や、コード自体だけでは何をしているかを十分に判断できない場合にのみコメントを追加する必要があります.

良いコメントは、次の情報を含むコメントです.
1.アーキテクチャに関するコメント
詳細な構成部品の概要、構成部品間のインタラクションの説明、およびコンテキストドライバをコメントに流すことをお勧めします.これらのコメントは、コードを理解するのに役立ちます.
2.この方法で問題を解決する理由を説明するコメント
問題を解決する方法はたくさんありますが、私が以前書いたコードはどうしてこの方法を選んだのですか.コードにこの方法を使用して問題を解決する理由がコメントされていない場合は、コードの改善を試みたときに以前と同じ問題に遭遇し、以前のコードに戻るエラーを繰り返す可能性があります.
ソリューションを含む注釈は非常に重要な役割を果たします.これは、以前に犯したエラーを防止するためのインジケータです.
3.この機能がどこで使用されているかを説明する微妙な機能
直感とは逆の微妙な動作を実行するコードがある場合は、コメントしたほうがいいです.これは、後続の再構築時に迅速にキャプチャおよび変更できるためです.
4.関数の使用例とパラメータ情報を含むコメント
JSDocという特殊な構文を使用すると、関数に関するドキュメントを簡単に作成できます.この構文には、関数の使用例(使用例)、パラメータ、および戻り値情報が含まれます.

/**
  * x를 n번 곱한 수를 반환함
  *
  * @param {number} x 거듭제곱할 숫자
  * @param {number} n 곱할 횟수, 반드시 자연수여야 함
  * @return {number} x의 n 거듭제곱을 반환함
  */
function pow(x, n) {
  ...
}

テストの自動化
ソースWebサイトでは、Mochaテストフレームワークの使用方法について簡単に説明します.本稿の目的と一致しないため、自動化テストのいくつかのポイントについてのみ説明します.

コードを手動で再実行し、コードが私の予想通りに実行されるまでテストを行うと、いくつかのものを見逃しやすくなります.コードを変更するたびにコードを変更し、すべての使用例を考慮することはほとんど不可能です.そのためには、テストオートメーションを使用します.
テストコードが実際の動作に関連するコードとは独立している場合、テスト自動化は可能である.テストコードを使用すると、異なる条件で関数を実行できます.この場合、実行結果が所望の結果と同じかどうかを比較できます.

テスト主導の開発方法は主に2種類ある:BDDとTDD.
多くのTDDを聞いたことがあると思います.これはテスト駆動開発の略で、プロセスベースの方法で、まずテストを作成し、テストに合格したコードを書きます.テストの単位も非常に小さく、作成した関数のほとんどがテストターゲットに含まれています.
BDDはBehavior Driven Developmentの略で、TDDに基づいており、TDDとはあまり変わらない.
しかし、TDDをプロジェクトに導入すると、作成した関数のほとんどがテストターゲットに含まれ、現在使用されている機能とは大きな差があります.BDDは開発の観点からテストを作成するのではなく、シナリオに基づいてテストケースを作成することでTDDの欠点を緩和する方法です.BDの詳細については、李尚禹のブログを参照してください.
テストされた

コードは、より良いアーキテクチャを作成することができます.テストを作成するには、関数の動作、入力値、出力値を定義し、実装を開始します.コードの作成は定義された内容をサポートしなければならないため,実装が開始された瞬間から良好なアーキテクチャが得られている.

ポリエステル

バベル(Barbel)は典型的なJavaScript変換器であり、現代のJavaScriptコードを古い基準に合致するコードに変換する.ここで、翻訳プログラムとは、あるプログラミング言語で記述されたプログラムのソースコードを入力として受信し、別のプログラミング言語で同等のソースコードを生成するコンパイラを指す.

JavaScript標準ドキュメントに新しい構文が追加された場合、変換プログラムはこの新しい構文を古い基準に合致するコードに変更します.ただし、以前にない新しい組み込み関数が標準に追加されている場合、変換プログラムは内部関数自体を定義できないため、開発者はリストの定義を自分で読み、自分で実行する必要があります.
開発者は、最新の基準を満たすようにスクリプトに新しい関数を直接追加または変更できますが、完了したスクリプトをインポートしてバーベルに適用することもできます.これらのスクリプトは、「ポリラインフィル」(polyfill)と呼ばれます.代表的なポリエステルにはcore-jsがあります.
Babelを使用するときによく使用するプリセット'@babel/prefet-env'については、core-jsマルチセグメント文字を使用するには、usebiltinsというプロパティを使用することもできます.