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

灰太狼 2023-09-28 08:08 154阅读 0赞

## [\#][Link 1]有什么问题？ ##

当谈到编写好的代码时，您可以深入探讨关于好的代码**到底**是什么样子以及您应该遵循哪种[编程范式的高度哲学讨论。][Link 2]

不过，本文（和视频，见上文）**不会**参与这些讨论 - 相反，我们将深入探讨三种非常重要的编写代码的方式并进行比较。

*  程序化编程
 *  面向对象编程
 *  函数式编程

这三种方法将在 JavaScript 的示例中展示，但它们适用于大多数编程语言（尽管有些语言会将您推向某种范式 - JavaScript 没有）。

您可以在本页顶部的视频中找到这三种方法的详细比较！在那里，我们构建了一个简单的虚拟网站三次——每种方法一次。

此外，您还可以查看我的[JavaScript - 完整指南][JavaScript -]课程，您可以从头开始详细学习 JavaScript（内容超过 45 小时！）。

## [\#][Link 3]程序化编程 ##

程序化编程就是编写“程序”。你可以这样翻译：“写下你的程序应该按顺序执行的步骤”。

这是一个简短的示例（虚拟代码）：

const button = document.querySelector('button');
    
    const doSomething = () => {
      // do something...
    }
    
    button.addEventListener('click', doSomething);

在这个片段中，我们有四个步骤：

1.  访问第一个`<button>`元素并将其存储在常量 ( `button`)
2.  定义一个函数`doSomething`
3.  向按钮添加事件侦听器并`doSomething`在`click`事件上运行
4.  执行里面的任何代码`doSomething`

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

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

## [\#][Link 4]面向对象编程 ##

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

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

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

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

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

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

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

## [\#][Link 5]函数式编程 ##

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

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

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

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

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

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

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

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

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

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

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

## [\#][Link 6]哪种方法最好？ ##

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

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

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

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

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

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

[Link 1]: https://academind.com/tutorials/functional-vs-oop-vs-procedural#what-s-the-problem
[Link 2]: https://en.wikipedia.org/wiki/Programming_paradigm
[JavaScript -]: https://acad.link/js
[Link 3]: https://academind.com/tutorials/functional-vs-oop-vs-procedural#procedural-programming
[Link 4]: https://academind.com/tutorials/functional-vs-oop-vs-procedural#object-oriented-programming
[Link 5]: https://academind.com/tutorials/functional-vs-oop-vs-procedural#functional-programming
[Link 6]: https://academind.com/tutorials/functional-vs-oop-vs-procedural#which-approach-is-best