In diesem Projekt finden sich einige Code-Patterns wieder. Die wichtigsten Patterns wie Null-Object, Projector und Decorator sind in den nachfolgenden Unterkapiteln genauer erläutert. Eine weitere Rolle spielt unter anderem die Master-Detail-View, welche bereits im Kapitel Master-Detail-Ansicht erläutert ist.. Zudem ist die Anwendung nicht typisch bzw. genau abgegrenzt. Die Implementation erhält durch die verwendeten Patterns eine Struktur und läuft stabiler.
Ein Pattern, welches im Verlauf der Arbeit eine wichtige Rolle eingenommen hat, ist das Null-Object-Pattern [2]. Null hat den Nachteil, dass alle Funktionsaufrufe zu Fehlern führen. Das Null-Object besteht aus vordefinierten Werten und besitzt für alle Funktionen eine \emph{Do-Nothing}-Implementation. Durch die Verwendung dieses speziellen Objekts entfällt eine ansonsten notwendige Nullwertprüfung. Zudem ist jedes erstellte Null-Object wertegleich.
Eine Null-Option ist notwendig, um eine Selektion zurücksetzen zu können. Die Verwendung des Null-Objects findet sich an mehreren Stellen des Codes wieder. Die Definition der angewendeten Null-Option zeigt der nachfolgende Code 4.6.
Mit dem Erhalt des Typs Option bietet die Konstante dieselbe Funktionalität wie die gewünschten Objekte. Der Codeausschnitt 4.6 befindet sich in der Datei optionsModel.js. Mehr zur Dateiaufteilung ist in den nächsten zwei Unterkapiteln zu lesen.
Das Projector-Pattern [3] basiert auf dem verbreiteten Model-View-Control-Pattern. Das Model verwaltet die dargestellten Daten. Zudem enthält die Komponente des Patterns die Geschäftslogik und verarbeitet die Regeln und Anfragen für die Daten. Ein Controller generiert privat gehaltene Modelle. Dabei stellt dieser nur die notwendigen Funktionen zur Verfügung. Diese Funktionen können Getter, Setter und Listener der observierten Modelle und Werte sein. Der Projektor bindet Datenmodelle über den Controller an die View. Auf der anderen Seite bindet sich die View an die Models. Aus den Bindings und den Daten generiert ein Projector die passende View. Die View ist passiv und hat keine Kenntnis der anderen Komponenten.
Dieses Pattern zeigte sich als eines der Wichtigsten für die Erstellung der neuen Komponente. In den folgenden Grafiken sind Models als Zylinder, Controller als Parallelogramm und Projectors als Oval dargestellt. Die Raute mit Option ist ein Datentyp, der über das gesamte Projekt seine Anwendung findet. Das starter.js beinhaltet alle Bestandteile, welche für eine Anwendung notwendig sind. Eine genauere Beschreibung des Puzzles folgt im Unterkapitel Decorator Pattern. Die erste Implementation, welche dieses Pattern verwendet, ist auf Abbildung 4.11 ersichtlich.
Diese Version zeigt noch viel Komplexität und duplizierenden Code in den einzelnen Funktionen. Eine genaue Analyse der Komponente zeigt, dass sich das Pattern zwei Mal anwenden lässt. Die neue Aufteilung ergibt die zwei folgenden Abbildungen 4.12 und 4.13. Die Implementation der dargestellten Diagramme resultiert aus einem Refactoring im grösseren Rahmen.
Zum einen findet sich das Projector-Pattern in einer einzelnen Spalte in der Options-Liste wieder. Pro Kolonne existieren eine Auswahl und eine Menge von Optionen. Diese beiden Bestandteile besitzen je ein eigenes Model und einen eigenen Controller. Der Projektor generiert eine gemeinsame View und bindet diese an die beiden Controller. Bei einer Anwendung übernimmt die ColumnOptionsComponent die Verwaltung gewisser Bausteine. Mehr zu dem Baustein folgt im Kapitel Decorator Pattern.
Die Anwendungskomponente einer Column findet sich als Bestandteil des zweiten Projector-Patterns wieder. Ein SelectController verwaltet eine bis mehrere ColumnOptionsComponents sowie ein Element für die Tastaturnavigation. Die sogenannte Cursor-Position verwendet im Hintergrund ebenfalls einen SelectedOptionController. Dieser ist derselbe wie in der Abbildung 4.12 und findet hier eine Wiederverwendung. Für die Definition der Bindings greifen die einzelnen Projektoren auf denselben Controller zu. Der Master-Detail-Aufbau der neuen Komponente findet sich in der Aufteilung der Projektoren wieder. Der Detail-Baustein kümmert sich um die aktuelle Auswahl und das Eingabefeld. Die Master-Komponente verwaltet alle Spalten mit den Kategorie- und Werte-Optionen sowie dessen Bindings. Eine weitere Funktion ist die Einbettung der beiden Projektoren in eine gemeinsame View. Auch diese Projector-Pattern-Anwendung schliesst mit einer Component – der SelectComponent – ab. Mehr zu dieser und der ColumnOptionsComponent steht im nächsten Kapitel.
Ein Decorator [4] bietet zusätzliches Verhalten, ohne das originale Objekt zu verändern. Dabei lassen sich verschiedene Funktionen kombinieren. Dieses Pattern ermöglicht die Erstellung eines modularen und anpassbaren Codes. In diesem Projekt unterstützt es die Gestaltung und Erweiterung der Auswahlkomponente.
Wie im vorherigen Kapitel erwähnt, besteht die neue Komponente unter anderem aus zwei sogenannten Component-Bausteinen. Die Decorator sind in den Abbildungen 4.12 und 4.13 als Puzzle dargestellt. Diese Bestandteile kombinieren die Funktionalität des Controllers mit der Erstellung der View. Dadurch lässt sich die neue Komponente einfacher anwenden.
Ein weiterer Einsatzort ist in der Abbildung 4.13 zu sehen. Der SelectComponentByTableValues in Code 4.7 dekoriert die SelectComponentByCallbacks. Damit bietet die neue Komponente zwei verschiedene Möglichkeiten der Anwendung. Das nächste Kapitel geht genauer auf den Master-View-Bereich des SelectProjectors – Abbildung 4.13 – ein.
[2] (GeeksforGeeks, 2024) [3] (König, 2024) [4] (Kumar, 2024)
