Heim > Web-Frontend > js-Tutorial > Lernerfahrung mit js-Dekorationsdesignmustern (detaillierte Antworten)

Lernerfahrung mit js-Dekorationsdesignmustern (detaillierte Antworten)

亚连
Freigeben: 2018-05-18 16:57:44
Original
1377 Leute haben es durchsucht

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']);
Nach dem Login kopieren

Objektklasse

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

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();
  }
}
Nach dem Login kopieren

Erweiterte Kategorie

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

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

Verwandte Artikel:

Eine Fallbeschreibung der Verwendung der JS-Rückruffunktion

Eine Fallbeschreibung der Verwendung der JS-Rückruffunktion

nodejsErstellen Sie einen lokalen Server für die domänenübergreifende Verarbeitung

Das obige ist der detaillierte Inhalt vonLernerfahrung mit js-Dekorationsdesignmustern (detaillierte Antworten). 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