编写更强大的 JavaScript：7 个最佳实践

在Medium上找到我

1. 使用工厂函数

如果你不知道工厂函数是什么，它只是一个返回对象的函数（不是类或构造函数）。这个简单的概念使我们能够利用 JavaScript 及其特性来创建强大而健壮的应用程序。

重要的是要知道，当使用关键字调用它们时，它们不再是工厂函数new。

为什么是工厂函数？

工厂函数可用于轻松生成对象实例，而无需与类或新关键字有任何关系。

它的本质含义是，它们最终被视为函数，这意味着它们可以用来组合对象、函数，甚至是 Promise。这意味着你可以将工厂函数混合搭配在一起，创建一个增强型工厂函数，然后继续与其他函数或对象组合，创建更进一步增强的函数。可能性无穷无尽。

当我们考虑到这一点并将其与良好的代码实践相结合时，它就真正开始闪耀。

以下是工厂函数的一个简单示例：

function createFrog(name) {
  const children = []

  return {
    addChild(frog) {
      children.push(frog)
    },
  }
}

const mikeTheFrog = createFrog('mike')

当你充分使用工厂函数后，你会开始意识到，与类构造函数相比，它具有更强的可复用性。这可以减少代码量，由于工厂函数最终返回任意对象，因此重构起来也更容易，并且代码之间的管理也更加轻松。

2. 编写构造函数时在 .prototype 上添加方法

如果您是 JavaScript 新手，那么本节内容对您来说可能有点新，就像我使用 JavaScript 的前两年经历一样。

（请记住，这不适用于类，因为类已经将方法附加到它们的原型上。）

以下是构造函数的示例：

function Frog(name, gender) {
  this.name = name
  this.gender = gender
}

Frog.prototype.leap = function(feet) {
  console.log(`Leaping ${feet}ft into the air`)
}

为什么要这样做，而不是像下面的例子那样直接附加 leap 方法？

function Frog(name, gender) {
  this.name = name
  this.gender = gender

  this.leap = function(feet) {
    console.log(`Leaping ${feet}ft into the air`)
  }
}

当我们将方法直接附加到原型上时，它们会在构造函数创建的所有实例之间共享。

换句话说，使用上一个例子，如果我们创建了三个独立的 Frog（来自this.leap = function() {...}），那么最终会创建三个独立的副本。这是一个问题，因为 leap 方法将始终保持不变，并且不需要为其实例创建自己的副本。

最终，这会导致性能下降，而这种情况本来是可以避免的。this.name 和 this.gender 属性需要在实例上定义，因为在现实生活中，青蛙可能有自己的名字和性别，所以在实例级别创建它们是合理的。

以下是流行的请求包所使用的这种方法的示例。

3. 区分时使用常规的 .type 属性

这种做法非常有效，如今已被广泛使用。如果你是一名 React 开发者，你可能已经每天都见过这种做法，尤其是在使用Redux的时候。

使用类似的方法也使您的开发流程变得非常容易，因为它甚至可以非常好地记录自身：

function createSpecies(type, name, gender) {
  if (type === 'frog') {
    return createFrog(name, gender)
  } else if (type === 'human') {
    return createHuman(name, gender)
  } else if (type == undefined) {
    throw new Error('Cannot create a species with an unknown type')
  }
}

const myNewFrog = createSpecies('frog', 'sally', 'female')

4. 使用 TypeScript

TypeScript已被 JavaScript 社区广泛采用，因为它能够为类型安全提供强大的防御，并且能够帮助我们在错误发生之前发现它们。

使用 TypeScript 将使您的编译器能够在代码运行之前检测并显示有关代码中任何潜在错误的警告。

但这远非 TypeScript 在任何情况下都适用的全部理由。TypeScript 的一大优点是，它允许你在主流浏览器支持 JavaScript 的新功能之前就使用它们，因为它们会被编译为早期版本的 JavaScript，最终能够在旧版浏览器中运行。

5.编写测试

如果你正在开发一个项目，并计划认真对待它，那么进行测试几乎是必须的，这样你的应用才能更可预测、更不容易出错，并且能够更好地应对未来的变化。换句话说，如果你想让你的项目面向未来，最好的方法就是在整个代码中建立测试。你在代码中进行的测试越多，当它部署到生产环境中时，你就越有信心。

测试最棒的地方是什么？它能帮你在 bug 出现之前就发现它——难道没人想要这种能力吗？我当然想要！这就是我在项目中编写单元测试的原因。

您可以通过阅读这篇关于测试框架和工具的文章来了解当今正在使用的工具类型。

6. 保持功能尽可能简单

众所周知，在 JavaScript 中显然可以拥有执行多项操作的大型函数。

当你刚开始编程时，这或许是一件好事——我知道，当我写出能正常工作的大段代码时，我会感觉非常自在。这对我来说意义非凡，它给了我很大的信心，让我看到自己的任何代码都能顺利运行，更不用说我写的是巨大的代码块了。天哪，那时候的我真是太天真了！

如果你想写出更易于维护、更简洁、更不容易出错的代码，最好尽量保持代码简洁精简。代码越简单，就越容易单独测试。

如果你更喜欢函数式编程范式，这一点尤其重要。众所周知，函数应该做一件事，而且必须做好。

7.try/catch使用JSON.parse或JSON.stringify

在 JavaScript 中，当我们将 JSON 作为输入传递给JSON.parse方法时，它期望一个格式正确的 JSON 作为第一个参数。如果格式不正确，则会抛出 JSON 解析错误。

JSON 解析错误的风险在于，接收无效的 JSON 会导致应用崩溃。我最近在工作中遇到过这种情况：我们的一个 Web 项目失败了，因为另一个内部包没有用JSON.parsetry/catch 语句包装一个 JSON 对象。这最终导致网页无法访问，除非内部包修复了该错误，否则无法解决。这是因为 JavaScript 运行时崩溃了。

SyntaxError: Unexpected token } in JSON at position 107

您不应该总是期待有效的 JSON 输入，因为它可能会接收像>字符这样的奇怪字符，这在今天并不罕见。

结论

这篇文章就到这里。希望您觉得这篇文章有价值。敬请期待后续内容！

在Medium上找到我