JavaScript-Designmuster, Fabrikmuster und Konstruktormuster_Javascript-Kenntnisse

Was ist ein Muster?

Ich habe mich vor einiger Zeit auf die Abschlussprüfung vorbereitet und hatte wirklich keine Zeit, den Artikel zu aktualisieren. Heute werde ich mit Ihnen über die Entwurfsmuster in JavaScript sprechen.

Zuallererst müssen wir wissen: Ein Muster ist eine wiederverwendbare Lösung, während ein Anti-Muster eine schlechte Lösung für ein bestimmtes Problem ist.

Häufige Beispiele für js-Anti-Muster

1. Übergeben Sie Zeichenfolgen an setTimeout und setInterval anstelle von Funktionen, was die interne Verwendung von eval() auslöst.
2. Definieren Sie eine große Anzahl von Variablen im globalen Kontext, um den globalen Namespace
zu verschmutzen 3. Ändern Sie den Prototyp der Object-Klasse
4. Verwenden Sie js in Inline-Form. Der in die HTML-Datei eingebettete js-Code kann nicht in externe Unit-Test-Tools eingebunden werden.
5. Missbrauch von document.write. Wenn document.write nach dem Laden der Seite ausgeführt wird, wird die Seite, auf der wir uns befinden, neu geschrieben. Wenn Sie stattdessen document.create verwenden können, versuchen Sie, document.write nicht zu verwenden.

Kategorien von Designmustern

Kreatives Designmuster

Kreative Designmuster konzentrieren sich auf den Umgang mit Objekterstellungsmechanismen, um Objekte auf eine Weise zu erstellen, die für eine bestimmte Situation geeignet ist. Zu den Eigenschaften, die in diese Kategorie fallen, gehören:

Konstrukteur, Fabrik, Zusammenfassung, Prototyp, Singleton und Builder

Strukturelles Entwurfsmuster

Bei Strukturmustern geht es um die Objektzusammensetzung und sie können häufig verwendet werden, um einfache Wege zum Herstellen von Beziehungen zwischen verschiedenen Objekten zu finden.
Zu den Mustern, die in diese Kategorie fallen, gehören:

Dekorateur, Fassadengestaltung, Fliegengewicht, Adapteradapter und Proxy-Agent

Verhaltensdesignmuster

Verhaltensmuster konzentrieren sich auf die Verbesserung oder Vereinfachung der Kommunikation zwischen verschiedenen Objekten im System.

Zu den Verhaltensmustern gehören:

Iterator, Mediator, Beobachter und Besucher

Werksmodus

Um das Problem mehrerer ähnlicher Objektdeklarationen zu lösen, können wir eine Methode namens Factory-Muster verwenden. Diese Methode dient dazu, das Problem einer großen Anzahl von Duplikaten beim Instanziieren von Objekten zu lösen.

Code kopieren Der Code lautet wie folgt:

Klassifizierung von Fabrikmustern

Der Factory-Modus ist in einfache Factory, abstrakte Factory und Smart Factory unterteilt und erfordert nicht explizit die Verwendung eines Konstruktors.

Einfaches Factory-Muster: Verwenden Sie eine Klasse (normalerweise einen Singleton), um Instanzen zu generieren.

Komplexes Fabrikmuster: Verwenden Sie Unterklassen, um zu bestimmen, welche spezifische Klasseninstanz eine Mitgliedsvariable sein soll.

Vorteile des Fabrikmodells

Der Hauptvorteil besteht darin, dass Sie die Kopplung zwischen Objekten beseitigen können, indem Sie technische Methoden anstelle des neuen Schlüsselworts verwenden. Verhindern Sie Codeduplizierung, indem Sie den gesamten Instanziierungscode an einem Ort zentralisieren.

Nachteile des Werksmodells

Für die meisten Klassen ist es am besten, das neue Schlüsselwort und den Konstruktor zu verwenden, wodurch der Code einfacher und leichter lesbar wird. Anstatt sich die Fabrikmethode ansehen zu müssen, um das herauszufinden. 

Das Factory-Muster löst das Problem der wiederholten Instanziierung, es gibt jedoch noch ein anderes Problem, nämlich das Problem der Identifizierung, da es unmöglich ist herauszufinden, von welchem ​​Objekt sie Instanzen sind.

Code kopieren Der Code lautet wie folgt:

Alert(typeof test1); //Objekt
Alert(test1 Instanz des Objekts); //true

Wann sollte das Fabrikmuster verwendet werden?

Der Werksmodus wird hauptsächlich in den folgenden Szenarien verwendet:

1. Wenn Objekte oder Komponenten eine hohe Komplexität aufweisen
2. Wenn Sie je nach Umgebung problemlos verschiedene Instanzen eines Objekts generieren müssen
3. Beim Umgang mit vielen kleinen Objekten oder Komponenten, die die gleichen Eigenschaften haben

Konstruktormuster

Konstruktor (Konstruktormethode) kann in ECMAScript verwendet werden, um bestimmte Objekte zu erstellen. Dieser Modus kann lediglich das Problem lösen, dass der obige Werksmodus keine Objektinstanzen identifizieren kann.

Code kopieren Der Code lautet wie folgt:

Die Verwendung der Konstruktormethode löst nicht nur das Problem der wiederholten Instanziierung, sondern auch das Problem der Objekterkennung. Der Unterschied zwischen diesem Modus und dem Factory-Modus ist:

1. Die Konstruktormethode erstellt kein Objekt explizit (new Object()); 2. Weisen Sie diesem Objekt direkt Eigenschaften und Methoden zu;
3. Es gibt keine Rückgabeerklärung.

Es gibt einige Spezifikationen für Konstruktormethoden:

1. Der Funktionsname und der Name des Instanziierungskonstruktors sind gleich und werden groß geschrieben (PS: Es ist nicht obligatorisch, aber diese Schreibweise hilft, den Konstruktor von der gewöhnlichen Funktion zu unterscheiden); 2. Um ein Objekt über einen Konstruktor zu erstellen, müssen Sie den neuen Operator verwenden.

Woher kommt dieses Objekt und wo wird new Object() ausgeführt, da Objekte über Konstruktoren erstellt werden können? Der Ausführungsprozess ist wie folgt:

1. Wenn ein Konstruktor verwendet wird und neuer Konstruktor() verwendet wird, wird new Object() im Hintergrund ausgeführt 2. Geben Sie dem neuen Objekt (d. h. dem von new Object() erstellten Objekt) den Gültigkeitsbereich des Konstruktors, und dieser stellt im Funktionskörper das von new Object() erstellte Objekt dar.

3. Führen Sie den Code innerhalb des Konstruktors aus; 4. Geben Sie das neue Objekt zurück (Rückkehr direkt im Hintergrund).

Konstrukteur mit Prototyp

In js gibt es ein Attribut namens Prototyp. Nach dem Aufruf des js-Konstruktors zum Erstellen eines Objekts verfügt das neue Objekt über alle Eigenschaften des Konstruktorprototyps. Auf diese Weise können mehrere Car-Objekte erstellt werden und auf denselben Prototyp zugreifen.

Code kopieren

Der Code lautet wie folgt:

Jetzt kann eine einzelne Instanz von run() von allen Car-Objekten gemeinsam genutzt werden.