JavaScript重構技巧 — 函數和類

時間 2021-04-21

標籤 javascript 前端 java git github 面試算法編程數組微信欄目 JavaScript 简体版

原文原文鏈接

John Au-Yeung
來源：medium
譯者：前端小智

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。javascript

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。前端

JavaScript 是一種易於學習的編程語言，編寫運行並執行某些操做的程序很容易。然而，要編寫一段乾淨的JavaScript 代碼是很困難的。java

在本文中，咱們將介紹一些與清理 JavaScript 函數和類有關的重構思想。git

不要直接對參數賦值

在使用參數以前，咱們應該刪除對參數的賦值，並將參數值賦給變量。github

例如，咱們可能會寫這樣的代碼：面試

const discount = (subtotal) => {
  if (subtotal > 50) {
    subtotal *= 0.8;
  }
}

對比上面的代碼，咱們能夠這樣寫：算法

const discount = (subtotal) => {
  let _subtotal = subtotal;
  if (_subtotal > 50) {
    _subtotal *= 0.8;
  }
}

由於參數有多是經過值或者引用傳遞的，若是是引用傳遞的，直接負值操做，有些結果會讓感到困惑。編程

本例是經過值傳遞的，但爲了清晰起見，咱們仍是將參數賦值給變量了。數組

用函數替換方法

咱們能夠將一個方法變成本身的函數，以便全部類均可以訪問它。微信

例如，咱們可能會寫這樣的代碼：

const hello = () => {
  console.log('hello');
}
class Foo {
  hello() {
    console.log('hello');
  }
  //...
}
class Bar {
  hello() {
    console.log('hello');
  }
  //...
}

咱們能夠將hello方法提取到函數中，以下所示：

const hello = () => {
  console.log('hello');
}
class Foo {
  //...
}
class Bar {
  //...
}

因爲hello方法不依賴於this，而且在兩個類中都重複，所以咱們應將其移至其本身的函數中以免重複。

替代算法

相對流程式的寫法，咱們想用一個更清晰的算法來代替，例如，咱們可能會寫這樣的代碼：

const doubleAll = (arr) => {
  const results = []
  for (const a of arr) {
    results.push(a * 2);
  }
  return results;
}

對比上面的代碼，咱們能夠這樣寫：

const doubleAll = (arr) => {
  return arr.map(a => a * 2);
}

經過數組方法替換循環，這樣doubleAll函數就會更加簡潔。

若是有一種更簡單的方法來解決咱們的需求，那麼咱們就應該使用它。

移動方法

在兩個類之間，咱們能夠把其中一個類的方法移動到另外一個類中，例如，咱們可能會寫這樣的代碼：

class Foo {
  method() {}
}
class Bar {
}

假如，咱們在 Bar 類使用 method 的次數更多，那麼應該把 method 方法移動到 Bar 類中， Foo 若是須要在直接調用 Bar 類的中方法便可。

class Foo {
}
class Bar {
  method() {}
}

移動字段

除了移動方法外，咱們還能夠移動字段。例如，咱們可能會寫這樣的代碼：

class Foo {
  constructor(foo) {
    this.foo = foo;
  }
}
class Bar {
}

跟移動方法的緣由相似，咱們有時這麼改代碼：

class Foo {
}
class Bar {
  constructor(foo) {
    this.foo = foo;
  }
}

咱們能夠將字段移至最須要的地方

提取類

若是咱們的類很複雜而且有多個方法，那麼咱們能夠將額外的方法移到新類中。

例如，咱們可能會寫這樣的代碼：

class Person {
  constructor(name, phoneNumber) {
    this.name = name;
    this.phoneNumber = phoneNumber;
  }
  addAreaCode(areaCode) {
    return `${areaCode}-${this.phoneNumber}`
  }
}

咱們能夠這樣重構：

class PhoneNumber {
  constructor(phoneNumber) {
    this.phoneNumber = phoneNumber;
  }
  addAreaCode(areaCode) {
    return `${areaCode}-${this.phoneNumber}`
  }
}
class Person {
  constructor(name, phoneNumber) {
    this.name = name;
    this.phoneNumber = new PhoneNumber(phoneNumber);
  }
}

上面咱們將Person類不太相關的方法addAreaCode 移動了本身該處理的類中。

經過這樣作，兩個類只作一件事，而不是讓一個類作多件事。