揭秘JavaScript ES6类中创建型设计模式的奥秘

前端

2023-10-07 19:20:33

设计模式概述

设计模式是软件设计中常见问题的解决方案，旨在提高代码的可重用性、可维护性和灵活性。设计模式被广泛应用于各种编程语言中，其中JavaScript ES6也不例外。在ES6中，我们可以利用类聊来实现更加优雅的设计模式。

创建型模式是设计模式的三大类别之一，它主要解决与创建对象相关的问题。在ES6中，我们可以使用类聊来轻松实现创建型模式，从而简化对象创建过程，提高代码的可读性和可维护性。

ES6类中创建型设计模式

ES6中创建型设计模式主要包括以下四种：

工厂模式
单例模式
建造者模式
策略模式

工厂模式

工厂模式是一种创建对象的模式，它通过一个工厂类来创建对象，而不是直接使用new。工厂模式可以将对象的创建逻辑与对象的表示逻辑分离，从而提高代码的可重用性。

在ES6中，我们可以使用类聊轻松实现工厂模式。例如，以下代码演示了如何使用工厂模式来创建不同类型的形状：

class ShapeFactory {
  createShape(type) {
    switch (type) {
      case "circle":
        return new Circle();
      case "square":
        return new Square();
      case "triangle":
        return new Triangle();
      default:
        throw new Error("Invalid shape type");
    }
  }
}

class Circle {
  draw() {
    console.log("Drawing a circle");
  }
}

class Square {
  draw() {
    console.log("Drawing a square");
  }
}

class Triangle {
  draw() {
    console.log("Drawing a triangle");
  }
}

const factory = new ShapeFactory();
const circle = factory.createShape("circle");
const square = factory.createShape("square");
const triangle = factory.createShape("triangle");

circle.draw(); // Drawing a circle
square.draw(); // Drawing a square
triangle.draw(); // Drawing a triangle

单例模式

单例模式是一种创建对象的模式，它确保整个系统中只有一个该类型的对象实例。单例模式通常用于创建全局对象或共享对象。

在ES6中，我们可以使用类聊轻松实现单例模式。例如，以下代码演示了如何使用单例模式来创建数据库连接对象：

class DatabaseConnection {
  constructor() {
    if (DatabaseConnection.instance) {
      return DatabaseConnection.instance;
    }

    this.connection = new MongoClient();

    DatabaseConnection.instance = this;
  }

  connect() {
    this.connection.connect();
  }

  disconnect() {
    this.connection.disconnect();
  }

  query(sql) {
    return this.connection.query(sql);
  }
}

const dbConnection = new DatabaseConnection();
dbConnection.connect();

const queryResult = dbConnection.query("SELECT * FROM users");

console.log(queryResult);

dbConnection.disconnect();

建造者模式

建造者模式是一种创建对象的模式，它允许我们通过一步一步地组装对象的不同部分来创建复杂的对象。建造者模式可以提高代码的可读性和可维护性，同时允许我们创建不同配置的对象。

在ES6中，我们可以使用类聊轻松实现建造者模式。例如，以下代码演示了如何使用建造者模式来创建汽车对象：

class CarBuilder {
  constructor() {
    this.car = new Car();
  }

  setMake(make) {
    this.car.make = make;
    return this;
  }

  setModel(model) {
    this.car.model = model;
    return this;
  }

  setYear(year) {
    this.car.year = year;
    return this;
  }

  setColor(color) {
    this.car.color = color;
    return this;
  }

  build() {
    return this.car;
  }
}

const car = new CarBuilder()
  .setMake("Tesla")
  .setModel("Model S")
  .setYear(2023)
  .setColor("red")
  .build();

console.log(car);

策略模式

策略模式是一种创建对象的模式，它允许我们根据不同的情况选择不同的算法或策略。策略模式可以提高代码的可重用性和可维护性，同时允许我们轻松地切换不同的算法或策略。

在ES6中，我们可以使用类聊轻松实现策略模式。例如，以下代码演示了如何使用策略模式来实现不同类型的排序算法：

class SortStrategy {
  sort(array) {
    throw new Error("Method not implemented");
  }
}

class BubbleSortStrategy extends SortStrategy {
  sort(array) {
    for (let i = 0; i < array.length; i++) {
      for (let j = 0; j < array.length - i - 1; j++) {
        if (array[j] > array[j + 1]) {
          [array[j], array[j + 1]] = [array[j + 1], array[j]];
        }
      }
    }

    return array;
  }
}

class InsertionSortStrategy extends SortStrategy {
  sort(array) {
    for (let i = 1; i < array.length; i++) {
      let key = array[i];
      let j = i - 1;

      while (j >= 0 && array[j] > key) {
        array[j + 1] = array[j];
        j--;
      }

      array[j + 1] = key;
    }

    return array;
  }
}

class SelectionSortStrategy extends SortStrategy {
  sort(array) {
    for (let i = 0; i < array.length - 1; i++) {
      let minIndex = i;

      for (let j = i + 1; j < array.length; j++) {
        if (array[j] < array[minIndex]) {
          minIndex = j;
        }
      }

      [array[i], array[minIndex]] = [array[minIndex], array[i]];
    }

    return array;
  }
}

const array = [1, 5, 3, 2, 4];

const bubbleSortStrategy = new BubbleSortStrategy();
const sortedArray1 = bubbleSortStrategy.sort(array);

const insertionSortStrategy = new InsertionSortStrategy();
const sortedArray2 = insertionSortStrategy.sort(array);

const selectionSortStrategy = new SelectionSortStrategy();
const sortedArray3 = selectionSortStrategy.sort(array);

console.log(sortedArray1);
console.log(sortedArray2);
console.log(sortedArray3);