Die Verwendung von Kombinationsmustern in Entwurfsmustern bei der JavaScript-Programmerstellung (fortgeschritten)

Das Kombinationsmuster kombiniert im Allgemeinen eine Reihe ähnlicher kleiner Objekte zu einem großen Objekt. Schauen wir uns das Kombinationsmuster im Entwurfsmuster genauer an 🎜>

in der JavaScript-Programmkonstruktion definiert

Kombination, wie der Name schon sagt, um eine einzelne Entität aus Objekten zu erstellen, die mehrere Komponenten enthalten. Diese einzelne Entität dient als Zugangspunkt für alle diese Teile, und obwohl dies die Dinge erheblich vereinfacht, kann es auch ziemlich irreführend sein, da es keine implizite Möglichkeit gibt, klar zu machen, wie viele Teile die Kombination enthält.

Ziel des Kombinationsmusters ist es, das Client-Programm von der internen Architektur komplexer Elemente zu entkoppeln, sodass das Client-Programm alle Unterelemente gleich behandelt.

Jeder untergeordnete Knoten kann komplex sein. Für den übergeordneten Knoten ist es nicht erforderlich, die Komplexität des untergeordneten Knotens oder die Komplexität der Implementierung des untergeordneten Knotens zu kennen des untergeordneten Knotens und Sie können ihn verwenden. Vereinfachte Beziehung zwischen Vater und Sohn.

Das Gleiche gilt für untergeordnete Knoten. Eine übermäßige Schnittstellenexposition ist manchmal ein Missbrauch und verringert auch die externe Abhängigkeit.

BeispielKombinationen erklären wir am besten anhand von Beispielen. Im Bild unten sehen Sie zwei verschiedene Arten von Objekten: Container und Bibliotheken sind Kompositionen und Bilder sind Blätter. Eine Komposition kann untergeordnete Elemente beherbergen, implementiert jedoch im Allgemeinen kein weiteres Verhalten. Blätter enthalten die meisten Verhaltensweisen, können jedoch keine Kinder beherbergen, zumindest nicht im traditionellen Kompositionsbeispiel.

In diesem Beispiel wird eine Bildergalerie als Beispiel für einen kombinierten Modus erstellt. Es gibt nur drei Ebenen: Alben, Bibliotheken und Bilder. Alben und Bibliotheken sind Gruppen und die Bilder sind die Blätter, wie im Bild oben gezeigt. Dies ist eine explizitere Struktur, als die Komposition selbst erfordert, aber für dieses Beispiel ist es sinnvoll, diese Ebenen nur auf Kompositionen oder Klingen zu beschränken. Die Standardzusammensetzung schränkt nicht ein, welche Strukturebenen Flügel haben können, und auch nicht die Anzahl der Flügel.

Um zu beginnen, sollten Sie zunächst die GalleryComposite-„Klasse“ für Alben und Bibliotheken erstellen. Beachten Sie, dass ich jQuery verwende, um die DOM-Manipulation durchzuführen, um den Prozess zu vereinfachen.

var GalleryComposite = function (heading, id) {
  this.children = [];

  this.element = $(&#39;<p id="&#39; + id + &#39;" class="composite-gallery"></p>&#39;)
  .append(&#39;<h2>&#39; + heading + &#39;</h2>&#39;);
}

GalleryComposite.prototype = {
  add: function (child) {
    this.children.push(child);
    this.element.append(child.getElement());
  },

  remove: function (child) {
    for (var node, i = 0; node = this.getChild(i); i++) {
      if (node == child) {
        this.children.splice(i, 1);
        this.element.detach(child.getElement());
        return true;
      }

      if (node.remove(child)) {
        return true;
      }
    }

    return false;
  },

  getChild: function (i) {
    return this.children[i];
  },

  hide: function () {
    for (var node, i = 0; node = this.getChild(i); i++) {
      node.hide();
    }

    this.element.hide(0);
  },

  show: function () {
    for (var node, i = 0; node = this.getChild(i); i++) {
      node.show();
    }

    this.element.show(0);
  },

  getElement: function () {
    return this.element;
  }
}

Diese Position ist etwas knifflig, könnten Sie mir bitte erlauben, sie etwas genauer zu erklären? Wir erstellen diese Kombination mit den getChild-Methoden „add“, „remove“ und „getChild“. In diesem Beispiel werden „remove“ und „getChild“ nicht wirklich verwendet, sie sind jedoch nützlich, um dynamische Kombinationen zu erstellen. Die Methoden hide, show und getElement werden zum Bearbeiten des DOM verwendet. Die Komposition soll dem Benutzer auf der Seite als Darstellung der Bibliothek angezeigt werden. Diese Kombination steuert diese Bibliothekselemente durch Ausblenden und Anzeigen. Wenn Sie „hide“ für ein Album aufrufen, wird das gesamte Album ausgeblendet, oder Sie können es einfach für ein einzelnes Bild aufrufen, sodass nur dieses Bild ausgeblendet wird.

Erstellen Sie nun eine GalleryImage-Klasse. Beachten Sie, dass es genau den gleichen Ansatz wie GalleryComposite verwendet. Mit anderen Worten, sie implementieren dieselbe Schnittstelle, mit der Ausnahme, dass das Bild ein Blatt ist und daher eigentlich keine Auswirkungen auf die untergeordneten Methoden hat, so wie es keine untergeordneten Methoden hat. Die Komposition muss über dieselbe Schnittstelle ausgeführt werden, da das Kompositionselement nicht weiß, ob es ein weiteres Kompositionselement oder ein Blatt hinzufügt. Wenn Sie also versuchen, diese Methoden für seine untergeordneten Elemente aufzurufen, muss es einwandfrei und ohne Fehler laufen.

var GalleryImage = function (src, id) {
  this.children = [];

  this.element = $(&#39;<img />&#39;)
  .attr(&#39;id&#39;, id)
  .attr(&#39;src&#39;, src);
}

GalleryImage.prototype = {
  // Due to this being a leaf, it doesn&#39;t use these methods,
  // but must implement them to count as implementing the
  // Composite interface
  add: function () { },

  remove: function () { },

  getChild: function () { },

  hide: function () {
    this.element.hide(0);
  },

  show: function () {
    this.element.show(0);
  },

  getElement: function () {
    return this.element;
  }
}

Nachdem Sie den Objektprototyp erstellt haben, können Sie ihn nun verwenden. Unten sehen Sie den Code, der die Bildbibliothek tatsächlich erstellt.

var container = new GalleryComposite('', 'allgalleries');
var gallery1 = new GalleryComposite('Gallery 1', 'gallery1');
var gallery2 = new GalleryComposite('Gallery 2', 'gallery2');
var image1 = new GalleryImage('image1.jpg', 'img1');
var image2 = new GalleryImage('image2.jpg', 'img2');
var image3 = new GalleryImage('image3.jpg', 'img3');
var image4 = new GalleryImage('image4.jpg', 'img4');

gallery1.add(image1);
gallery1.add(image2);

gallery2.add(image3);
gallery2.add(image4);

container.add(gallery1);
container.add(gallery2);

// Make sure to add the top container to the body,
// otherwise it'll never show up.
container.getElement().appendTo('body');
container.show();

Vorteile des Kombinationsmodus: Einfache Operationen können auch komplexe Ergebnisse liefern. Sie müssen nur Operationen für das Objekt der obersten Ebene ausführen und jedes Unterobjekt die Operation alleine durchlaufen lassen . Dies ist besonders nützlich bei Vorgängen, die immer wieder ausgeführt werden.

Im Kompositionsmodus ist die Kopplung zwischen einzelnen Objekten sehr locker. Solange sie die gleiche Schnittstelle implementieren, ist es ein Kinderspiel, ihren Standort zu ändern oder sie auszutauschen. Dies fördert die Wiederverwendung von Code und erleichtert auch das Code-Refactoring.

Jedes Mal, wenn eine Operation an einem zusammengesetzten Objekt der obersten Ebene ausgeführt wird, wird tatsächlich eine Tiefensuche der gesamten Struktur durchgeführt, um Knoten zu finden, und der Programmierer, der das zusammengesetzte Objekt erstellt hat, hat keine Ahnung davon diese Details. Es ist sehr einfach, Knoten in dieser Hierarchie hinzuzufügen, zu löschen und zu finden.

Nachteile des Kompositionsmusters: Die Benutzerfreundlichkeit eines Kompositionsobjekts kann die Kosten für jeden von ihm unterstützten Vorgang verschleiern. Da jede von einem zusammengesetzten Objekt aufgerufene Operation an alle seine untergeordneten Objekte weitergeleitet wird, wird die Leistung des Systems beeinträchtigt, wenn die Hierarchie groß ist. Für den ordnungsgemäßen Betrieb des Composite-Musters ist eine Art Schnittstelle erforderlich.

Wenn zusammengesetzte Objekte und Knotenklassen als Verpackungstools für HTML-Elemente verwendet werden, muss das zusammengesetzte Objekt den Verwendungsregeln von HTML entsprechen. Beispielsweise ist es schwierig, eine Tabelle in ein zusammengesetztes Objekt umzuwandeln.

Je strenger die Schnittstellenprüfung, desto zuverlässiger ist die zusammengesetzte Objektklasse.

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Tutorial zur Verwendung von Kombinationsmustern in der Entwicklung von JavaScript-Entwurfsmustern (fortgeschritten)

Die Anwendung des Fassadendarstellungsmusters in Entwurfsmustern in der JavaScript-Entwicklung (fortgeschritten)

Detaillierte Erläuterung der Implementierung des Adaptermusters in Entwurfsmustern in JavaScript (Grafik Tutorial)

Das obige ist der detaillierte Inhalt vonDie Verwendung von Kombinationsmustern in Entwurfsmustern bei der JavaScript-Programmerstellung (fortgeschritten). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!