当前位置：首页 > 文章列表 > 文章 > 前端 > Factory Design Pattern in JavaScript

Factory Design Pattern in JavaScript

来源：dev.to 2024-10-19 17:09:45 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《Factory Design Pattern in JavaScript》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

工厂设计模式是一种创建型设计模式，它提供了一种创建对象的方法，而无需指定将创建的对象的确切类。它涉及创建一个工厂方法，该方法根据输入或配置决定要实例化哪个类。当我们需要将所有对象创建及其业务逻辑保留在一个地方时使用它。

工厂设计模式的主要优点是它能够将对象的创建与一个特定的实现解耦。
它允许创建其类在运行时确定的对象。
工厂允许我们公开一个比类小得多的“表面积”，类可以扩展、操作，而工厂只是一个函数，为用户提供的选项更少，使其更加健壮。
因此，工厂还可以通过利用闭包来强制封装。

一种施加封装的方法

在 javascript 中，强制封装的主要方法之一是通过函数作用域和闭包。

工厂也可以用作封装机制。

封装是指通过阻止外部代码直接操作组件的一些内部细节来控制对它们的访问。与组件的交互仅通过其公共接口进行，从而将外部代码与组件实现细节的更改隔离开来。

闭包允许您创建无法从工厂外部访问的私有变量和方法，从而强制封装并隐藏对象创建和实现的内部细节。

解耦对象的创建和实现

调用工厂，而不是使用 new 运算符或 object.create() 直接从类创建新对象，在多个方面更加方便和灵活。

工厂允许我们将对象的创建与实现分开。工厂包装了新实例的创建，为我们提供了更多的灵活性和控制方式。在工厂内部，我们选择使用 new 运算符创建类的新实例，或者利用闭包动态构建有状态对象文字，甚至根据特定条件返回不同的对象类型。工厂的消费者完全不知道实例的创建是如何进行的。

让我们通过一个小例子来理解为什么我们需要工厂设计模式

function createimg(name) {
    return new image(name);
}

const image = createimg('photo.jpg');

你可能会说为什么要多写这行代码，而我们可以直接写：

const image = new image(name);

所以使用工厂函数（createimg）背后的想法是抽象出创建对象的过程。

重构中工厂函数的好处：

单点更改：通过使用工厂函数，您可以集中对象创建过程。重构或扩展逻辑需要在一处进行更改，而不是整个代码库。

简化客户端代码：即使对象创建过程的复杂性增加，使用工厂函数的客户端代码也保持不变。

封装：工厂函数封装任何附加逻辑（例如缓存、默认参数或新对象类型）。这可以防止多个地方的逻辑重复，并降低重构期间出错的风险。

可维护性：随着代码的增长，维护工厂函数变得比重构直接实例化容易得多。使用工厂函数，您可以引入新功能、进行优化或修复错误，而不会影响其余代码。

例子

这是在 javascript 中实现工厂设计模式的基本示例：
场景：根据输入创建不同类型车辆（汽车、自行车、卡车）的工厂。

// Vehicle constructor functions
class Car {
  constructor(brand, model) {
    this.vehicleType = 'Car';
    this.brand = brand;
    this.model = model;
  }

  drive() {
    return `Driving a ${this.brand} ${this.model} car.`;
  }
}

class Bike {
  constructor(brand, model) {
    this.vehicleType = 'Bike';
    this.brand = brand;
    this.model = model;
  }

  ride() {
    return `Riding a ${this.brand} ${this.model} bike.`;
  }
}

class Truck {
  constructor(brand, model) {
    this.vehicleType = 'Truck';
    this.brand = brand;
    this.model = model;
  }

  haul() {
    return `Hauling with a ${this.brand} ${this.model} truck.`;
  }
}

// Vehicle factory that creates vehicles based on type
class VehicleFactory {
  static createVehicle(type, brand, model) {
    switch (type) {
      case 'car':
        return new Car(brand, model);
      case 'bike':
        return new Bike(brand, model);
      case 'truck':
        return new Truck(brand, model);
      default:
        throw new Error('Vehicle type not supported.');
    }
  }
}

// Using the factory to create vehicles
const myCar = VehicleFactory.createVehicle('car', 'Tesla', 'Model 3');
console.log(myCar.drive()); // Output: Driving a Tesla Model 3 car.

const myBike = VehicleFactory.createVehicle('bike', 'Yamaha', 'MT-15');
console.log(myBike.ride()); // Output: Riding a Yamaha MT-15 bike.

const myTruck = VehicleFactory.createVehicle('truck', 'Ford', 'F-150');
console.log(myTruck.haul()); // Output: Hauling with a Ford F-150 truck.

工作原理：