Entwurfsmuster in JavaScript mit Beispielen: Von A bis Z

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Entwurfsmuster in JavaScript mit Beispielen: Von A bis Z

Entwurfsmuster (Design Patterns) sind bewährte Lösungen für typische Probleme, die bei der Softwareentwicklung auftreten. In JavaScript, insbesondere in der Node.js-Umgebung, hilft das Verständnis dieser Muster dabei, saubereren, modulareren und skalierbareren Code zu schreiben. In diesem Artikel werden wir die wichtigsten Kategorien von Mustern mit anschaulichen Beispielen durchgehen.

1. Erzeugungsmuster (Creational Patterns)

Diese Muster verwalten den Prozess der Objekterstellung und machen das System unabhängig von der Art und Weise ihrer Instanziierung.

1.1. Singleton (Einzelstück)

Stellt sicher, dass eine Klasse nur eine einzige Instanz hat, und bietet einen globalen Zugriffspunkt darauf. In Node.js werden Module standardmäßig zwischengespeichert, was die Implementierung vereinfacht.

class DatabaseConnection {  constructor() {    if (DatabaseConnection.instance) {      return DatabaseConnection.instance;    }    this.connection = null;    DatabaseConnection.instance = this;  }

  connect() {    if (!this.connection) {      this.connection = { status: 'connected' };      console.log('Neue Datenbankverbindung');    }    return this.connection;  }}

const db1 = new DatabaseConnection();const db2 = new DatabaseConnection();console.log(db1 === db2); // true

1.2. Factory Method (Fabrikmethode)

Definiert eine Schnittstelle zum Erstellen eines Objekts, ermöglicht es Unterklassen jedoch, den Typ des erstellten Objekts zu ändern. Ideal geeignet für die Erstellung verschiedener Logger-Typen.

class LoggerFactory {  createLogger(type) {    switch (type) {      case 'console':        return new ConsoleLogger();      case 'file':        return new FileLogger();      default:        throw new Error('Unbekannter Logger-Typ');    }  }}

class ConsoleLogger {  log(message) { console.log(message); }}

class FileLogger {  log(message) { console.log(`[Datei]: ${message}`); }}

const factory = new LoggerFactory();const logger = factory.createLogger('console');logger.log('Testnachricht');

2. Strukturmuster (Structural Patterns)

Beschreiben Möglichkeiten, Klassen und Objekte zu kombinieren, um größere Strukturen zu bilden.

2.1. Decorator (Dekorierer)

Fügt einem Objekt dynamisch neue Aufgaben hinzu. In JavaScript werden Dekorierer oft durch Funktionen höherer Ordnung oder Prototypen implementiert.

class Coffee {  cost() { return 10; }  description() { return 'Kaffee'; }}

function withMilk(coffee) {  coffee.cost = () => coffee.cost() + 5;  coffee.description = () => coffee.description() + ', mit Milch';  return coffee;}

function withSugar(coffee) {  coffee.cost = () => coffee.cost() + 2;  coffee.description = () => coffee.description() + ', mit Zucker';  return coffee;}

let myCoffee = new Coffee();myCoffee = withMilk(myCoffee);myCoffee = withSugar(myCoffee);console.log(`${myCoffee.description()}: ${myCoffee.cost()} Rub.`); // Kaffee, mit Milch, mit Zucker: 17 Rub.

2.2. Adapter (Anpasser)

Wandelt die Schnittstelle einer Klasse in eine andere Schnittstelle um, die vom Client erwartet wird. Besonders nützlich bei der Integration von Drittanbieter-Bibliotheken.

class OldAPI {  getUserData() {    return { name: 'Ivan', age: 25, email: 'ivan@example.com' };  }}

class NewAPI {  fetchUser() {    return { fullName: 'Ivan Petrov', yearsOld: 26, contact: 'ivan@example.com' };  }}

class UserAdapter {  constructor(api) {    this.api = api;  }

  getUserData() {    const data = this.api.fetchUser();    return {      name: data.fullName,      age: data.yearsOld,      email: data.contact    };  }}

const adapter = new UserAdapter(new NewAPI());console.log(adapter.getUserData()); // { name: 'Ivan Petrov', age: 26, email: 'ivan@example.com' }