JavaScript 设计模式

在本文中，我们将尝试了解 JavaScript 提供的各种类型的设计模式（以及编码示例）。

JavaScript 设计模式：

• JavaScript 设计模式是可重用的解决方案，适用于编写 JavaScript Web 应用程序中常见的问题/问题。
• 它们实际上帮助我们使我们的代码更加健壮（强大）。
• 这些模式实际上有助于编写有组织、美观且结构良好的代码。
• 这些设计模式通过隔离所有不必要的重复来减少整体代码库。

JavaScript 设计模式分类：

• 23 Gang of Four（通常称为 GoF）通常被认为是所有其他预先存在的模式的基础。
• 因此，上下文中的 JavaScript 设计模式通常分为三个不同的类别：创建设计模式、结构设计模式、行为设计模式。

现在让我们以一种非常的方式研究这三种方法中的每一种，即简要介绍一些要点。

1. JavaScript 创建设计模式：这些模式处理对象创建机制。他们尝试以适合特定情况的方式创建对象。

以下是一些 JavaScript 创建设计模式的列表，以及它们的简要描述 -

• 抽象工厂设计模式：这种模式实际上创建了一个对象，该对象在通常提到的或现有的主题上创建对象。这实际上意味着该方法允许我们返回一个包含一组相关类或对象的因子。
• Builder 设计模式：这种设计模式允许我们通过仅指定类型和内容来创建复杂的对象。构造函数中涉及的内容对客户端隐藏。
• 工厂方法模式：此设计模式创建一个抽象对象或类，但让其他子类或对象决定实例化哪个方法或对象或方法（用于创建该类或方法的实例）。
• 原型设计模式：这种设计方法帮助我们创建新对象，但不是返回一个未初始化的新对象，它实际上返回一个具有从原型复制的值的新对象（例如，一个对象或一个类)
• 单例设计模式：此设计模式允许任何用户将任何特定对象的实例数限制为一个，这个单一实例称为单例。

2. JavaScript 结构设计模式：这种设计模式让我们知道如何比较迄今为止创建的类和对象以形成更大的结构。这种设计模式通过确定一种实现实体之间关系的简单方法来简化设计。

以下是一些 JavaScript 结构设计模式的列表，以及它们的简要描述 -

• 适配器设计模式：这种设计模式帮助我们将一个接口（即对象的属性和方法）转换为另一个接口，这就是为什么这种设计模式也被称为包装器模式。
• 桥接设计模式：这种设计模式允许存在多个组件，它们具有各自的接口（即，它们自己的个别属性或方法）。这是一种非常高级的架构模式。
• 复合设计模式：这种设计模式允许我们创建对象属性，这些属性是原始项目（旧的或以前存在的项目）或对象的集合。
• 享元设计模式：这种设计模式实际上通过有效地共享大量对象来帮助我们节省内存，这些共享对象实际上是不可变的。
• 代理设计模式：这种设计模式允许我们为另一个对象创建一个单独的或占位符对象，该对象将进一步能够控制这个提到的对象。

3. JavaScript 行为设计模式：该设计模式确定了对象之间的常见通信模式。这实际上增加了执行通信的灵活性。

以下是一些 JavaScript 行为设计模式的列表，以及它们的简要描述 -

• 责任链设计模式：这个模式为我们提供了松散耦合的对象链，并且从这些对象中，一个实际上将帮助我们提供提供。在这种方法下，事情将像线性搜索模式或方式一样工作。
• 命令设计模式：该模式实际上将各种动作封装为对象，从而允许系统将发出请求的对象与实际处理对象的对象分开。
• 解释器设计模式：这种设计模式为我们提供了一种脚本语言，供端到端用户定制他们的解决方案。
• 观察者设计模式：此设计模式提供了一个模型，其中对象订阅事件并在任何事件发生时得到通知。这种模式促进了良好的面向对象设计和松散耦合。
• 状态设计模式：这种设计模式实际上为一组有限的对象提供了特定于状态的逻辑，其中每个对象代表一个特定的状态。

现在，在以简短有效的方式理解了上述每种设计模式之后，让我们继续前进，看看一些编码示例，这将有助于我们理解上述各种不同类别的设计模式——

示例 1：在这个示例中，我们将看到 Builder 设计模式以及责任链设计模式是如何工作的。

Javascript

let Task = function (name, description) {
    this.name = name;
    this.description = description;
};
  
let TaskBuilder = function () {
    let name;
    let description;
  
    this.setName = function (name) {
        this.name = name;
        return this;
    };
    this.setDescription = function (description) {
        this.description = description;
        return this;
    };
  
    this.build = function () {
        return new Task(this.name, this.description);
    };
    return this;
};
  
let task = new TaskBuilder();
let object = task
    .setName("First Task")
    .setDescription("Study React and TypeScript")
    .build();
console.log(object);

输出：

Task { name: 'First Task', description: 'Study React and TypeScript' }

示例 2：在这个示例中，我们将了解代理设计模式是如何工作的。在这里，我们将创建一个实际适用于 main 方法的代理方法，因为它负责用户想要显示的所有输出结果。

Javascript

function mainDisplayFunction() {
    this.getData = function (name) {
        if (name === "ABC") return 20000;
        else if (name === "DEF") return 5000;
        else return 0;
    };
}
  
function proxyDisplayFunction() {
    let object_1 = new mainDisplayFunction();
    let result_object = {};
    return {
        getData: function (name) {
            if (!result_object[name]) {
                result_object[name] = object_1.getData(name);
            }
            console.log(name + ": " + result_object[name]);
            return result_object[name];
        },
    };
}
  
function mainFunction() {
    let main_object = new proxyDisplayFunction();
    main_object.getData("ABC");
    main_object.getData("DEF");
    main_object.getData("Apple");
}
  
mainFunction();

输出：

ABC: 20000
DEF: 5000
Apple: 0