It’s #FrontendFriday – Factory Method – Erzeugt Objekte an zentraler Stelle

11.03.2022

Hallo #FrontendFriday-Leser/in. In der heutigen Ausgabe werden wir in die Factory Method einsteigen.

Die Factory Method wurde schon im Blog aus der vorherigen Ausgabe zu Coding Patterns JavaScript angesprochen.

Wir schauen uns gemeinsam an, was es denn genau ist und wie es aufgebaut wird.

Was ist Factory Method?

Dies ist ein Ansatz in der Web-Entwicklung, um Objekte zu kreieren ohne die exakte Klasse dieser Objekte spezifizieren zu müssen.

Somit ist es für die Zukunft, als auch während der Implementierung, flexibel und bequem diese Objekte auszutauschen. Diese Objekte können je nach Anwendungsfall in einer Schnittstelle spezifiziert und in der Child-Klasse implementiert werden.

Wie wir es auch aus anderen Anwendungsfällen kennen, können diese Objekte von abgeleiteten Klassen überschrieben werden, wenn diese in der Basisklasse implementiert sind.

Sollte es jeder Web-Entwickelnde anwenden? Relevanz?

Da jeder Einsatz in der Entwicklung sowohl Vor- als auch Nachteile mitbringen kann, habe ich für mich ein „Konzept“ entworfen.

Wann ist es nützlich dies anzuwenden

  • Sobald unser Objekt- oder Komponenten-Setup ein hohes Maß an Komplexität aufweist.
  • Wenn wir auf einfache Weise verschiedene Instanzen von Objekten in Abhängigkeit von der Umgebung erzeugen müssen.
  • Wenn wir mit vielen kleinen Objekten oder Komponenten arbeiten, die dieselben Eigenschaften haben.

Wann wäre es nicht mehr nützlich

Wenn dieses Muster auf die falsche Art von Problem angewandt wird, kann es zu einer unnötig hohen Komplexität einer Anwendung führen.

Wenn die Bereitstellung einer Schnittstelle für die Objekterzeugung kein Designziel für die Bibliothek oder das Framework ist. Hierzu würde ich vorschlagen, bei expliziten Konstruktoren zu bleiben. Somit kann man den unnötigen Overhead vermeiden.

Da der Prozess der Objekterstellung effektiv hinter einer Schnittstelle abstrahiert wird, kann dies auch zu Problemen beim Unit-Testing führen.

Code-Beispiel

Im folgendem Beispiel könnt ihr sehen, wie sich solch eine Method-Factory einfach aufbauen lässt:

// Erstellen wir eine Fahrzeug-Factory, wo eine Farbe ausgewählt werden kann
// Hierbei erstellen wir unseren Konstruktor, um die Farbe des Fahrzeugs festzustellen.

class CarFactory {
  constructor() {
    this.createCar = function(color) {
      let carColor;
      if (color === 'black'){
          carColor = new BlackPaint();
      }  
      else if (color === 'white'){
          carColor = new WhitePaint();
      } 
      else if (color === 'red'){
          carColor = new RedPaint();
      }
      return carColor;
    };
  }
}

// Die Eigenschaftsklassen werden somit erstellen. Hierbei handelt es sich um die Außenfarbe vom Fahrzeug
class BlackPaint {
  constructor() {
    this.carColorcolor = "black";
    this.message = function() {
      return `You choose the ${this.carColorcolor} color for your car.`;
    };
  }
}

class WhitePaint {
  constructor() {
    this.carColorcolor = "white";
    this.message = function() {
      return `You choose the ${this.carColorcolor} color for your car.`;
    };
  }
}

class RedPaint{
  constructor() {
    this.carColorcolor = "red";
    this.message = function() {
      return `You choose the ${this.carColorcolor} color for your car.`;
    };
  }
}

// Nun erstellen wir Objekte aus der Factory
const carFactory = new CarFactory();

const black = carFactory.createCar('black');
const white = carFactory.createCar('white');
const red = carFactory.createCar('red');

console.log(black.message()); // You choose the black color for your car.
console.log(white.message()); // You choose the white color for your car.
console.log(red.message()); // You choose the red color for your car.

 

Die Webfrontend FG wünscht euch viel Spaß & ein wunderschönes Wochenende!

 

Mehr zu Java Programmierung erfahren

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*