Javascript Clean Code

クリーンコード

Robert C. Martins - Clean Code
参考資料

へんすう

1.有意な変数名

yyyymmdstrではなくcurrentDate

2.同じ語彙を使う

getUserInfo ---------------------- getUserInfo
getClientData---------getUserDataではなく
getCustomerRecord --------------getUserRecord

3.検索可能な名前

割引(price,2000)ではなく割引(price,FIXED DISCOUNT AMOUNT)
ツール(buddy.jsやESLintなど)を使用すると便利です

4.目的を表す変数

안 좋은 예
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);

좋은 예
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

Regexは文字列で何かを検索する正規表現のようです.
city zipcode、アドレス[1]を見つけます.address[2]に格納されているコードのようです
しかしaddress[1]、address[2]の代わりにcity、zipcodeなどの変数名を使うのが良いようですか?

自分にしか見えないネーミングを避ける。

l代替location

5.基本パラメータを書く

関数に条件文を書くか、ショートテクニックを使用してデフォルト値を与えるよりも
関数を宣言するときは、パラメータのデフォルト値を設定したほうがいいです.

n.関数

1.関数パラメータは2個以下

より多くのパラメータを持つ関数は、多くの役割を与えられています.

2.関数名が正確である

안 좋은 예
function AddToDate(date, month) {
  // ...
}
const date = new Date();
AddToDate(date, 1);

좋은 예
function AddMonthToDate(date, month) {
  // ...
}
const date = new Date();
AddMonthToDate(date, 1);

悪い例を挙げると、関数呼び出し時のコードだけを見ていると、dateに何が追加されているのか分かりません.

関数は1つのアクションしかできません。

関数は単一の動作を抽象化する必要があります。

実は、この2つを試してみないと分からないかもしれません.
オブジェクト向けの5つの原則に似ていますか?

3.コードXを繰り返す

冗長コードがある場合は、関数、モジュール、クラスを使用します.
まず縛ってから抽象的にする
関数名を使ってコメントしているような気がします

4. Object.assignを使用したデフォルトオブジェクトの作成

안 좋은 예
const menuConfig = {
  title: null,
  body: 'Bar',
  buttonText: null,
  cancellable: true
};

function createMenu(config) {
  config.title = config.title || 'Foo';
  config.body = config.body || 'Bar';
  config.buttonText = config.buttonText || 'Baz';
  config.cancellable = config.cancellable !== undefined ? config.cancellable : true;
}

createMenu(menuConfig);

좋은 예
const menuConfig = {
  title: 'Order',
  // 유저가 'body' key의 value를 정하지 않았다.
  buttonText: 'Send',
  cancellable: true
};

function createMenu(config) {
  config = Object.assign({
    title: 'Foo',
    body: 'Bar',
    buttonText: 'Baz',
    cancellable: true
  }, config);

  // config는 이제 다음과 동일합니다: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
  // ...
}

createMenu(menuConfig);

何を言ってるんだ?

5.パラメータifelseは使用しない

パラメータとしてifelse自体が1つ以上の役割を果たす.
ifとelseでそれぞれ関数を構築する

6.グローバル関数Xの使用

グローバル関数を使ったことがないので分かりませんが...
グローバル環境を使用する場合、別のライブラリを同時に呼び出すと競合します.
グローバル継承を使用する場合は、安全に使用できます.

7.命令型というより関数型

8.条件文はカプセル化

条件文を単独で関数に書く
これは簡単ですが、そこまでしなければなりませんか?そんな感じがしたら.

否定条件文X

条件文の作成は極力避ける

多形性を利用してifゲートを使わなくてもいいです.
各条件は継承とみなすことができます

デッドコードと書かないコードを削除します。

コメント

議長は謝罪すべきだ.良いコード自体がそう言っています.

バージョンの管理ツールがあり、コードを書く必要もなく、コード記録を残す必要もありません.

それ以外は

設計マニュアル

を読む

オブジェクト向け5原則