乐趣区

JavaScript重构技巧-函数和类

jiezi

John Au-Yeung
来源：medium
译者：前端小智

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588… 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎 Star 和完善，大家面试可以参照考点复习，希望我们一起有点东西。

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

在本文中，我们将介绍一些与清理 JavaScript 函数和类有关的重构思想。

不要直接对参数赋值

在使用参数之前，我们应该删除对参数的赋值，并将参数值赋给变量。

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

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 移动了自己该处理的类中。

通过这样做，两个类只做一件事，而不是让一个类做多件事。

总结

我们可以从复杂的类中提取代码，这些复杂的类可以将多种功能添加到自己的类中。

此外，我们可以将方法和字段移动到最常用的地方。

将值分配给参数值会造成混淆，因此我们应该在使用它们之前将其分配给变量。

代码部署后可能存在的 BUG 没法实时知道，事后为了解决这些 BUG，花了大量的时间进行 log 调试，这边顺便给大家推荐一个好用的 BUG 监控工具 Fundebug。

原文：https://levelup.gitconnected….

交流

文章每周持续更新，可以微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎 Star 和完善，大家面试可以参照考点复习，另外关注公众号，后台回复 福利，即可看到福利，你懂的。

退出移动版