工厂模式与抽象工厂模式 - JS 设计模式入门（一）

前端

2023-09-12 17:58:03

正文

在软件开发中，设计模式是经过验证的解决方案，可帮助开发者解决常见问题。这些模式提供了可重用且可靠的方法来构建软件，从而节省时间并提高代码质量。

在 JavaScript 中，有许多不同的设计模式可供选择。本文将介绍两种最常见的模式：工厂模式和抽象工厂模式。

工厂模式

工厂模式是一种创建对象的模式。它允许开发者使用一个统一的接口来创建不同类型的对象，而无需指定对象的具体类。这使得代码更加灵活和可扩展，因为开发者可以轻松地添加或删除新的对象类型，而无需修改现有代码。

在 JavaScript 中，工厂模式可以通过使用构造函数或工厂函数来实现。构造函数模式更简单，但工厂函数模式更灵活。

以下是一个使用构造函数的工厂模式示例：

function Car(make, model) {
  this.make = make;
  this.model = model;
}

function createCar(make, model) {
  return new Car(make, model);
}

const car1 = createCar("Toyota", "Camry");
const car2 = createCar("Honda", "Civic");

在上面的示例中，Car 函数是一个构造函数，它被用于创建一个新的汽车对象。createCar 函数是一个工厂函数，它使用 Car 构造函数来创建一个新的汽车对象。

抽象工厂模式

抽象工厂模式是一种创建对象族的模式。它允许开发者使用一个统一的接口来创建不同类型的对象家族，而无需指定对象的具体类。这使得代码更加灵活和可扩展，因为开发者可以轻松地添加或删除新的对象家族，而无需修改现有代码。

在 JavaScript 中，抽象工厂模式可以通过使用工厂函数来实现。

以下是一个使用工厂函数的抽象工厂模式示例：

function createCarFactory(make) {
  switch (make) {
    case "Toyota":
      return {
        createSedan: function() {
          return new ToyotaSedan();
        },
        createSUV: function() {
          return new ToyotaSUV();
        }
      };
    case "Honda":
      return {
        createSedan: function() {
          return new HondaSedan();
        },
        createSUV: function() {
          return new HondaSUV();
        }
      };
    default:
      throw new Error("Invalid car make.");
  }
}

const toyotaFactory = createCarFactory("Toyota");
const hondaFactory = createCarFactory("Honda");

const toyotaSedan = toyotaFactory.createSedan();
const toyotaSUV = toyotaFactory.createSUV();

const hondaSedan = hondaFactory.createSedan();
const hondaSUV = hondaFactory.createSUV();