Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung des js-Kombinationsentwurfsmusters

Detaillierte Erläuterung des js-Kombinationsentwurfsmusters

小云云
Freigeben: 2018-02-23 14:06:02
Original
1614 Leute haben es durchsucht

Der Kompositionsmodus kombiniert Objekte in einer Baumstruktur, um die „Teil-Ganze“-Hierarchie darzustellen. Der Kombinationsmodus ermöglicht es Benutzern, einzelne Objekte und kombinierte Objekte konsistent zu verwenden.

Es verwischt die Konzepte von einfachen Elementen und komplexen Elementen in unseren Baumstrukturproblemen. Das Client-Programm kann komplexe Elemente auf die gleiche Weise verarbeiten wie einfache Elemente, sodass das Client-Programm die interne Struktur komplexer Elemente auflösen kann . Kopplung. Es kann Entwicklern helfen, mehrere Objekte mit ähnlichen Funktionen zu klassifizieren und das standardisierte Design zu verbessern

Es gibt viele Beispiele für hierarchische Datenstrukturen, was das Kombinationsmuster sehr nützlich macht. Ein häufiges Beispiel für eine hierarchische Datenstruktur ist das, was Ihnen bei jeder Nutzung eines Computers begegnet: das Dateisystem. Ein Dateisystem besteht aus Verzeichnissen und Dateien. Jedes Verzeichnis kann Inhalte enthalten. Der Inhalt eines Verzeichnisses kann Dateien oder Verzeichnisse sein. Auf diese Weise wird das Dateisystem des Computers in einer rekursiven Struktur organisiert. Wenn Sie eine solche Datenstruktur beschreiben möchten, können Sie das zusammengesetzte Muster verwenden.
Beteiligte Rollen

Funktionen

Es gibt zwei Arten von Objekten in der Hierarchie des Kompositionsmusters: Blattobjekte und zusammengesetzte Objekte. Dies ist eine rekursive Definition, aber sie ist auch nützlich Der Grund dafür ist, dass ein zusammengesetztes Objekt aus anderen zusammengesetzten Objekten und Blattobjekten bestehen kann, das Blattobjekt jedoch keine Unterobjekte mehr enthält. Das zusammengesetzte Objekt wird für die Klassifizierung von Blattknoten verwendet
Detaillierte Erläuterung des js-Kombinationsentwurfsmusters

Design

Hier leihen wir uns das Diagramm des Javascript-Designmusters, um das Design des Kombinationsmusters zu veranschaulichen

  • Schnittstelle ist die Objektdeklarationsschnittstelle in der Kombination. Implementieren Sie gegebenenfalls das Standardverhalten von Schnittstellen, die allen Klassen gemeinsam sind. Deklarieren Sie eine Schnittstelle für den Zugriff auf und die Verwaltung von Komponenten-Unterkomponenten.

  • Feld stellt das Blattknotenobjekt in der Kombination dar. Der Blattknoten hat keine untergeordneten Knoten und kann durch Vererbung als abstrakte Klasse entworfen werden.

  • Composite definiert Unterknotenverhalten, die zum Speichern von Unterkomponenten und zum Implementieren von Vorgängen im Zusammenhang mit Unterkomponenten in der Komponentenschnittstelle verwendet werden, z. B. Hinzufügen (Hinzufügen) und Löschen (Entfernen). .
    Detaillierte Erläuterung des js-Kombinationsentwurfsmusters

  • Schnittstelle

    /* Interfaces. */
    
    var Composite = new Interface('Composite', ['add', 'remove', 'getChild']);
    var FormItem = new Interface('FormItem', ['save']);
    Nach dem Login kopieren
  • Composition Object Class

    /* CompositeForm class. */
    
    var CompositeForm = function(id, method, action) { // implements Composite, FormItem
      this.formComponents = [];
    
      this.element = document.createElement('form');
      this.element.id = id;
      this.element.method = method || 'POST';
      this.element.action = action || '#';
    };
    
    CompositeForm.prototype.add = function(child) {
      Interface.ensureImplements(child, Composite, FormItem);
      this.formComponents.push(child);
      this.element.appendChild(child.getElement());
    };
    
    CompositeForm.prototype.remove = function(child) {
      for(var i = 0, len = this.formComponents.length; i < len; i++) {
        if(this.formComponents[i] === child) {
          this.formComponents.splice(i, 1); // Remove one element from the array at 
                                            // position i.
          break;
        }
      }
    };
    
    CompositeForm.prototype.getChild = function(i) {
      return this.formComponents[i];
    };
    
    CompositeForm.prototype.save = function() {
      for(var i = 0, len = this.formComponents.length; i < len; i++) {
        this.formComponents[i].save();
      }
    };
    
    CompositeForm.prototype.getElement = function() { 
      return this.element; 
    };
    Nach dem Login kopieren
  • Blattobjektklasse
    Ein Blattobjekt kann eine einfache Klasse sein oder als abstrakte Klasse zum Konstruieren verschiedener Arten von Blättern entworfen werden Blätter

    /* Field class, abstract. */
    
    var Field = function(id) { // implements Composite, FormItem
      this.id = id;
      this.element;
    };
    
    Field.prototype.add = function() {};
    Field.prototype.remove = function() {};
    Field.prototype.getChild = function() {};
    
    Field.prototype.save = function() {
      setCookie(this.id, this.getValue);
    };
    
    Field.prototype.getElement = function() { 
      return this.element; 
    };
    
    Field.prototype.getValue = function() { 
      throw new Error('Unsupported operation on the class Field.'); 
    };
    Nach dem Login kopieren
  • InputField-Klasse

    /* InputField class. */
    
    var InputField = function(id, label) { // implements Composite, FormItem
      Field.call(this, id);
    
      this.input = document.createElement('input');
      this.input.id = id;
    
      this.label = document.createElement('label');
      var labelTextNode = document.createTextNode(label);
      this.label.appendChild(labelTextNode);
    
      this.element = document.createElement('p');
      this.element.className = 'input-field';
      this.element.appendChild(this.label);
      this.element.appendChild(this.input);
    };
    extend(InputField, Field); // Inherit from Field.
    
    InputField.prototype.getValue = function() { 
      return this.input.value;
    };
    Nach dem Login kopieren
  • TextareaField-Klasse

    /* TextareaField class. */
    
    var TextareaField = function(id, label) { // implements Composite, FormItem
      Field.call(this, id);
    
      this.textarea = document.createElement('textarea');
      this.textarea.id = id;
    
      this.label = document.createElement('label');
      var labelTextNode = document.createTextNode(label);
      this.label.appendChild(labelTextNode);
    
      this.element = document.createElement('p');
      this.element.className = 'input-field';
      this.element.appendChild(this.label);
      this.element.appendChild(this.textarea);
    };
    extend(TextareaField, Field); // Inherit from Field.
    
    TextareaField.prototype.getValue = function() { 
      return this.textarea.value;
    };
    Nach dem Login kopieren
  • SelectField-Klasse

    /* SelectField class. */
    
    var SelectField = function(id, label) { // implements Composite, FormItem
      Field.call(this, id);
    
      this.select = document.createElement('select');
      this.select.id = id;
    
      this.label = document.createElement('label');
      var labelTextNode = document.createTextNode(label);
      this.label.appendChild(labelTextNode);
    
      this.element = document.createElement('p');
      this.element.className = 'input-field';
      this.element.appendChild(this.label);
      this.element.appendChild(this.select);
    };
    extend(SelectField, Field); // Inherit from Field.
    
    SelectField.prototype.getValue = function() {
      return this.select.options[this.select.selectedIndex].value;
    };
    Nach dem Login kopieren

Die Verwendung des

/* Usage. */

var contactForm = new CompositeForm('contact-form', 'POST', 'contact.php');

contactForm.add(new InputField('first-name', 'First Name'));
contactForm.add(new InputField('last-name', 'Last Name'));
contactForm.add(new InputField('address', 'Address'));
contactForm.add(new InputField('city', 'City'));
contactForm.add(new SelectField('state', 'State', stateArray)); 
// var stateArray =[{'al', 'Alabama'}, ...]
contactForm.add(new InputField('zip', 'Zip'));
contactForm.add(new TextareaField('comments', 'Comments'));

addEvent(window, 'unload', contactForm.save);
Nach dem Login kopieren
-Kombinationsmodus eignet sich zum Bedienen einer großen Anzahl von Objekten, und die Betriebsobjekte haben hierarchische Beziehungen durch Klassifizierung Objekte, die Beziehung zwischen Objekten wird geschwächt. Dieser Modus macht den Code modularer, mehrschichtig und besser wartbar

Verwandte Empfehlungen:

Detaillierte Erläuterung des js-Bridge-Entwurfsmusters

Analyse von Beispielen gängiger grundlegender Entwurfsmuster in Node.js

Detaillierte Erläuterung des js-Proxy-Entwurfsmusters

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des js-Kombinationsentwurfsmusters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage