Detaillierte Interpretation dekorativer Designmuster in js

In diesem Artikel werden die Erfahrungen des Autors und die wichtigsten Punkte nach dem Erlernen des Javascript-Dekorationsdesignmusters mit Ihnen geteilt. Interessierte Freunde können sich darauf beziehen.

Dekorationsdesignmodus

Jedes Gerät verfügt über seine eigenen einzigartigen Anwendungsszenarien und Möglichkeiten zur Problemlösung. Der Dekorationsdesignmodus fügt dem Objekt dynamisch neue Objekte hinzu. Funktion ist eine Technologie zum Ersetzen der Vererbung, die die neuen Funktionen von Objekten erweitern kann, ohne Unterklassen durch Vererbung hinzuzufügen. Die Verwendung von Objektassoziationsbeziehungen anstelle von Vererbungsbeziehungen ist flexibler und vermeidet die schnelle Erweiterung des Typsystems. Dieser Modus eignet sich für den Einsatz, wenn die neu hinzugefügten Funktionen nicht ausreichen, um das Problem auf Kosten der Vererbung zu lösen – ein Huhn mit einem zu töten Metzgermesser ^_^
Dekorationsdesignmuster: Fügen Sie einem Objekt dynamisch einige zusätzliche Verantwortlichkeiten hinzu. Um die Funktionalität eines Objekts zu erweitern, bieten Dekoratoren eine flexiblere Alternative als die Vererbung.

Strukturdiagramm:

Schnittstelle

var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'repair', 'getPrice']);

Objektklasse

var AcmeComfortCuiser = function(){
  
};
AcmeComfortCuiser.prototype = {
  assemble: function(){
    
  },
  wash: function(){
    
  },
  repair: function(){
    
  },
  getPrice: function(){
    
  }
}

Dekorative Kategorie

var BicycleDecorator = function(bicycle){
  Interface.ensureImplements(bicycle, Bicycle);
  this.bicycle = bicycle;
};
BicycleDecorator.prototype = {
  assemble: function(){
    return this.bicycle.assemble();
  },
  wash: function(){
    return this.bicycle.wash();
  },
  repair: function(){
    return this.bicycle.repair();
  },
  getPrice: function(){
    return this.bicycle.getPrice();
  }
}

Erweiterte Kategorie

  var HeadlightDecorator = function(bicycle){
    BicycleDecorator.call(this, bicycle);
  };
  extend(HeadlightDecorator, BicycleDecorator);
  HeadlightDecorator.prototype.getPrice = function(){
    return this.bicycle.getPrice() + 15.00;
  }

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es so sein wird hilfreich für alle in der Zukunft.

Verwandte Artikel:

Vue.js-Methode zum Realisieren des zufälligen Ziehens von Bildern

JS-String-Entfernung aufeinanderfolgender oder aller wiederholter Zeichen Beispiel

vue.js oder js-Methode zur Implementierung der chinesischen A-Z-Sortierung

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation dekorativer Designmuster in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!