JavaScript 设计模式

在本文中，我们将尝试理解 JavaScript 提供的各种设计模式（包括代码示例）。

JavaScript 设计模式：

JavaScript 设计模式是应用于编写 JavaScript 网页应用程序时常见问题的可重复使用解决方案。
它们实际上帮助我们使代码更加强大。
这些模式实际上有助于编写有组织、优雅和结构良好的代码。
这些设计模式通过隔离所有不必要的重复，减少了整体代码库。

JavaScript 设计模式的分类：

JavaScript 设计模式

23个设计模式（通常称为GoF）被普遍认为是所有其他既有模式的基础。
因此，JavaScript设计模式通常分为三个不同的分类： 创建型设计模式、结构型设计模式、行为型设计模式。

现在让我们非常简要地学习这三种方法中的每一种。

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

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

抽象工厂设计模式： 这种模式实际上创建一个根据常用的或已知的主题创建对象的对象。这实际上意味着该方法允许我们返回包含一组相关类或对象的工厂。
建造者设计模式： 这种设计模式允许我们仅指定类型和内容来创建复杂对象。构造函数中涉及的事物对客户端来说是隐藏的。
工厂方法设计模式： 这种设计模式创建抽象对象或类，但让其他子类或对象决定要实例化的方法或对象（用于创建该类或方法的实例）。
原型设计模式： 此设计方法帮助我们创建新对象，但与其返回一个未初始化的新对象，它实际上返回一个从原型（例如-对象或类）复制的具有值的新对象。
单例设计模式： 这种设计模式允许用户将任何特定对象的实例数量限制为仅一个，并且这个单个实例被称为单例。

2. JavaScript结构型设计模式： 这种设计模式允许我们了解迄今为止创建的类和对象如何相互比较以形成更大的结构。此设计模式通过识别实现实体之间关系的简单方法来简化设计。

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

适配器设计模式： 这个设计模式帮助我们将一个接口（即对象的属性和方法）翻译成另一个接口，这就是为什么这个设计模式也被称为包装器模式。
桥接设计模式： 这个设计模式允许存在多个组件，每个组件都有自己的接口（即自己的属性或方法）。这是一个非常高级的架构模式。
组合设计模式： 这个设计模式允许我们创建原始物品（即以前存在的物品）或一组对象的对象属性。
享元设计模式： 这个设计模式通过有效地共享大量对象来帮助我们节省内存，这些共享的对象实际上是不可变的。
代理设计模式： 这个设计模式允许我们为另一个对象创建一个单独的或占位符对象，后者将能够控制该对象。

3. JavaScript行为设计模式： 这个设计模式识别对象之间的常见通信模式。这实际上增加了进行通信的灵活性。

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

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

现在在简洁高效地了解了上述每个设计模式后，让我们向前迈进，看一些编码示例，这些示例将帮助我们理解各个不同类别的上述设计模式-

示例1： 在这个示例中，我们将看到建造者设计模式以及责任链设计模式的工作原理。

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： 在这个示例中，我们将理解代理设计模式的工作原理。在这里，我们将创建一个代理方法，它实际上为主方法工作，因为它负责用户想要显示为结果的所有输出。

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();

输出: