社区首页 >专栏 >JavaScript 中的设计模式：创建模式

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

海拥

发布于 2023-02-27 00:44:53

55300

代码可运行

文章被收录于专栏：全栈技术全栈技术

运行总次数：0

代码可运行

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

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

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

它通常基于 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