Funktionale Programmierung mit JavaScript nutzen

Designmuster sind etablierte Lösungen für häufige Herausforderungen im Softwaredesign. Durch ihre Verwendung können Entwickler die Lesbarkeit, Skalierbarkeit und Wartbarkeit des Codes verbessern. In diesem Artikel wird untersucht, wie TypeScript, eine immer beliebter werdende Obermenge von JavaScript, diese Muster durch seine Typsicherheit und moderne Funktionen verbessert. Unabhängig davon, ob Sie eine umfangreiche Anwendung oder ein Nebenprojekt entwickeln, wird das Verständnis von Entwurfsmustern in TypeScript Ihre Entwicklungsfähigkeiten verbessern.

Was sind Designmuster?

Entwurfsmuster sind wiederverwendbare, generische Lösungen für häufige Herausforderungen im Softwaredesign. Dabei handelt es sich nicht um tatsächlichen Code, sondern um Vorlagen zur Behebung dieser Probleme. Diese Muster stammen aus dem Buch „Gang of Four“ (GoF) und lassen sich in drei Hauptkategorien einteilen:

1. Erstellungsmuster:Beschäftigt sich mit den Mechanismen der Objekterstellung.
2. Strukturelle Muster: Betonen Sie die Zusammensetzung und Organisation von Objekten.
3. Verhaltensmuster:Konzentrieren Sie sich auf die Interaktionen und Kommunikation zwischen Objekten.

Warum Designmuster in TypeScript verwenden?

Die Funktionen von TypeScript machen die Implementierung von Designmustern robuster:

1. Statische Typisierung:Fehler werden zur Kompilierungszeit abgefangen, wodurch Laufzeitfehler reduziert werden.
2. Schnittstellen und Generics:Ermöglichen präzisere und flexiblere Implementierungen.
3. Aufzählungs- und Union-Typen: Vereinfachen Sie bestimmte Muster, z. B. die Statusverwaltung.
4. Erweiterte Tools: Mit IDE-Unterstützung steigert TypeScript die Produktivität.

Einige wichtige Designmuster in TypeScript

1. Singleton-Muster

Stellt sicher, dass eine Klasse nur eine Instanz hat und bietet einen globalen Zugriffspunkt darauf.

Implementierung in TypeScript:

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

Anwendungsfall:Verwaltung von Konfigurationseinstellungen oder Datenbankverbindungen.

2. Fabrikmuster

Bietet eine Schnittstelle zum Erstellen von Objekten ohne Angabe ihrer genauen Klassen.

Umsetzung:

interface Button {
  render(): void;
}

class WindowsButton implements Button {
  render() {
    console.log("Rendering Windows button");
  }
}

class MacButton implements Button {
  render() {
    console.log("Rendering Mac button");
  }
}

class ButtonFactory {
  static createButton(os: string): Button {
    if (os === "Windows") return new WindowsButton();
    if (os === "Mac") return new MacButton();
    throw new Error("Unknown OS");
  }
}

const button = ButtonFactory.createButton("Mac");
button.render(); // Output: Rendering Mac button

Anwendungsfall: UI-Frameworks für plattformübergreifende Anwendungen.

3. Beobachtermuster

Definiert eine Eins-zu-viele-Beziehung, bei der Änderungen an einem Objekt allen seinen abhängigen Objekten mitgeteilt werden.

Umsetzung:

class Subject {
  private observers: Array<() => void> = [];

  addObserver(observer: () => void) {
    this.observers.push(observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer());
  }
}

const subject = new Subject();
subject.addObserver(() => console.log("Observer 1 notified!"));
subject.addObserver(() => console.log("Observer 2 notified!"));
subject.notifyObservers();

Anwendungsfall: Reaktivität in Front-End-Frameworks wie Angular oder React.

4. Strategiemuster

Definiert eine Familie von Algorithmen, kapselt jeden und macht sie austauschbar.

Umsetzung:

interface PaymentStrategy {
  pay(amount: number): void;
}

class CreditCardPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using Credit Card`);
  }
}

class PayPalPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using PayPal`);
  }
}

class PaymentContext {
  constructor(private strategy: PaymentStrategy) {}

  executePayment(amount: number) {
    this.strategy.pay(amount);
  }
}

const payment = new PaymentContext(new PayPalPayment());
payment.executePayment(100); // Paid 100 using PayPal

Anwendungsfall: Zahlungssysteme in E-Commerce-Plattformen.

5. Dekorationsmuster

Fügt einem Objekt dynamisch neue Funktionen hinzu.

Umsetzung:

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

Anwendungsfall:Hinzufügen von Funktionen zu einem Produkt in einem Warenkorb.

Tabelle mit Designmustern

Pattern	Category	Use Case	Benefit
Singleton	Creational	Managing global state like configurations	Guarantees single instance
Factory	Creational	UI components or APIs	Decouples creation logic
Observer	Behavioral	Event systems in frameworks	Simplifies communication
Strategy	Behavioral	Algorithm selection in runtime	Enhances flexibility
Decorator	Structural	Extending class functionality	Adds dynamic capabilities

Muster

Kategorie

Anwendungsfall

Vorteil
Singleton Kreativ Globale zustandsähnliche Konfigurationen verwalten Garantiert eine einzelne Instanz Fabrik Kreativ UI-Komponenten oder APIs Entkoppelt die Erstellungslogik Beobachter Verhalten Ereignissysteme in Frameworks Vereinfacht die Kommunikation Strategie Verhalten Algorithmusauswahl zur Laufzeit Erhöht die Flexibilität Dekorateur Strukturell Klassenfunktionalität erweitern Fügt dynamische Funktionen hinzu Best Practices für die Implementierung von Designmustern
1. Verstehen Sie das Problem:
Verkomplizieren Sie die Dinge nicht durch unnötige Muster. 2. Muster kombinieren: Erwägen Sie die Verwendung von Kombinationen wie Singleton mit Factory.

3. Nutzen Sie TypeScript-Funktionen:

Nutzen Sie Schnittstellen, Generika und Aufzählungen, um die Implementierung zu vereinfachen.
• 4. Tests schreiben:Stellen Sie sicher, dass die Muster wie beabsichtigt funktionieren. Zusätzliche Ressourcen
• হাতে কলমে জাভাস্ক্রিপ্ট von Junayed Ahmed

Refactoring to Patterns

---

von

Joshua Kerievsky

---

Bis zum nächsten Artikel, Junge! ?

Meine persönliche Website: https://shafayet.zya.me

Etwas windig, oder?

Das obige ist der detaillierte Inhalt vonFunktionale Programmierung mit JavaScript nutzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!