JavaScript 中的工廠設計模式-js教程-PHP中文網

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.

登入後複製

工作原理：