ジャバスクリプト — クラスと関数

アマゾンで私の本をチェックしてくださいhttps://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
今すぐ私の電子メールリストを購読http://jauyeung.net/subscribe/
JavaScriptコードのクリーンアップは、デフォルトのパラメータとプロパティの短縮と簡単です.
この記事では、クラスと関数を作成するときにベストプラクティスを見ていきます.

神のクラスを避ける

神のクラスは、すべての知っているクラスです.クラスが主にgetメソッドとsetメソッドを使用して他のクラスからデータを取得するために使用される場合、クラスを必要としません.
それで、私たちがこのようなものを持っているならば

class Foo {
  getBar() {}
  setBar() {}
  getBaz() {}
  setBaz() {}
  getQux() {}
  setQux() {}
}

我々は、クラスを削除することができますし、直接必要なものにアクセスします.

無関係なクラスを取り除く

クラスが必要な場合は、削除する必要があります.
これはデータのみを持つクラスに適用されます.クラスにいるメンバーがあれば、代わりに別のクラスのメンバーでなければならないかどうかを考慮すべきです.

という名前のクラスを避ける

私たちは、動詞でクラスを名付けてはいけません.
例えば、

class GetFoo {
  //...
}

クラスの代わりに関数でなければなりません.

いつ関数を作成する必要がありますか？

私たちはコードをより良くするための関数を作成すべきです.以下は関数の作成理由です.

複雑さを減らす

複雑さを減らすことは、関数を作成する上で最も重要な理由の一つです.
コードを繰り返してコードサイズを最小化しないように、私たちはそれらを作成しました.
関数なしですべての手続きを書くなら、同様のコードがたくさんあります.
例えば、

const greet1 = `hi joe`;
const greet2 = `hi jane`;

そして、それを一般化する関数を作ることができます.

const greet = (name) => `hi ${name}`;
const greet1 = greet('joe');
const greet2 = greet('jane');

今すぐコールできますgreet 同様の文字列を作成する場所.

中間、わかりやすい抽象化を導入する

上記のコードも抽象化です.挨拶文字列を返すコードを一般化した.
我々は、異なる値を渡すことができますname を返し、新しい文字列を返します.

重複コードを避ける

重複コードを避けることはまた、関数を作成するのに良い理由です.
再び、上記の例からわかるように、私たちは呼び出すことができますgreet 多くの同じ文字列を作成します.
その後、我々は繰り返す必要はありませんhi どこでも.

サポートサブクラス

スーパークラスのメソッドをオーバーライドするには、サブクラスでメソッドを作成できます.
例えば、JavaScriptで次のコードを書くことができます.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} speaks`;
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }
  speak() {
    return `${super.speak(this.name)} in dog language`;
  }
}

私たちはspeak メソッドDog 呼び出しによってsuper.speak ○○.
したがって、私たちはspeak メソッドDog より簡単です.
写真でDanielle Cerullo をUnsplash

隠すシーケンス

関数は、プロシージャの実装を隠蔽するのに適しています.
たとえば、他の関数を呼び出して何かを行う関数を持つことができます.
書くことができます.

const calcWeight = () => {
  //...
}

const calcHeight = () => {
  //...
}

const calcWidth = () => {
  //...
}

const getAllDimensions = () => {
  const weight = calcWeight();
  //...
  const height = calcHeight();
  //...
  const width = calcWidth();
  //...
}

上記のコードで複数の関数を呼びました.しかし、我々のプログラムの他の部分は、彼らが呼ばれる順序を知りません.
これは、露出され、結合を低減する実装を低減する.

移植性の向上

機能はどこでも簡単に移動することができます.我々はそれを簡単にそれに依存する何かを移動することができます.

複雑なBoole‐Count試験の簡素化

長い論理式を持っているなら、自分の関数に入れなければなりません.
例えば、

const isWindowsIE = navigator.userAgent.toLowerCase().includes('windows') &&
  navigator.userAgent.toLowerCase().includes('ie');

それから、書くことによって全部を関数に入れることができます.

const isWindowsIE = () => {
  const userAgent = navigator.userAgent.toLowerCase()
  return userAgent.includes('windows') &&
    userAgent.includes('ie');
}

長い論理式よりもはるかにきれいです.

結論

Godクラス、データや振る舞いだけがすべてのクラスです.我々は両方を作成する前にミックスを持っていることを確認する必要があります.
我々は、複雑さを減らすために、重複したコードを削除し、抽象化を行う関数を作成します.
彼らは何かを作成するのに適しています.