前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 中的设计模式:创建模式

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

作者头像
海拥
发布2023-02-27 08:44:53
4300
发布2023-02-27 08:44:53
举报
文章被收录于专栏:全栈技术

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

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

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

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

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

创建模式

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

工厂方法

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

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

代码语言:javascript
复制
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

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

代码语言:javascript
复制
class PersonFactory {
    static add(name, age) {
        return new Person(name, age);
    }
}

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

代码语言:javascript
复制
const person = PersonFactory.add("furkan", 24);
console.log(person)
> Output:
> Person { name: 'furkan', age: 24 }

抽象工厂

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

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

代码语言:javascript
复制
class Person {
    consume() {}
}
class Client extends Person {
    consume() {
        console.log("Client")
    }
}

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

代码语言:javascript
复制
class PersonFactory {
    prepare(name)
}
class ClientFactory extends PersonFactory {
    addClient() {
        console.log("Client created")
        return new Client();
    }
}

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

代码语言:javascript
复制
const clientUserFact = new ClientFactory();
const person = clientUserFact.addClient();
person.consume();
> Output:
> Client created
> Client

建设者

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

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

代码语言:javascript
复制
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

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

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

代码语言:javascript
复制
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;
    }
}

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

代码语言:javascript
复制
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;
    }
}

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

代码语言:javascript
复制
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 对象将如下所示:

代码语言:javascript
复制
class Person {
    constructor(name) {
        this.name = name;
    }

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

    clone() {
        return new Person(this.name)
    }
}

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

代码语言:javascript
复制
const person1 = new Person();
person1.setName("furkan");
const person2 = person1.clone();
person2.setName("tugay");

> Output:
> furkan
> tugay

单例

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

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

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

代码语言:javascript
复制
class Person {
    constructor() {
        const instance = this.constructor.instance;
        if(instance) {
            return instance;
        }
        this.constructor.instance = this;
    }

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

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

代码语言:javascript
复制
const person1 = new Person();
const person2 = new Person();
console.log("is same: ", (person1 === person2));
person1.toString();
> Output:
> Person Class

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-02-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建模式
    • 工厂方法
      • 抽象工厂
        • 建设者
          • 原型
            • 单例
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档