JavaScript的重构技巧

朱雀 2020-07-01 18:38 763阅读 0赞

# JavaScript的重构技巧

JavaScript 是一种易于学习的编程语言，编写运行并执行某些操作的程序很容易。然而，要编写一段干净的JavaScript 代码是很困难的。

在本文中，我们将介绍一些优化条件表达式相关的重构思路。

## 分解条件表达式

我们可以将长的条件表达式分解成有命名的短小条件表达多，这样有利于阅读。例如我们可能会写这样的代码：

```js
let ieIEMac = navigator.userAgent.toLowerCase().includes("mac") && navigator.userAgent.toLowerCase().includes("ie")
```

上面的代码太过冗长了，不利于阅读，我们可以把它分解成几个短小且有名字的条件表达式，如下所示：

```js
let userAgent = navigator.userAgent.toLowerCase();
let isMac = userAgent.includes("mac");
let isIE = userAgent.toLowerCase().includes("ie");
let isMacIE = isMac && isIE;
```

## 合并条件表达式

与上面相反的，如果有多个简短的条件表达式，则可以将它们合并成一个。例如我们可能会写这样的代码：

```js
const x = 5;
const bigEnough = x > 5;
const smallEnough = x < 6;
const inRange = bigEnough && smallEnough;
```

我们可以这样合并：

```js
const x = 5;
const inRange = x > 5 && x < 6;
```

因为表达式很短，即使把它们组合在一起也不会使表达式变长，所以我们可以这样做。

## 合并重复的条件片段

如果我们在条件块中有重复的表达式或语句，则可以将它们移出。例如我们可能会写这样的代码：

```js
if (price > 100) {
  //...
  complete();
} else {
  //...
  complete();
}
```

我们可以把重复的内容移到条件表达式外面，如下所示：

```js
if (price > 100) {
  //...  
} else {
  //...  
}
complete();
```

这样，我们不必重复不必要地调用`complete`函数。

## 删除控制标志

如果我们在循环中使用了控制标志，那应该会这样代码：

```js
let done = false;
while (!done) {
  if (condition) {
    done = true;
  }
  //...
}
```

在上面的代码中，`done` 是控制标，在`condition`为`true`时，将`done`设置为`true`停止`while`循环。

相对于上面，我们可以使用`break`来停止循环，如下所示：

```js
let done = false;
while (!done) {
  if (condition) {
    break;
  }
  //...
}
```

## 用卫语句代替嵌套条件

> 卫语句就是把复杂的条件表达式拆分成多个条件表达式，比如一个很复杂的表达式，嵌套了好几层的`if-then-else`语句，转换为多个`if`语句，实现它的逻辑，这多条的`if`语句就是卫语句。

嵌套条件语句很难阅读，所以我们可以使用**卫语句**代替它们。例如我们可能会写这样的代码：

```js
const fn = () => {
  if (foo) {
    if (bar) {
      if (baz) {
        //...
      }
    }
  }
}
```

我们可以这样优化：

```js
  if (!foo) {
    return;
  }
  if (!bar) {
    return;
  }
  if (baz) {
    //...
  }
}
```

在上面的代码中，卫语句是：

```js
if (!foo) {
  return;
}
```

和

```js
if (!bar) {
  return;
}
```

如果这些条件为假，它们会提前返回函数，这样，我们就不需要嵌套了。

## 用多态替换条件

我们可以使用`switch`语句为不同种类的数据创建相同的子类，而不是使用`switch`语句对不同类型的数据执行相同的操作，然后针对对象的类型使用不同的方法。

例如我们可能会写这样的代码：

```js
class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
  getSpeed() {
    switch (this.type) {
      case ('cat'): {
        return getBaseSpeed() * 1.5
      }
      case ('dog'): {
        return getBaseSpeed() * 2
      }
      default: {
        return getBaseSpeed()
      }
    }
  }
}
```

我们可以这样重构：

```js
class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
}
class Cat extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 1.5;
  }
}
class Dog extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 2;
  }
}
```

当`switch`语句很长时，应该为不同类型的对象定制`case`块。

## 采用空对象

如果我们重复检查`null`或`undefined`，则可以定义一个代表该类的`null`或`undefined`版本的子类，然后使用它。

例如我们可能会写这样的代码：

```js
class Person {
  //...
}
```

我们可以这样重构：

```js
class Person {
  //...
}
class NullPerson extends Person {
  //...
}
```

然后，我们将`Person`设置为`null`或`undefined` 的对象属性，而不是将其设置为NullPerson实例。

这样就无需使用条件检查这些值。