JavaScript 设计模式

概念

设计模式可以被定义为软件工程中最常见问题的良好记录解决方案。对于开发者来说，对别人已经解决的问题绞尽脑汁是相当令人头疼的。每个开发者都渴望编写工业级代码，这些代码易于适用于不同的问题，易于维护，更具可读性和可重用性。这需要考虑适当的代码结构机制或模式，因此解决这个挑战变得至关重要。这就是设计模式通过为特定情况下出现的这些常见问题提供基础而发挥重要作用的地方。

设计模式是必需的，因为它们不会随时间变化，并且可以通过标准或高级别的应用程序进行实践。

在本教程中，我们将学习 JavaScript 中的这些设计模式。大多数 JavaScript 开发者在创建应用程序时，常常在不知不觉中与设计模式进行交互。本教程将涵盖最重要和最常用的 JavaScript 设计模式的解释和示例。

设计模式的优点

它们是最佳解决方案：设计模式被所有开发者频繁使用，因为他们知道它们会起作用。不仅如此，他们对设计模式也很熟悉，因为它们在实现之前肯定经过了多次修改。

它们可重用：设计模式呈现了一个可重用的解决方案，可以在特定情况下进行修改以解决多个问题，因为它们不能仅限于一个问题。

它们富有表现力：设计模式无需进一步解释，因为它们可以非常有效地将大问题解释成细枝末节。

它们增强沟通：熟悉设计模式的开发者可以为问题设定共同目标，这有助于他们在彼此之间就这些问题的潜在威胁和解决方案进行沟通。

无需代码重构：设计模式通常被认为是各种问题的最佳解决方案。如果一个应用程序在编写时考虑了设计模式，那么生成的解决方案被认为是唯一有效的解决方案，因此无需代码重构。

它们降低了代码库大小：作为唯一的最佳解决方案，设计模式通过以几行代码和非常小的足迹实现所需解决方案，从而节省了宝贵的空间。

既然我们已经学习了 JavaScript 设计模式的大部分基础知识，让我们通过编码示例来理解它们。

类别

JavaScript 设计模式包含各种类别。下图概述了所有存在的模式。

现在我们将使用合适的示例详细讨论这三种设计模式。

创建型设计模式

上述设计模式都与类的实例化有关。它可以通过创建类和对象创建模式的划分进一步阐述。这种设计模式处理创建机制，将类-对象复杂性优化为简单易懂的模式。复杂的设计模式需要高层次的方法和时间，而创建型设计模式可以通过有效控制类的继承和明智地使用对象的委托来完成任务，从而解决这个问题。上面图片中已经展示了一些流行的设计模式。我们来讨论一些类别。

构造函数模式

构造函数模式是 JavaScript 中最简单、现代且最受欢迎的创建型设计模式子类别之一。该模式的主要目的是促进构造函数的创建。请看下面的例子

输出

Mercedes gives 20.8 kmpl!

在此示例中，我们定义了一个具有属性 brand 和 mileage 的类/函数 Automobile。示例中使用的 getDetails() 方法将以输出中所示的格式打印汽车的给定品牌和里程。我们通过使用 new 关键字为给定属性调用构造函数方法来实例化函数/类的对象。

原型模式

原型化简单地意味着克隆。使用原型模式，我们可以在现有对象的模板基础上，通过克隆的方式实例化新对象。这之后是原型继承，以利用 JavaScript 的原生原型能力。下图和编码示例可以更好地理解这种情况。

在此示例中，我们实现了原型 cheetah 的使用，该原型随后被克隆，通过 Object.create 方法创建了一个新对象，创建了一个常量 cheetah1，其中将根据标准 ES6 流程存储 Trainer 的名称。

结构型设计模式

这种设计模式主要关注类和对象的组合或它们之间的关系。它为类和对象定义了结构化的机制，以确保如果系统的一部分发生变化，整个系统不会依赖于它而改变。它通过找出类创建模式来使用继承来组合接口，并找出对象创建模式来定义推出新功能的方式。它也包含上面图片中已经展示的各种类别。我们来讨论其中的一些。

适配器设计模式

适配器设计模式主要用于不同设计的对象在单个接口中协同工作。假设我们正在构建一个接受 JSON 结构和格式的库。我们需要一个遗留 API 以 XML 格式响应，此响应随后用于生成图表，但图表只接受 JSON 对象。因此，编写了一个适配器函数，以在需要时将此 XML 转换为 JSON。此适配器函数将使我们能够连接两种不同形式的对象。请参阅下图以供参考。

组合设计模式

它是最常用的结构型设计模式之一，我们将对象组合成树状结构，然后将这些结构树视为独立对象。考虑一个基于 jQuery 的示例，了解组合设计模式的结构。

在上面的示例中，jQuery 通过轻松访问组合，使得在选定的 DOM 节点上应用不同方法变得非常容易。方法 addClass 用于隐藏实现细节。它主要确保一组对象的行为就像它们是单独的对象一样。

行为型设计模式

这种设计模式依赖于识别、实现和不同对象之间通信的模式。行为模式主要关注通信，因为它们有助于确保不同部分的信息同步。因此，它提高了通信的灵活性。

让我们讨论行为设计模式的一些类别。

责任链模式

此设计模式主要用于构建一个系统，其中每个请求都经过一系列事件，并由处理程序处理。请求被处理并从一个链传递到另一个链，或者被简单拒绝。此设计模式适用于使用顺序检查来处理请求的系统。让我们以 ATM 为例。每当我们向 ATM 请求取款金额时，机器会处理请求并以一系列组合钞票（500 卢比、200 卢比、100 卢比）支付金额。

在此编码示例中，每当我们请求取款金额时都会创建一个请求对象。这会触发一系列针对该对象的调用，这些对象被链接在一起，并且事件处理程序处理特定的面额。最终，ATM 可以支付所请求的钞票组合，从而满足已处理的请求。

观察者模式

观察者模式是一种行为设计模式，其主要任务是定义一种订阅机制，以通知多个观察者或对象任何发生的事件。这会提醒事件处理程序执行事件驱动的响应。这种模式通常被称为 Pub/Sub，它是 Publication/Subscription（发布/订阅）的缩写，随后是对象之间一系列一对一的依赖关系。这种设计模式用于促进出色的面向对象设计并增强松散耦合。

在此示例中，我们构建了一个通知服务系统，其任务是通知用户订阅信息。在此系统中，我们创建了多个对象和事件监听器来监听更新，这些监听器被称为订阅者。因此，我们在此定义了两个类，即 Subject 和 Observer。这两个类需要保存关键信息以及观察者列表。当关键信息状态发生变化时，主题将使用上面代码中所示的通知方法，将其所有观察者通知有关事件。观察者类调用一个更新方法，该方法从主题调用通知请求。

结论

在本教程中，我们学习了 JavaScript 中各种流行的设计模式以及它们如何轻松解决常见和复杂问题。我们还学习了设计模式的各种类别，主要是创建型、结构型和行为型设计模式。创建型模式主要关注对象-类机制以简化模式。结构型设计模式提供了一种更好的方法来组织问题并逐个解决它们，而行为型模式则在同步建立活动之间的通信方面发挥作用。我们还简要探讨了这三种设计模式的一些子类别以及它们如何适应 JavaScript。JavaScript 设计模式在构建应用程序中扮演着至关重要的角色。不同的类别定义了在构建某些东西时存在或可能出现的不同问题集。但这些模式确保我们正在构建的任何东西都将是最好的，因为这些设计模式的最佳功能为 JavaScript 领域中出现的每一个设计问题提供了最佳解决方案。