Entwurfsmuster in der modernen JavaScript-Entwicklung

Der Autor des Materials, dessen Übersetzung wir veröffentlichen, sagt, dass in der Welt der Softwareentwicklung „Architekturdesign“ als Prozess der Erstellung einer Anwendung bezeichnet werden kann, bei der versucht wird, sie qualitativ hochwertig, zuverlässig und für den Support gut zugänglich zu machen. Darüber hinaus können Sie mit Entwurfsmustern (Mustern) mit Konzepten arbeiten, mit denen häufig auftretende Probleme gelöst werden können. Diese Entscheidungen können von abstrakt, konzeptionell bis sehr spezifisch variieren. Ihr Wissen ermöglicht es Entwicklern, effektiv miteinander zu kommunizieren.

Wenn mindestens zwei Entwickler in einem Team Muster verstehen, wird es sehr produktiv, über die Lösung von Problemen zu sprechen, mit denen das Team konfrontiert ist. Wenn nur ein Mitglied des Teams über die Muster Bescheid weiß, wird anderen Mitgliedern des Teams normalerweise nur klargestellt, was er weiß.



Der Zweck dieses Artikels ist es, Leser mit einer Art formaler Präsentation von Wissen auf dem Gebiet der Softwareentwicklung zu interessieren, ihnen die Idee von Entwurfsmustern zu zeigen und einige Muster zu beschreiben, die insofern interessant sind, als sie in der modernen JavaScript-Entwicklung Anwendung finden.

Singleton-Muster

▍ Allgemein

Das Entwurfsmuster "Singleton" (auch "Singleton" genannt) kann nicht als eines der am häufigsten verwendeten Muster bezeichnet werden, aber wir beginnen das Gespräch mit ihm, da es relativ leicht zu verstehen ist.

Dieses Muster ergibt sich aus dem mathematischen Konzept eines Singletons - einer Singleton-Menge, dh einer Menge, die nur ein Element enthält. Zum Beispiel ist die Menge {null} ein Singleton.

Im Bereich der Softwareentwicklung besteht die Bedeutung des "Singleton" -Musters darin, dass wir die Anzahl möglicher Instanzen einer bestimmten Klasse auf ein Objekt beschränken. Beim ersten Versuch, ein Objekt basierend auf einer Klasse zu erstellen, die dieses Muster implementiert, wird ein solches Objekt tatsächlich erstellt. Bei allen nachfolgenden Versuchen, eine Instanz der Klasse zu erstellen, wird das Objekt zurückgegeben, das beim ersten Versuch, eine Instanz der Klasse abzurufen, erstellt wurde.


Warum noch ein Superheld, wenn wir Batman haben?

Oben sehen Sie ein Beispiel für eine Klasse, die das Singleton-Muster implementiert.

▍ Warum wird es benötigt?

Es ist klar, dass dieses Muster es uns erlaubt, uns auf nur einen „Superhelden“ zu beschränken (dies ist offensichtlich Batman). Aber warum sollte er es sonst brauchen?

Obwohl dieses Muster nicht ohne eigene Probleme ist (früher wurde es als böse bezeichnet, da der Singleton als pathologische Lügner bezeichnet wurde ), kann es in einigen Situationen sehr nützlich sein. Eine dieser Situationen besteht darin, Konfigurationsobjekte zu initialisieren. In einer typischen Anwendung ist es sinnvoll, nur eine Instanz eines solchen Objekts beizubehalten, es sei denn, gemäß den Merkmalen des Projekts werden mehrere ähnliche Objekte darin verwendet.

▍Wo kann man es verwenden?

Das Hauptbeispiel für die Verwendung des Singleton-Musters in großen gängigen Frameworks sind Angular-Dienste. Die Angular-Dokumentation enthält eine separate Seite, auf der erläutert wird, wie ein Dienst zu einem Singleton gemacht wird.

Das Design von Diensten in Form von Singletones hat eine tiefe Bedeutung, da Dienste als Repositorys für Status und Konfiguration verwendet werden und es Ihnen ermöglichen, die Interaktion zwischen Komponenten zu organisieren. All dies führt dazu, dass der Entwickler benötigt, damit seine Anwendung nicht mehrere Instanzen desselben Dienstes hat.

Betrachten Sie ein Beispiel. Angenommen, wir haben eine einfache Anwendung, mit der die Anzahl der Klicks auf Schaltflächen gezählt wird.


Jeder Klick auf eine der Schaltflächen aktualisiert den Zähler

Die Anzahl der Klicks auf die Schaltflächen muss in einem Objekt gespeichert werden, wodurch die folgenden Funktionen implementiert werden:

• Sie können Klicks auf Schaltflächen zählen.
• Es ermöglicht das Lesen des aktuellen Werts des Klickzählers.

Wenn ein solches Objekt kein Singleton wäre (und jede Schaltfläche eine eigene Instanz eines solchen Objekts hätte), würde das Programm die Anzahl der Klicks auf die Schaltflächen falsch berechnen. Darüber hinaus muss bei diesem Ansatz das folgende Problem gelöst werden: "Von welchem ​​bestimmten Objekt, das für das Zählen der Klicks verantwortlich ist, werden die auf dem Bildschirm angezeigten Daten übernommen?"

Beobachtermuster

▍ Allgemein

Das Beobachtermuster ist ein Entwurfsmuster, bei dem ein Objekt, das als Subjekt bezeichnet wird, eine Liste abhängiger Objekte, die als Beobachter bezeichnet werden, verwaltet und sie automatisch benachrichtigt, wenn sich ihr Status ändert, normalerweise durch Aufrufen einer ihrer Methoden .

Dieses Muster zu verstehen ist nicht schwierig, wenn man seine Analogie in der realen Welt findet. Wir sprechen nämlich über Zeitungsabonnements.

Angenommen, Sie kaufen normalerweise Zeitungen an einem Kiosk. Sie gehen dorthin und fragen, ob es eine neue Ausgabe Ihrer Lieblingszeitung gibt. Wenn das, was Sie brauchen, nicht im Kiosk ist, gehen Sie nach Hause, verschwenden Zeit und gehen dann wieder zum Kiosk. Wenn wir diese Situation als auf JavaScript angewendet betrachten, wäre dies wie eine zyklische Abfrage einer Entität, die durchgeführt wird, bis die erforderlichen Daten von JavaScript empfangen werden.

Nachdem Sie endlich die Zeitung erhalten haben, die Sie benötigen, können Sie mit dem beginnen, was Sie die ganze Zeit angestrebt haben - nehmen Sie eine Tasse Kaffee und entfalten Sie die Zeitung. In JavaScript wäre dies gleichbedeutend mit einem Rückruf, den wir aufrufen würden, nachdem wir das gewünschte Ergebnis erhalten hatten.


Endlich können Sie die Zeitung lesen

Es wäre viel vernünftiger, dies zu tun: Abonnieren Sie eine Zeitung und erhalten Sie jeden Tag die neueste Ausgabe. Mit diesem Ansatz teilt der Verlag Ihnen mit, dass eine neue Ausgabe der Zeitung veröffentlicht wurde, und liefert sie Ihnen. Sie müssen nicht mehr zum Kiosk gehen. Keine Zeitverschwendung mehr.

Wenn Sie erneut zu JavaScript wechseln, müssen Sie nicht mehr in der Schleife auf ein Ergebnis warten und nach Erhalt eine bestimmte Funktion aufrufen. Stattdessen informieren Sie den Betreff, dass Sie an bestimmten Ereignissen (Nachrichten) interessiert sind, und übergeben ihm die Rückruffunktion, die aufgerufen werden sollte, wenn die gewünschten Daten bereit sind. In diesem Fall werden Sie Beobachter.


Jetzt werden Sie Ihre Lieblingsmorgenzeitung nie mehr verpassen

Das fragliche Muster hat eine nette Eigenschaft: Sie müssen nicht der einzige Beobachter sein. Wenn Sie Ihre Lieblingszeitung nicht bekommen können, wird es Sie verärgern. Aber das Gleiche wird mit anderen Menschen passieren, die es nicht kaufen können. Deshalb können mehrere Beobachter ein Thema abonnieren.

▍ Warum wird es benötigt?

Das Muster "Beobachter" wird in vielen Situationen verwendet, sollte jedoch normalerweise verwendet werden, wenn Sie eine Eins-zu-Viele-Beziehung zwischen Objekten erstellen möchten, und gleichzeitig sollten solche Objekte nicht stark miteinander verbunden sein. Darüber hinaus sollte das System in der Lage sein, eine unbegrenzte Anzahl von Objekten über bestimmte Änderungen zu informieren.

JavaScript-Anwendungen sind ein großartiger Ort, um das Beobachtermuster anzuwenden, da hier alles ereignisgesteuert ist. Anstatt ständig auf eine bestimmte Entität zu verweisen, um herauszufinden, ob ein für Sie interessantes Ereignis aufgetreten ist, ist es viel besser, wenn Sie benachrichtigt werden, wann das Auftreten dieses Ereignisses (dies ähnelt dem alten Sprichwort: "Rufen Sie uns nicht an. Wenn nötig, rufen wir Sie selbst an").

Es ist wahrscheinlich, dass Sie bereits Designs verwendet haben, die dem Beobachtermuster ähneln. Dies ist beispielsweise addEventListener . Das Hinzufügen eines Ereignis-Listeners zu einem Element weist alle Anzeichen für die Verwendung des Beobachtermusters auf:

• Sie können das Objekt abonnieren.
• Sie können das Objekt abbestellen.
• Ein Objekt kann alle seine Abonnenten über das Ereignis informieren.

Es ist nützlich, über die Existenz des „Beobachter“ -Musters in dem Sinne Bescheid zu wissen, dass Sie mit diesem Wissen Ihr eigenes Thema realisieren können oder viel schneller als zuvor, um mithilfe dieses Musters eine vorhandene Lösung zu finden.

▍Wo kann man es verwenden?

Die grundlegende Implementierung dieses Musters muss nicht besonders kompliziert sein, aber es gibt ausgezeichnete Bibliotheken, die es implementieren und in vielen Projekten verwendet werden. Wir sprechen über das ReactiveX- Projekt und seine JavaScript-Version von RxJS .

Die RxJS-Bibliothek ermöglicht nicht nur das Abonnieren von Themen, sondern bietet dem Programmierer auch die Möglichkeit, Daten auf verschiedene Arten zu transformieren, ermöglicht das Kombinieren vieler Abonnements und verbessert die Verwaltung asynchroner Vorgänge. Darüber hinaus sind ihre Fähigkeiten nicht darauf beschränkt. Wenn Sie jemals die Möglichkeiten Ihrer Programme zur Verarbeitung und Konvertierung von Daten auf eine höhere Ebene verbessern wollten, können Sie empfehlen, die RxJS-Bibliothek zu studieren.

Zusätzlich zum "Beobachter" -Muster kann das ReactiveX-Projekt stolz auf die Implementierung des "Iterator" -Musters sein, das es dem Betreff ermöglicht, Abonnenten im Wesentlichen über den Abschluss des Abonnements zu informieren und das Abonnement auf Initiative des Betreffs zu kündigen. In diesem Artikel werde ich nicht über das "Iterator" -Muster sprechen, aber ich kann sagen, dass es gute Übungen sein kann, dieses Muster zu studieren und darüber nachzudenken, wie es sich mit dem "Beobachter" -Muster zusammensetzt, wenn Sie gerade erst anfangen, Entwurfsmuster zu lernen.

Fassadenmuster

▍ Allgemein

Das Fassadenmuster erhielt seinen Namen von der Architektur. In der Architektur ist eine Fassade normalerweise eine der Außenseiten eines Gebäudes, normalerweise die Vorderseite. Englisch hat das Wort "Fassade" aus dem Französischen entlehnt. Wir sprechen über das Wort "Fassade", das unter anderem "die Vorderseite des Gebäudes" bedeutet.

Die Fassade des Gebäudes in der Architektur ist das Äußere des Gebäudes und verbirgt das Innere. Ähnliche Eigenschaften können im „Fassadenmuster“ festgestellt werden, da es darauf abzielt, komplexe interne Mechanismen hinter einer bestimmten externen Schnittstelle zu verbergen. Seine Anwendung ermöglicht es dem Entwickler, mit einer externen API zu arbeiten, die recht einfach angeordnet ist, und bietet gleichzeitig die Möglichkeit, die hinter der Fassade verborgenen internen Mechanismen zu ändern, ohne die Leistung des Systems zu beeinträchtigen.

▍ Warum wird es benötigt?

Das "Fassaden" -Muster kann in einer Vielzahl von Situationen verwendet werden, darunter insbesondere solche, bei denen versucht wird, den Code verständlicher zu machen (dh komplexe Mechanismen hinter einfachen APIs zu verbergen), und solche, bei denen Fragmente von Systemen dazu neigen, so viel wie möglich zu machen lockerer miteinander verbunden.


Diese Objekte brauchen etwas aus der Drachenhöhle.

Es ist leicht zu erkennen, dass ein Fassadenobjekt (oder eine Ebene mit mehreren Objekten) eine sehr nützliche Abstraktion ist. Es ist unwahrscheinlich, dass jemand einem Drachen begegnen möchte, wenn dies vermieden werden kann. Das Fassadenobjekt wird benötigt, um anderen Objekten eine bequeme API zur Verfügung zu stellen, und dieses Objekt wird alle Drachentricks alleine bewältigen.

Ein weiteres nützliches Merkmal des "Fassaden" -Musters ist, dass der Drache nach Wunsch "neu hergestellt" werden kann, dies hat jedoch keine Auswirkungen auf andere Teile der Anwendung. Angenommen, Sie möchten einen Drachen durch ein Kätzchen ersetzen. Das Kätzchen hat wie der Drache Krallen, ist aber leichter zu füttern. Ändern Sie den Drachen in ein Kätzchen - dies bedeutet -, um den Code des Fassadenobjekts neu zu schreiben, ohne Änderungen an den abhängigen Objekten vorzunehmen.

▍Wo kann man es verwenden?

Das Fassadenmuster findet sich häufig in Angular. Dort werden Dienste als Mittel verwendet, um einige grundlegende Logik zu vereinfachen. Dieses Muster gilt jedoch nicht nur für Angular. Unten sehen Sie dies.

Angenommen, wir müssen der Anwendung ein Statusverwaltungssystem hinzufügen. Um dieses Problem zu lösen, können Sie verschiedene Tools verwenden, darunter Redux, NgRx, Akita, MobX, Apollo sowie ständig neue Tools. Warum nicht alle ausprobieren?
Was ist die Hauptfunktionalität, die eine Statusverwaltungsbibliothek bereitstellen sollte? Dies sind wahrscheinlich die folgenden Funktionen:

• Ein Mechanismus, um das Zustandsverwaltungssystem darüber zu informieren, dass wir den Zustand ändern müssen.
• Der Mechanismus zum Erhalten des aktuellen Zustands oder seines Fragments.

Es sieht alles nicht so schlecht aus.

Mit dem Muster „Fassade“ können Sie jetzt Fassaden schreiben, um mit verschiedenen Teilen des Status zu arbeiten, und praktische APIs bereitstellen, die im Programm verwendet werden können. Zum Beispiel so etwas wie facade.startSpinner() , facade.stopSpinner() und facade.getSpinnerState() . Solche Methoden sind leicht zu verstehen, Sie können sie in einem Gespräch über das Programm leicht referenzieren.

Danach können Sie mit Objekten arbeiten, die das Fassadenmuster implementieren, und Code schreiben, der Ihren Code so transformiert, dass er mit Apollo funktioniert (das Verwalten des Status mit GraphQL ist ein heißes Thema). Möglicherweise werden Sie während der Tests feststellen, dass Apollo nicht für Sie geeignet ist oder dass es Ihnen unangenehm ist, Unit-Tests zu schreiben, die auf diesem Statusverwaltungssystem basieren. Kein Problem - schreiben Sie eine neue Fassade, die MobX unterstützt, und versuchen Sie es erneut.


Verschiedene Systeme zur Verwaltung des Status der Anwendung, auf die über eine einzige Fassade zugegriffen werden kann, können auch Drachen sein ...

Zusammenfassung

Sie haben wahrscheinlich bemerkt, dass wir bei der Diskussion über Entwurfsmuster keine Codebeispiele berücksichtigt haben. Tatsache ist, dass eine gründliche Analyse jedes Musters mindestens ein separates Kapitel in der Ferne des dünnsten Buches zeichnet. Übrigens, da es sich um Bücher handelt, haben wir hier interessante Veröffentlichungen, die Sie für diejenigen ansehen können, die sich mit dem Studium von Mustern befassen möchten.

Am Ende möchte ich sagen, dass bei der Entwicklung von Mustern nichts besser ist als eine Suche im Internet, das Lesen und unabhängige Testen verschiedener Ideen. Selbst wenn sich herausstellt, dass Sie niemals Muster verwenden werden, werden Sie etwas Neues verstehen und etwas darüber lernen und in Bereichen aufwachsen, die für Sie unerwartet sind.

Liebe Leser! Welche Designmuster verwenden Sie?