js-Designmuster: Was ist das Dekoratormuster? Einführung in das JS-Decorator-Muster

Dieser Artikel enthält Inhalte zu js-Designmustern: Was ist das Dekoratormuster? Die Einführung des js-Dekoratormodus hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Was ist das Dekorationsmuster?

Definition: Fügen Sie einem Objekt dynamisch einige zusätzliche Verantwortlichkeiten hinzu. Im Hinblick auf das Hinzufügen von Funktionalität ist das Dekoratormuster flexibler als das Generieren von Unterklassen.

Hauptlösung: Im Allgemeinen verwenden wir Vererbung, um eine Klasse zu erweitern, und wenn die Erweiterungsfunktionen zunehmen, wird die Unterklasse stark erweitert.

Verwendungszweck: Eine Klasse erweitern, ohne viele Unterklassen hinzuzufügen.

So lösen Sie: Teilen Sie bestimmte funktionale Verantwortlichkeiten auf und erben Sie das Dekorationsmuster.

JS Decorator Pattern Anwendungsbeispiel: 1. Sun Wukong hat 72 Transformationen. Wenn er ein „Tempel“ wird, ist er im Grunde immer noch ein Affe, aber er hat die Kraft eines Tempels .Funktion. 2. Ein Gemälde kann unabhängig davon, ob es einen Rahmen hat oder nicht, an die Wand gehängt werden, aber normalerweise hat es einen Rahmen, und der Rahmen wird tatsächlich an die Wand gehängt. Bevor das Gemälde an die Wand gehängt wird, kann es lasiert und gerahmt werden; dann bilden Gemälde, Glas und Rahmen ein Ganzes.

Vorteile des js-Dekorationsmusters: Die Dekorationsklasse und die dekorierte Klasse können sich unabhängig voneinander entwickeln, ohne dass sie miteinander gekoppelt sind. Das Dekorationsmuster ist ein alternatives Muster zur Vererbung Erweitern Sie eine Implementierungsklasse dynamisch.

Nachteile des js-Decorator-Modus: Mehrschichtige Dekoration ist komplizierter.

Nutzungsszenarien für den js-Decorator-Modus: 1. Erweitern Sie die Funktionalität einer Klasse. 2. Fügen Sie Funktionen dynamisch hinzu und brechen Sie sie dynamisch ab.

Hinweis: kann eine Vererbung ersetzen.

Beispiel für ein JS Decorator-Muster

Beispiel aus dem Leben: Wenn das Wetter kalt ist, ziehen Sie Ihren Mantel aus, um ihn warm zu halten Die Verzierung ermöglicht ein dynamisches An- und Ausziehen der Kleidung bei wechselndem Wetter.

let wear = function() {
  console.log('穿上第一件衣服')
}

const _wear1 = wear

wear = function() {
  _wear1()
  console.log('穿上第二件衣服')
}

const _wear2 = wear

wear = function() {
  _wear2()
  console.log('穿上第三件衣服')
}

wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

Diese Methode hat die folgenden Nachteile: 1: Temporäre Variablen werden immer mehr; 2: Dieser Zeiger geht manchmal schief

AOP-Dekorationsfunktion

// 前置代码
Function.prototype.before = function(fn) {
  const self = this
  return function() {
    fn.apply(this, arguments)
    return self.apply(this, arguments)
  }
}

// 后置代码
Function.prototype.after = function(fn) {
  const self = this
  return function() {
    self.apply(this, arguments)
    return fn.apply(this, arguments)
  }
}

Verwenden Sie Post- Code zum Experimentieren mit der obigen Demo zum Tragen von Kleidung,

const wear1 = function() {
  console.log('穿上第一件衣服')
}

const wear2 = function() {
  console.log('穿上第二件衣服')
}

const wear3 = function() {
  console.log('穿上第三件衣服')
}

const wear = wear1.after(wear2).after(wear3)
wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

Aber dies verunreinigt manchmal die native Funktion. Sie können einige Änderungen vornehmen

const after = function(fn, afterFn) {
  return function() {
    fn.apply(this, arguments)
    afterFn.apply(this, arguments)
  }
}

const wear = after(after(wear1, wear2), wear3)
wear()

Verwandte Empfehlungen:

JS-Entwurfsmuster: Was ist das Mediatormuster? Einführung in das js-Mediator-Muster

js-Designmuster: Was ist das Chain-of-Responsibility-Muster? Einführung in das js-Chain-of-Responsibility-Muster

js-Designmuster: Was ist das Fliegengewichtsmuster? Einführung in den js-Fliegengewichtsmodus

Das obige ist der detaillierte Inhalt vonjs-Designmuster: Was ist das Dekoratormuster? Einführung in das JS-Decorator-Muster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!