通常很难理解长功能。虽然OOP中有一些技术（面向对象的编程）使其更小，但一些开发人员更喜欢在一个地方看到整个代码。在大函数中拥有所有代码并不一定是不好的。实际上是那个功能中的凌乱，不清楚的代码。幸运的是，您可以做一些改进的事情。

提取共同的功能

如果您的长函数包含您已经写过的一些代码）。

这样的示例是将像slugify这样的实用程序函数转换为slug。如果您在代码中的多个位置使用它，请将其提取到新功能中。

// util.js

export function slugify(aString) {
 // convert aString to a slug and return it
}

import { slugify } from './util.js'

function aVeryLongFunction() {
  // ...

  // At this point you needed to slugify some text
  const slug = slugify(title)

  // ...
}

即使您将所有常见的零件提取到辅助功能之后，您的功能仍然很长。在这种情况下，您应该怎么做？

首先，您需要在块中分组相关的代码，然后选择以下两个选项之一：

• 添加注释以解释每个代码块在做什么。
• 将每个代码块提取到嵌套功能中。

这更像是个人喜好，我更喜欢后者，因为首先，我喜欢阅读清晰，明确的功能名称而不是注释，其次，我可以使用新功能的额外范围来更简化嵌套功能。

分组相关代码块

通常，我们按照其运行的顺序编写代码。但是有时有一件事远非其相关代码：变量。一些开发人员更喜欢在函数开头编写所有变量，以显示该函数中将使用哪些变量。其他开发人员更喜欢将它们尽可能靠近代码块编写。

两个选择都不错。这里重要的是要在整个代码库中保持一致。

我想在这里做的另一个步骤是将每个代码块与一些空间分开，以使区分不同的块。

评论方法

将相关代码块分开后，是时候告诉读者每个块在做什么。您可以通过在每个块上方写一个干净的解释来轻松完成此操作。

function aVeryLongFunction() {
  // [explain what it's doing with comments]
  // ...
  // ...

  // [explain what it's doing with comments]
  // ...
  // ...

  // [explain what it's doing with comments]
  // ...
  // ...
}

如果您喜欢写评论并喜欢这种方法，那很好。这种方法没有错，它实际上是在非常流行的开源项目中使用的。

，如果您不喜欢注释，则可以将每个功能提取到嵌套功能中。

嵌套功能方法

这种方法的最终结果与上一个方法相似，但是您没有编写评论，而是将每个块提取到长函数中的嵌套功能中。提取嵌套功能和常规功能之间的主要区别在于，在嵌套功能中，您可以访问长函数的范围。这意味着，您无需将任何参数传递给它。

这里要注意的一个重要的事情是，如果您选择提取嵌套功能，则必须将共享的本地变量保留在提取的功能之外，以使其可用于其他嵌套功能。

应用它后，您的代码看起来像这样：

function aVeryLongFunction() {
  function doThis() {}
  function thenDoThis() {}
  function andThenThis() {}

  // Define all your shared local variables here.
  // All nested functions above should access them
  // directly without passing them

  // Then start calling each one in order
  doThis()
  thenDoThis()
  andThenThis()
}

使用这种方法，我可以通过清晰的，分开的步骤阅读该功能的所作所为。如果我需要查看如何实现每个步骤，我将转到相关功能。

如果您喜欢这篇文章，请查看我所有有关Coddip的其他文章，这是可以提高JavaScript代码质量的地方。