JavaScript 中的设计模式:创建模式

Posted 海拥✘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 中的设计模式:创建模式相关的知识,希望对你有一定的参考价值。

在日常生活中,程序员在写代码的时候可能会遇到很多错误,自然而然的就会想出解决这些问题的方法。不同项目中不同打印机开发的解决方案彼此非常相似。这就是设计模式发挥作用的地方。

设计模式是软件开发人员在软件开发过程中面临的常见问题的解决方案。

让我们检查项目中的设计模式以便更好地理解:

它通常基于 OOP。但是无论语言和技术如何,它都可以使用。
它们是软件开发人员使用的经过验证的解决方案方法。
它们是应用于问题的一般解决方案。
我们在 3 个标题下收集设计模式:

创意图案
结构模式
行为模式
在本文中,我将讨论创建模式:

创建模式

它是一种用于创建和管理对象的模式。它们提供提高代码灵活性和可重用性的对象创建机制。

工厂方法

它定义了一个接口来创建单个对象,并允许子类决定实例化哪个类。

示例:让我们定义一个名为 Person 的类。

class Person 
    constructor(name, age) 
        this.name = name;
        this.age = age;
    

现在让我们添加工厂方法:

class PersonFactory 
    static add(name, age) 
        return new Person(name, age);
    

现在我们可以使用我们的 PersonFactory 模型创建一个新的 Person 对象:

const person = PersonFactory.add("furkan", 24);
console.log(person)
> Output:
> Person  name: 'furkan', age: 24 

抽象工厂

抽象工厂是我们想要同时处理多个对象时可以使用的一种设计模式。

示例:让我们继续 Person 示例并创建另一个从 Person 类派生的名为 Client 的类:

class Person 
    consume() 

class Client extends Person 
    consume() 
        console.log("Client")
    

现在让我们为它们创建工厂方法,看看 abstract 是如何使用的:

class PersonFactory 
    prepare(name)

class ClientFactory extends PersonFactory 
    addClient() 
        console.log("Client created")
        return new Client();
    

现在是时候使用我们的抽象工厂方法了:

const clientUserFact = new ClientFactory();
const person = clientUserFact.addClient();
person.consume();
> Output:
> Client created
> Client

建设者

这种设计允许您使用相同的构造代码创建对象的不同类型和表示。

示例:让我们继续经典的 Person 示例。这里我们稍微修改一下Person对象:

class Person 
    constructor(name, age) 
        this.name = name;
        this.age = age;
    

    toString() 
        return (
         `$this.name is $this.age years old!`    
        )
    

我们在 Person 对象中使用两条信息:姓名和年龄。现在让我们定义一个 Person Builder:

class PersonBuilder 
    constructor(person = new Person()) 
        this.person = person;
    

    get age() 
        return new PersonAgeBuilder(this.person);
    

    get name()
        return new PersonNameBuilder(this.person);
    

    build() 
        return this.person;
    

上面我们说了我们的对象包含两条信息。现在让我们在这里创建这些对象的构建器:

class PersonNameBuilder extends PersonBuilder 
    constructor(person) 
        super(person)
    

    is(name) 
        this.person.name = name;
        return this;
    

class PersonAgeBuilder extends PersonBuilder 
    constructor(person) 
        super(person)
    

    is(age) 
        this.person.age = age;
        return this;
    

现在是时候使用我们编写的对象了:

const personBuilder = new PersonBuilder();
const person = personBuilder
                .name.is("Furkan")
                .age.is(24)
                .build();
console.log(person.toString());

> Output:
> Furkan is 24 years old!

原型

原型是一种设计模式,它允许您复制现有对象而不使您的代码依赖于它们的类。

示例:我们再次来到我们的 Person 对象 😄 这里我们的 Person 对象将如下所示:

class Person 
    constructor(name) 
        this.name = name;
    

    setName(name) 
        this.name = name;
        console.log(name.toString())
    

    clone() 
        return new Person(this.name)
    

我们说过目的是复制,我们在我们的对象中放置了一个名为 clone 的方法。现在让我们使用它并克隆我们的对象:

const person1 = new Person();
person1.setName("furkan");
const person2 = person1.clone();
person2.setName("tugay");

> Output:
> furkan
> tugay

单例

单例用于确保一个对象只有一个实例,并且在您需要该对象时在您的代码中的任何地方都被相同地调用。

这也类似于SOLID原则中的“单一职责原则”。

示例:我们已经来到最后一个示例,我们将在其中使用 Person 对象。

class Person 
    constructor() 
        const instance = this.constructor.instance;
        if(instance) 
            return instance;
        
        this.constructor.instance = this;
    

    toString() 
        console.log("Person Class");
    

我们还可以通过这种方式检查是否提供了单例:

const person1 = new Person();
const person2 = new Person();
console.log("is same: ", (person1 === person2));
person1.toString();
> Output:
> Person Class

在这篇文章中,我谈到了什么是设计模式,并试图用 javascript 代码解释创意模式。

⭐️ 好书推荐

《RHCSA/RHCE8红帽Linux认证学习教程》

【内容简介】

本书从零基础开始讲解,系统介绍了RHCE8的相关知识,以帮助读者快速了解及熟练掌握RHCE8的相关操作,是一本高品质的RHCE认证的学习书籍。本书分为9篇,共35章。第1篇主要介绍基本配置;第2篇主要介绍用户及权限管理;第3篇主要介绍网络相关配置;第4篇主要介绍存储管理;第5篇主要介绍系统管理;第6篇主要介绍软件管理;第7篇主要介绍安全管理;第8篇主要介绍容器管理;第9篇主要介绍自动化管理工具ansible的使用。

📚 京东自营购买链接:《RHCSA/RHCE8红帽Linux认证学习教程》

以上是关于JavaScript 中的设计模式:创建模式的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 中的设计模式:创建模式

⑤创建型设计模式原型模式

事件处理模式

javascript工厂模式和构造函数模式创建对象

模块模式中的 JavaScript 命名空间

使用 Javascript 以编程方式将 Google Chrome 置于全屏模式?