高级 JavaScript 设计模式

概述

我在这里介绍了 20 多种 JavaScript 设计模式。我们将使用 JavaScript es6 类来讨论所有这些设计模式。

关于我

我是DhiWise的一名 React.js 开发者。DhiWise 是一个 ProCode 平台，可帮助您构建简洁、可扩展且可自定义的 Node.js（开源）、Android（Kotlin）、iOS、Laravel、Flutter 和 React 代码。专注于程序员的本职工作，剩下的交给DhiWise。https
://www.dhiwise.com/?utm_campaign
=Dev.to&utm_source=Dev.to 如果你想学习

• 高级反应组件模式，请在这里找到。
• 高级 React 路线图，请在此处查找。

🚀 什么是设计模式？

设计模式是软件设计中常见问题的解决方案。这些模式易于复用，且富有表现力。

根据维基百科

在软件工程中，软件设计模式是针对软件设计中特定情境下常见问题的通用可复用解决方案。它并非可以直接转换为源代码或机器码的最终设计。它是一种适用于多种不同情况的解决问题的描述或模板。

设计模式的类型

• 创造型

• 结构

• 行为

创建型设计模式

创建型设计模式将为您创建对象，而不是直接实例化对象。

根据维基百科

在软件工程中，创建型设计模式是指处理对象创建机制的设计模式，旨在尝试以适合具体情况的方式创建对象。对象创建的基本形式可能会导致设计问题或增加设计的复杂性。创建型设计模式通过某种方式控制对象创建来解决这个问题。

• 工厂方法

• 抽象工厂

• 建造者

• 原型

• 单例模式

工厂方法
它定义一个用于创建单个对象的接口，并让子类决定实例化哪个类。

根据维基百科：

在基于类的编程中，工厂方法模式是一种创建型模式，它使用工厂方法来处理创建对象的问题，而无需指定要创建对象的具体类。创建对象是通过调用工厂方法来创建的，而不是通过调用构造函数。工厂方法可以是在接口中指定并由子类实现，也可以是在基类中实现并可选地由派生类重写。

例子

让我们以点为例。我们有一个点类，需要创建一个笛卡尔点和一个极点。我们将定义一个点工厂来完成这项工作。

现在我们将创建 Point Factory 并使用我们的工厂，

抽象工厂

它创建常见对象的家族或群体，而无需指定它们的具体类别。

根据维基百科

抽象工厂模式提供了一种方法来封装一组具有共同主题的独立工厂，而无需指定它们的具体类

例子

我们将使用饮料和饮料制作机的例子。

饮料厂

建造者

它从简单对象构建复杂对象。

根据维基百科

建造者模式是一种设计模式，旨在为面向对象编程中的各种对象创建问题提供灵活的解决方案。

例子

我们将使用存储个人信息的人员类作为示例。

现在我们将创建人员生成器、人员工作生成器和人员地址生成器。

现在我们将使用我们的构建器，

原型

它从现有对象创建新对象。

根据维基百科

原型模式是软件开发中的一种创建型设计模式。当要创建的对象类型由原型实例决定时，可以使用原型模式，该实例被克隆以创建新的对象。

例子

我们将使用汽车作为例子。

单例模式

它确保为特定类只创建一个对象。

根据维基百科

在软件工程中，单例模式是一种软件设计模式，它将一个类的实例化限制为一个“单一”实例。当只需要一个对象来协调整个系统的操作时，这种方法非常有用。

例子

创建一个单例类，

结构设计模式

这些模式涉及类和对象的组合。它们使用继承来组成接口。

根据维基百科

在软件工程中，结构设计模式是通过识别实现实体之间关系的简单方法来简化设计的设计模式。

• 适配器

• 桥

• 合成的

• 装饰器

• 正面

• 蝇量级

• 代理人

适配器

这种模式允许具有不兼容接口的类通过将其自己的接口包装在现有类周围来实现协同工作

根据维基百科

在软件工程中，适配器模式是一种软件设计模式，它允许将现有类的接口用作另一个接口。它通常用于使现有类与其他类协同工作，而无需修改其源代码。

例子

我们以计算器为例。Calculator1 是一个旧接口，Calculator2 是一个新接口。我们将构建一个适配器来包装新接口，并使用其新方法返回结果。

桥

它将抽象与实现分开，以便两者可以独立变化。

根据维基百科

Bridge 是一种结构设计模式，它允许您将一个大类或一组密切相关的类分成两个独立的层次结构 - 抽象和实现 - 它们可以彼此独立地开发。

例子

我们将创建渲染器类来渲染多种形状，

合成的

它将对象组合起来，以便可以将它们作为单个对象进行操作。

根据维基百科

复合模式描述了一组对象，这些对象以与同一类型对象的单个实例相同的方式处理。

例子

我们将使用工作示例，

装饰器

它动态地添加或覆盖对象的行为。

根据维基百科

装饰器模式是一种设计模式，它允许动态地将行为添加到单个对象，而不会影响同一类中其他对象的行为。

例子

我们将以颜色和形状为例。如果要画一个圆圈，我们将创建方法并绘制一个圆圈。如果要画一个红色圆圈，我们将创建方法并绘制一个圆圈。现在，行为已添加到对象中，装饰器模式将帮助我们完成这项工作。

正面

它为复杂的代码提供了简化的接口。

根据维基百科

外观模式（也写作 façade）是面向对象编程中常用的软件设计模式。外观模式类似于建筑学中的外观，它是一种充当前端界面的对象，用于掩盖更复杂的底层或结构代码。

例子

我们来举一个客户端与计算机交互的例子。

蝇量级

它减少了创建类似对象的内存成本。

根据维基百科

享元是一种通过与其他类似对象共享尽可能多的数据来最小化内存使用量的对象。

例子

我们以用户为例。假设有多个同名用户。我们可以存储一个名称，并为其提供对同名用户的引用，以节省内存。

这就是我们的使用方法。
现在，我们将通过创建 10k 个用户，比较有 Flyweight 和无 Flyweight 两种情况下的内存使用情况。

代理人

通过使用代理，一个类可以表示另一个类的功能。

根据维基百科

代理模式是一种软件设计模式。代理，在其最通用的形式中，是一个充当其他对象的接口的类。

例子

我们以价值代理为例。

行为设计模式

行为设计模式特别关注对象之间的通信。

根据维基百科

在软件工程中，行为设计模式是识别对象之间通用通信模式的设计模式。通过这样做，这些模式增加了进行通信的灵活性。

• 责任链

• 命令

• 迭代器

• 调解员

• 纪念

• 观察者

• 游客

• 战略

• 状态

• 模板方法

责任链

它创建一个对象链。它从一个点开始，直到找到某个条件才停止。

根据维基百科

在面向对象设计中，责任链模式是由命令对象源和一系列处理对象组成的设计模式。

例子

我们将以游戏中的生物为例。该生物在达到一定程度时会增加防御和攻击力。它会形成连锁反应，攻击力和防御力也会随之增加或减少。

增加攻击力，

增加防御

这就是我们的使用方法，

命令

它创建对象，并将动作封装在对象中。

根据维基百科

在面向对象编程中，命令模式是一种行为设计模式，其中使用对象来封装执行操作或在稍后触发事件所需的所有信息。这些信息包括方法名称、拥有该方法的对象以及方法参数的值。

例子

我们将举一个简单的银行账户的例子，如果我们必须存入或提取一定数额的钱，我们会发出命令。

创建我们的命令，

这就是我们的使用方法，

迭代器

迭代器访问对象的元素而不暴露其底层表示。

根据维基百科

在面向对象编程中，迭代器模式是一种使用迭代器遍历容器并访问容器元素的设计模式。

例子

我们将以数组为例，打印数组的值，然后使用迭代器反向打印其值。

这就是我们的使用方法，

调解员

中介者模式通过添加第三方对象来控制两个对象之间的交互。它通过成为唯一一个详细了解类方法的类，实现了类之间的松散耦合。

根据维基百科

中介者模式定义了一个对象，该对象封装了一组对象如何交互。由于该模式可以改变程序的运行行为，因此被认为是一种行为模式。在面向对象编程中，程序通常由许多类组成。

例子

我们将以一个人使用聊天室为例。在这里，聊天室充当了两个人交流的中介。

创建聊天室，

这就是我们的使用方法，

纪念

Memento 将对象恢复到其之前的状态。

根据维基百科

备忘录模式是一种软件设计模式，它提供了将对象恢复到其先前状态的功能。备忘录模式由三个对象实现：发起者、管理者和备忘录。

例子

我们将以银行账户为例，其中存储我们之前的状态并具有撤销功能。

观察者

它允许多个观察者对象看到一个事件。

根据维基百科

观察者模式是一种软件设计模式，其中一个名为主体的对象维护其依赖项列表，称为观察者，并自动通知它们任何状态变化，通常通过调用它们的某个方法。

例子

我们将以人为例，如果一个人生病了，它就会显示通知。

这就是我们的使用方法，

游客

它向对象添加操作而无需修改它们。

根据维基百科

访问者设计模式是一种将算法与其操作的对象结构分离的方法。这种分离的实际结果是能够在不修改现有对象结构的情况下向其添加新操作。

例子

我们将以 NumberExpression 为例，它为我们提供给定表达式的结果。

战略

它允许在特定情况下选择其中一种算法。

根据维基百科

策略模式是一种行为型软件设计模式，允许在运行时选择算法。代码不是直接实现单个算法，而是接收运行时指令，决定使用一组算法中的哪一个。

例子

我们将举一个例子，其中我们有一个文本处理器，它将根据策略（HTML 或 Markdown）显示数据。

创建 TextProcessor 类，

这就是我们的使用方法，

状态

当对象的内部状态发生变化时，它会改变对象的行为。

根据维基百科

状态模式是一种行为型软件设计模式，允许对象在其内部状态发生变化时改变其行为。该模式类似于有限状态机的概念。

例子

我们将以电灯开关为例，如果我们打开或关闭开关，其状态就会发生变化。

让我们创建一个 Switch 类来使用这些开/关状态

模板方法

它将算法的骨架定义为抽象类，说明如何执行算法。

根据维基百科

模板方法是超类中的方法，通常是抽象超类，它根据多个高级步骤定义操作的骨架。

例子

我们将以国际象棋比赛为例，

创建我们的国际象棋课程，

这就是我们的使用方法，

概述

正如我们所见，所有这些模式在大型组织中都被广泛应用。希望它们能在你的创新项目中发挥作用。

参考

Dmitri Nesteruk 在Udemy上讲解了JavaScript 中的设计模式。

• 作者：Ravi Sojitra（DhiWise 技术主管）