Functional vs OOP vs Procedural三种方法 JavaScript 示例

这段代码片段看起来并不壮观 - 事实并非如此。这是非常简单的原生 JavaScript 代码。确实，当你在学习 JS 的时候，你很可能会很早就写出这样的代码。

它可以被称为“程序”，因为我们有多个相互执行的步骤。当然，所有程序都是这种情况，但我们不会以任何特殊方式对任何逻辑进行分组——除了我们用来为我们的事件doSomething提供一些“按需”代码的函数。click

如果我们遵循面向对象的风格，我们可以通过以下方式重写（并且可以说过度设计这个简单的示例）：

class InputArea {
  constructor() {
    this.button = document.querySelector('button');
    this.button.addEventListener('click', doSomething);
  }

  doSomething() {
    // do something
  }
}

new InputArea();

如前所述：这绝对是过度设计的。但这只是一个例子——在更大的应用程序中，通过将代码分组为类和对象来构建代码可以使代码更易于阅读和管理。页面顶部的视频已经展示了一个更好的例子（即一个更复杂的项目）。

面向对象编程 (OOP) 背后的理念是将代码组织在类/对象中（对象基于类）。

您的数据存储在属性中，您的逻辑存储在方法中。紧密协作的属性和方法存在于同一个类中。

OOP 的一个优点是您的代码类似于现实世界的示例（我们一直在考虑现实世界中的对象），并且属于一起的代码会自动组合在一起。

不利的一面是，您有编写和使用类的开销，并且this在某些情况下关键字可能存在一些问题。毕竟是 JavaScript。

那么什么是函数式编程呢？最好的方法？

不——它只是另一种结构化和组织代码的方式。

这是同样的例子 - 再次过度设计。

function findElementOnPage(elementTag) {
  return document.querySelector(elementTag);
}

function doSomething() {
  // do something
}

function connectInput() {
  const btn = findElementOnPage('button');
  btn.addEventListener('click', doSomething);
}

connectInput();

您可以以不同的方式编写它，您可以添加更多（或更少）功能。

函数式编程背后的想法是将代码组织成多个函数，其中每个函数独立工作。

最后一部分很重要：函数应该是无状态的和纯粹的，它们也不应该引起副作用（例如 *** 作 DOM）。

有时，副作用是无法避免的（这没关系），但您应该针对接受一些输入（=> 参数）并产生/返回可靠输出的函数。

喜欢findElementOnPage。当然，这有点多余的功能，但您可以在其中做更多的事情，而不仅仅是选择一个元素。例如，您可以添加if检查以验证是否找到元素（否则抛出错误）。

findElementOnPage是一个纯函数 - 对于相同的输入，它总是会产生相同的输出。至少只要在页面上找到一个元素 - 因此您可能会争辩说它实际上具有副作用（它不会 *** 纵 DOM，但会触及它）。

函数式方法的优点是你有一堆高度可重用（和可管理）的函数，它们几乎没有额外的依赖关系。这使您的代码非常易于维护和理解。

就像 OOP 方法一样，这种方法对于非常简单的用例（如上面的示例）可能是一种过度杀伤，但它确实可以在更复杂的应用程序中大放异彩。

那么哪种方法最好，您应该使用哪种方法？

这里没有赢家——这三种方法都是可行的并且可以很好地使用。这取决于您喜欢哪种方法。

你获得的经验越多，你就越能确定哪种代码风格最适合你正在从事的特定项目。

通常，您最终会使用 OOP 或函数式风格，因为过程式风格在更大的应用程序中可能会达到其极限——您通常希望在那里拆分和组织您的代码。

当然也有混合方法——你可以构建一个应用程序，在其中使用一些类和一些函数（在类之外）。这对于一些宗教狂热者来说可能很难，但如果它对你（和你的团队）有用，你当然也可以采用这种混合风格。

希望这可以稍微澄清这三种方法，并在您未来的项目中帮助您。与往常一样，分享您的任何反馈！:-)