🙄 👩🏾‍🤝‍👨🏻 🌿 JavaScript-Komponist 👊🏼 🌽 🤚🏽

Die Übersetzung des Artikels wurde im Vorfeld des Kursbeginns „JavaScript Developer. Basic " .

In diesem Artikel werden wir eines der strukturellen Entwurfsmuster in JavaScript aufschlüsseln - den Linker . In der Softwareentwicklung können Sie mit dem Linker auf Objektgruppen verweisen, als wären sie separate Objekte, wodurch sichergestellt wird, dass die Gesamtstruktur dieser Objekte und ihre Kombinationen konsistent sind.

Die Hauptaufgabe eines Linkers besteht darin , viele Objekte in einer einzigen Baumstruktur zu kombinieren . Diese Baumstruktur repräsentiert eine Hierarchie vom Besonderen zum Ganzen .

Um besser zu verstehen, wie der Linker funktioniert, müssen Sie verstehen, wie die Hierarchie vom Einzelnen zum Ganzen funktioniert und wie sie visualisiert werden kann.

In einer Hierarchie von bestimmten zu ganzen ist jedes Objekt in der Sammlung ein Teil der Gesamtkomposition . Diese allgemeine Komposition ist wiederum eine Sammlung ihrer Teile . Die Hierarchie vom Besonderen zum Ganzen ist als baumartige Struktur aufgebaut, in der jedes einzelne "Blatt" oder "Knoten" auf dieselbe Weise wie jedes andere Blatt oder jeder andere Knoten in einem Teil des Baums wahrgenommen und verarbeitet wird . Eine Gruppe oder Sammlung von Objekten (ein Teilbaum von Blättern / Knoten) ist also auch ein Blatt oder ein Knoten.

Visuell kann es so dargestellt werden:

Nachdem wir die Beziehung zwischen dem Privaten und dem Ganzen klarer verstanden haben, kehren wir zum Begriff Linker zurück... Wir haben definiert, dass die Verwendung des Linkers darin besteht , die genannten Objekte (Blätter / Knoten) nach diesem Prinzip zu einem Baum zu kombinieren .

So bekommen wir ein Design - Muster , in dem jedes Element einer Sammlung kann auch gehören andere Sammlungen , die tief verschachtelte Strukturen ermöglicht gebaut werden.

Interne Struktur

Jeder Knoten in der Baumstruktur verfügt über eine Reihe gemeinsamer Eigenschaften und Methoden , mit denen er einzelne Objekte auf dieselbe Weise wie mit Objektsammlungen verwalten und mit ihnen interagieren kann. Diese Schnittstelle setzt die Konstruktion rekursiver Algorithmen voraus, die alle Objekte in der zusammengesetzten Sammlung durchlaufen.

Wo gilt dieses Muster?

Unter Betriebssystemen bietet dieses Muster viele Möglichkeiten, z. B. das Erstellen von Verzeichnissen innerhalb von Verzeichnissen.

Dateien (der Einfachheit halber können alle Objekte in einem Verzeichnis als „Elemente“ betrachtet werden ) sind Blätter / Knoten (Teile) innerhalb eines gesamten Verbunds (Verzeichnisses). Ein in einem Verzeichnis erstelltes Unterverzeichnis ist in ähnlicher Weise ein Blatt oder ein Knoten, der andere Elemente wie Videos, Bilder usw. enthält. Gleichzeitig sind Verzeichnisse und Unterverzeichnisse auch Verbundwerkstoffe , da es sich um Sammlungen separater Teile (Objekte, Dateien usw.) handelt. etc.).

Beliebte Bibliotheken wie React oder Vue verwenden dieses Muster häufig, um zuverlässige, wiederverwendbare Schnittstellen zu erstellen. Alle Elemente der angezeigten Webseiten werden als Komponenten dargestellt . Jede Komponente einer Webseite ist ein Blatt eines Baums und kann selbst viele Komponenten kombinieren (in diesem Fall wird ein Verbund gebildet , aber es ist immer noch ein Blatt eines Baums ). Es ist ein leistungsstarkes Tool, das die Entwicklung für Bibliotheksbenutzer erheblich vereinfacht. Darüber hinaus können Sie skalierbare Anwendungen erstellen, an denen mehrere Objekte beteiligt sind.

Warum ist diese Vorlage interessant?

Kurzum: Es ist sehr mächtig.

Der Linker ist ein so leistungsfähiges Entwurfsmuster, dass ein Objekt mithilfe einer gemeinsamen Schnittstelle für alle Objekte als Verbund behandelt werden kann.

Dies bedeutet, dass Sie Objekte wiederverwenden können, ohne befürchten zu müssen, dass sie möglicherweise nicht mit anderen kompatibel sind.

Bei der Entwicklung einer Anwendung müssen Sie möglicherweise mit Objekten arbeiten, die eine Baumstruktur haben. In diesem Fall kann die Verwendung dieses Musters sehr effektiv sein.

Beispiele von

Angenommen, wir entwickeln eine App für ein Unternehmen, mit der Ärzte für Plattformen zertifiziert werden können, die Gesundheitsdienstleistungen aus der Ferne bereitstellen. Der Prozess umfasst das Sammeln von Unterschriften für gesetzliche Dokumente.

Wir werden mit einer Klasse arbeiten Document, die eine Eigenschaft signaturemit dem Standardwert false hat. Wenn der Arzt das Dokument unterschreibt, wird der Signaturwert in seine Unterschrift geändert. In dieser Klasse definieren wir auch eine Methode sign, die diese Funktion implementiert.

So wird es aussehen Document:

class Document {
  constructor(title) {
    this.title = title
    this.signature = null
  }
  sign(signature) {
    this.signature = signature
  }
}

Mit dem Linker werden wir nun Methoden unterstützen, die den in definierten Methoden ähneln Document.

class DocumentComposite {
  constructor(title) {
    this.items = []
    if (title) {
      this.items.push(new Document(title))
    }
  }

  add(item) {
    this.items.push(item)
  }

  sign(signature) {
    this.items.forEach((doc) => {
      doc.sign(signature)
    })
  }
}

Jetzt wird die Anmut der Vorlage deutlich. Achten Sie auf die letzten beiden Codefragmente: Schauen wir uns die Vorlage visuell an:

Großartig! Es sieht so aus, als wären wir auf dem richtigen Weg. Was wir bekommen haben, entspricht dem oben dargestellten Schema.

Unsere Baumstruktur enthält also zwei Blätter / Knoten - Documentund DocumentComposite. Beide haben dieselbe Schnittstelle und fungieren daher als „Teile“ eines einzelnen zusammengesetzten Baums .

Hierbei ist zu beachten, dass ein Blatt- / Baumknoten, der kein Composite ( Document) ist, keine Sammlung oder Gruppe von Objekten ist und sich daher nicht weiter verzweigt. Das Blatt / der Knoten ist jedochComposite, enthält eine Sammlung von Teilen (in unserem Fall ist es items). Denken Sie auch daran, dass Documentbeide DocumentCompositeeine gemeinsame Schnittstelle und daher die Vorzeichenmethode verwenden.

Wie effektiv ist dieser Ansatz? Obwohl DocumentComposite eine einzige Schnittstelle verwendet, weil es eine Vorzeichenmethode wie Document verwendet, verfolgt es einen effizienteren Ansatz und erreicht dennoch sein endgültiges Ziel.

Also statt einer Struktur wie dieser:

const pr2Form = new Document(
  'Primary Treating Physicians Progress Report (PR2)',
)
const w2Form = new Document('   (W2)')

const forms = []
forms.push(pr2Form)
forms.push(w2Form)

forms.forEach((form) => {
  form.sign('Bobby Lopez')
})

Wir können den Code ändern und effizienter machen, indem wir den Linker nutzen:

const forms = new DocumentComposite()
const pr2Form = new Document(
  '     (PR2)',
)
const w2Form = new Document('   (W2)')
forms.add(pr2Form)
forms.add(w2Form)

forms.sign(' ')

console.log(forms)

Bei diesem Ansatz müssen wir das Signieren nur einmal ausführen, nachdem wir alle erforderlichen Dokumente hinzugefügt haben. Diese Funktion signiert alle Dokumente.

Sie können dies überprüfen, indem Sie sich die Ausgabe der Funktion ansehen console.log(forms):

Im vorherigen Beispiel mussten wir Dokumente manuell zu einem Array hinzufügen und dann jedes Dokument unabhängig durchlaufen und die Funktion ausführen sign, um es zu signieren.

Vergessen Sie auch nicht, dass unsere DocumentCompositemöglicherweise eine Sammlung von Dokumenten enthält.

Also, als wir das gemacht haben:

forms.add(pr2Form) // 
forms.add(w2Form) //

Unser Schema sieht folgendermaßen aus:

Wir haben zwei Formulare hinzugefügt, und jetzt ist dieses Schema fast vollständig identisch mit dem ursprünglichen:

Trotzdem hört unser Baum auf zu wachsen, da sein letztes Blatt nur zwei Blätter gebildet hat, was nicht ganz dem Diagramm im letzten Screenshot entspricht. Wenn wir stattdessen die w2form zu einem Verbund gemacht haben, wie hier gezeigt:

const forms = new DocumentComposite()
const pr2Form = new Document(
  '     (PR2)',
)
const w2Form = new DocumentComposite('   (W2)')
forms.add(pr2Form)
forms.add(w2Form)

forms.sign(' ')

console.log(forms)