JS工厂模式开发实践案例分析

什么是JS工厂模式

在JavaScript中，工厂模式是一种用于创建对象的设计模式。工厂模式基于工厂方法，即通过调用工厂方法，返回所需的对象实例。在JavaScript中，这种模式非常常见，因为它可以帮助我们快速创建多个相似的对象。

工厂模式的优缺点

优点

• 工厂模式可以帮助我们将代码组织得更加清晰和易于管理。
• 工厂模式允许我们复用已有的代码，避免了重复编写类似的代码的情况。
• 工厂模式允许我们在需要时动态创建对象实例。

缺点

• 工厂模式容易被滥用，因为它只是对对象创建过程的简单封装，可能会导致代码变得过于复杂而难以理解。
• 工厂模式通常需要额外的开销，因为在创建对象实例时需要先创建工厂对象。

实战案例

例子1：创建一个汽车工厂

假设我们要创建一个汽车工厂，可以生产多种类型的汽车，例如轿车、越野车和卡车。我们可以使用工厂模式，通过一个工厂方法生产并返回各种汽车的实例对象。

// 定义汽车类
class Car {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }

  // 汽车共有的方法
  turnOn() {
    console.log(this.model + " is turning on...");
  }

  turnOff() {
    console.log(this.model + " is turning off...");
  }
}

// 定义轿车类，继承自汽车类
class Sedan extends Car {
  constructor(model, year) {
    super(model, year);
    this.type = "sedan";
  }

  // 轿车特有的方法
  park() {
    console.log(this.model + " is parked.");
  }
}

// 定义越野车类，继承自汽车类
class SUV extends Car {
  constructor(model, year) {
    super(model, year);
    this.type = "SUV";
  }

  // 越野车特有的方法
  offroad() {
    console.log(this.model + " is offroading.");
  }
}

// 定义卡车类，继承自汽车类
class Truck extends Car {
  constructor(model, year) {
    super(model, year);
    this.type = "truck";
  }

  // 卡车特有的方法
  load() {
    console.log(this.model + " is loaded.");
  }
}

// 定义汽车工厂
class CarFactory {
  createCar(type, model, year) {
    switch(type) {
      case "sedan":
        return new Sedan(model, year);
      case "SUV":
        return new SUV(model, year);
      case "truck":
        return new Truck(model, year);
      default:
        throw new Error("Invalid car type.");
    }
  }
}

// 使用汽车工厂生产汽车实例
const carFactory = new CarFactory();

const mySedan = carFactory.createCar("sedan", "BMW", "2022");
mySedan.turnOn();
mySedan.park();

const mySUV = carFactory.createCar("SUV", "Jeep", "2022");
mySUV.turnOn();
mySUV.offroad();

const myTruck = carFactory.createCar("truck", "Volvo", "2022");
myTruck.turnOn();
myTruck.load();

在上面的代码中，我们使用ES6的语法定义了一个汽车类，并继承自汽车类的三种类型的车型类。然后我们定义了一个工厂类，用于返回各种类型的汽车实例。最后我们通过实例化工厂类并调用其方法创建并使用汽车实例。

例子2：创建一个DOM元素工厂

假设我们要创建一个能够快速创建DOM元素的工厂，我们可以将常用的DOM元素类型和属性封装起来，通过传入参数来动态生成DOM元素实例。以下是一个示例代码：

// 定义DOM元素工厂
class DOMFactory {
  createDOM(type, config) {
    const element = document.createElement(type);

    if(config && typeof config === "object") {
      for(let prop in config) {
        if(config.hasOwnProperty(prop)) {
          element[prop] = config[prop];
        }
      }
    }

    return element;
  }
}

// 使用DOM元素工厂创建元素，并添加到HTML文档中
const domFactory = new DOMFactory();

const heading = domFactory.createDOM("h1", { innerText: "Hello World" });
document.body.appendChild(heading);

const paragraph = domFactory.createDOM("p", { innerText: "This is a paragraph." });
document.body.appendChild(paragraph);

const button = domFactory.createDOM("button", { innerText: "Click me" });
document.body.appendChild(button);

在上面的代码中，我们使用ES6的语法定义了一个DOM元素工厂类，并定义了一个创建DOM元素实例的方法。该方法接收两个参数：元素类型和元素属性对象。如果属性对象存在，则通过循环将其添加到DOM元素中，并返回该DOM元素实例。最后，我们通过实例化DOM元素工厂类并调用其方法动态创建DOM元素，并将其添加至HTML文档中。

总结

以上是两个工厂模式的实际案例。工厂模式可以帮助我们更好地组织和管理代码，并提高代码的重用率。它可以应用于各种不同的场景，例如创建对象实例、DOM元素、HTTP请求等。了解这种设计模式的优缺点和应用情况，可以帮助我们更好地理解和应用它。