Entwurfsmuster in JavaScript: fortgeschrittene Techniken mit Beispielen

Entwurfsmuster in JavaScript: Fortgeschrittenes Niveau mit Beispielen in Node.js

Entwurfsmuster sind bewährte Architekturlösungen für typische Aufgaben. Wenn die grundlegenden Muster (Singleton, Factory, Observer) bereits bekannt sind, ist es an der Zeit, sich mit komplexeren Konstruktionen zu befassen. In diesem Artikel analysieren wir vier fortgeschrittene GoF-Muster anhand von JavaScript-Beispielen (Node.js): Composite, Chain of Responsibility, State und Memento. Diese Muster helfen Ihnen, flexiblen, skalierbaren und wartbaren Code zu schreiben.

1. Composite (Kompositum)

Zweck: Ermöglicht es, Objekte in einer Baumstruktur zu gruppieren und mit jedem Objekt oder jeder Gruppe einheitlich zu arbeiten.

Beispiel: Ein Dateisystem, in dem ein Ordner Dateien und andere Ordner enthalten kann. Wir möchten die Gesamtgröße berechnen.

// Komponenteclass FileSystemComponent {  getSize() {    throw new Error('Methode getSize() muss implementiert werden');  }}

// Blattclass File extends FileSystemComponent {  constructor(name, size) {    super();    this.name = name;    this.size = size;  }

  getSize() {    return this.size;  }}

// Container (Knoten)class Folder extends FileSystemComponent {  constructor(name) {    super();    this.name = name;    this.children = [];  }

  add(component) {    this.children.push(component);  }

  getSize() {    return this.children.reduce((total, child) => total + child.getSize(), 0);  }}

// Verwendungconst root = new Folder('root');const src = new Folder('src');const index = new File('index.js', 500);const utils = new File('utils.js', 300);

src.add(index);src.add(utils);root.add(src);root.add(new File('package.json', 200));

console.log(`Gesamtgröße: ${root.getSize()} Bytes`); // 1000 Bytes

Vorteile: Vereinfacht die Arbeit mit Bäumen, verbirgt die Komplexität der Hierarchie vor dem Client.

2. Chain of Responsibility (Verantwortungskette)

Zweck: Ermöglicht es, eine Anfrage entlang einer Kette von Bearbeitern weiterzuleiten, bis einer von ihnen die Anfrage bearbeitet.

Beispiel: Verarbeitung von HTTP-Anfragen in Express.js (Middleware).

class Handler {  setNext(handler) {    this.next = handler;    return handler;  }

  handle(request) {    if (this.next) {      return this.next.handle(request);    }    return null;  }}

class AuthHandler extends Handler {  handle(request) {    if (!request.token) {      return 'Fehler: nicht autorisiert';    }    console.log('AuthHandler: Prüfung bestanden');    return super.handle(request);  }}

class RoleHandler extends Handler {  handle(request) {    if (request.role !== 'admin') {      return 'Fehler: unzureichende Berechtigungen';    }    console.log('RoleHandler: Rolle bestätigt');    return super.handle(request);  }}

class LoggingHandler extends Handler {  handle(request) {    console.log(`LoggingHandler: Anfrage von ${request.user}`);    return super.handle(request);  }}

// Aufbau der Ketteconst auth = new AuthHandler();const role = new RoleHandler();const log = new LoggingHandler();auth.setNext(role).setNext(log);

const request = { token: 'abc123', role: 'admin', user: 'Ivan' };const result = auth.handle(request);console.log(result); // null (alles ok)

const badRequest = { token: 'abc123', role: 'user', user: 'Petr' };console.log(auth.handle(badRequest)); // 'Fehler: unzureichende Berechtigungen'

Vorteile: Reduziert die Kopplung, Bearbeiter können leicht hinzugefügt/entfernt werden.

3. State (Zustand)

Zweck: Ermöglicht es einem Objekt, sein Verhalten abhängig von seinem internen Zustand zu ändern.

Beispiel: Ein Dokument mit den Zuständen: Entwurf, In Moderation, Veröffentlicht.

class Docu