Einführung in Decorator und zugehörige Tutorials

Decorator-Einführung

Decorator ist eine Funktion, die eine Klasse oder Methode durch Annotieren von Ausdrücken erweitern kann. Decorator kann auf jede Klasse oder Eigenschaft angewendet werden. Zum Beispiel:

@myDecorator class A {} // 作用class

@myDecorator
doSomething() {}  // 作用表达式

Javascript Decorator befindet sich noch im ES7-Vorschlagsstatus. Weitere Fortschritte bei dieser Funktion können Sie unter „proposal-decorators“ einsehen.

Dekorationsprinzip

Wenn es darum geht, die Eigenschaften oder Methoden eines Objekts zu ändern, wird jeder definitiv an die Methode Object.defineProperty(obj, prop, descriptor) denken Um das Verhalten oder die Eigenschaften eines Objekts zu schreiben, wird die zuvor in Vue erwähnte bidirektionale Bindung durch Überschreiben der Set- und Get-Methoden erreicht. Bevor wir Decorator offiziell verwenden, verwenden wir die Methode Object.defineProperty, um dies zu erreichen. Lassen Sie uns diese Methode kurz verstehen:

/**

• obj: das Objekt, dessen Eigenschaften geändert werden müssen

• prop: der Eigenschaftsname des Objekts, das geändert werden muss

• Deskriptor: ein Beschreibungsobjekt, das verwendet wird, um das spezifische Verhalten des Attributs zu definieren
  **/
  Object.defineProperty(obj, prop, descriptor)

descriptor property Description

• konfigurierbar: Definieren Sie, ob das Attributobjekt konfiguriert werden kann. Wenn es also falsch ist, sind die Beschreibungsvorgänge (schreibbar, get usw.), die die Änderung definieren, ungültig

• aufzählbar: Ob es durch For-In oder Object.keys-Aufzählung durchlaufen werden kann

• Wert: Definiert den Wert des Wertattributs des Objekts, Wert kann Sei eine Zahl, ein Objekt, eine Funktion usw. usw.

• beschreibbar: Definiert, ob der Wert überschrieben werden kann

• get: ein Funktionsobjekt, das wird beim Zugriff auf das Wertattribut ausgelöst

• set: ein Funktionsobjekt, das beim Festlegen des Wertattributs ausgelöst wird

Eine Eigenschaft ändern auf readonly (readonly)

Objekt verstehen Nach der grundlegenden Syntax von .defineProperty implementierte ich zunächst einfach eine schreibgeschützte Instanz darüber. Der spezifische Code lautet wie folgt:

Grundlegende Syntax und Verwendung von Decorator

``javascript
# 定义
function myDecoration(target, name, descriptor) {}

# 对property使用
 class A {
 @myDecorator
 test() {}
 }

 # 对class使用
 @myDecorator
 class A {}

 # 带参数
 function myDescorator(a) {
 return function (target, name, descriptor) {
 console.llog('params:', a)
 }
 }
 @myDescorator(a) 
 class A {}

 # 时使用多个装饰器（Decorator)
 @myDecorator1
 @myDecorator2
 class A {}

Verwenden Sie den Syntaxzucker von Decorator, um ein Attribut in schreibgeschützt zu ändern

Verwenden Sie Decorator, um PureRender für React-Komponenten zu kapseln.

Wir alle wissen, dass es im React-Lebenszyklus eine Methode ShouldComponentUpdate gibt, die bestimmt, ob die Komponente die Komponente neu rendern soll, indem sie true oder false zurückgibt. Mit anderen Worten: Mit dieser Methode können wir einige ungültige Datenrendering-Ereignisse herausfiltern und so die Leistung verbessern. Beispielsweise vergleichen wir die von Requisiten übergebenen Datenobjekte. Wenn sich die Attribute und Werte des Requisitenobjekts nicht geändert haben, besteht keine Notwendigkeit, die Render-Methode auszuführen.

Durch den Vergleich, ob sich die Eigenschaften und Werte des Datenobjekts unter Requisiten geändert haben, kann diese Logik natürlich wiederverwendet werden, anstatt die Methode ShouldComponentUpdate wiederholt in jede Komponente separat schreiben zu müssen. Apropos Ändern des Methodenverhaltens des Komponentenobjekts: Hier können wir natürlich die

Decorator-Funktion verwenden, das heißt, wir überschreiben ShouldComponentUpdate des Decorator-Objekts. Durch Durchlaufen der Eigenschaften und Werte des Requisitenobjekts und Vergleichen mit den Eigenschaften und Werten der alten Requisiten wird festgestellt, ob ein erneutes Rendern erforderlich ist. Der spezifische Code lautet wie folgt:

function isEqual(a, b) {
  for (const key in a) {
    if ({}.hasOwnProperty.call(a, key) &&
      (!{}.hasOwnProperty.call(b, key) || a[key] !== b[key])) {
      return false;
    }
  }
  for (const key in b) {
    if ({}.hasOwnProperty.call(b, key) && !{}.hasOwnProperty.call(a, key)) {
      return false;
    }
  }
  return true;
}

export default function pureRender(targetComponent) {
  targetComponent.prototype.shouldComponentUpdate = function (props, state) {
    return !isEqual(this.state, state) || !isEqual(this.props, props)
  }
}

// 使用
@pureRender
class ComponentA extends React.Component {}

Verwenden Sie Decorator über Babel

Da Decorator ein Entwurf in ES7 ist, muss er jetzt über Bable verwendet werden. Die Verwendungsmethode ist wie folgt:

Installieren

npm install --save-dev babel-plugin-transform-decorators

Verwenden Sie

Methode 1. Über Configuration.babelrc

{
  "plugins": ["transform-decorators"]
}

Methode 2, über CLI

babel --plugins transform-decorators-Skript .js

Methode 3, über Node API

require("babel-core").transform("code", {
  plugins: ["transform-decorators"]
});

Zusammenfassung

Über Decorator ist hierfür keine direkte Eingabe erforderlich Zugriff auf Objekte oder Methoden Durch das Schreiben zusätzlicher Logik können Sie die Fähigkeiten von Objekten oder Methoden problemlos erweitern, was nicht nur funktionale Anforderungen erfüllt, sondern auch den Code rationalisiert und die Wartbarkeit des Codes gewährleistet, wie z. B. @log, @test, und @mixin haben wir bereits gesehen. Daher können Sie in zukünftigen Arbeiten mehr ausprobieren.

Referenz

• Details zu ES7-JavaScript-Dekoratoren

• Decorator-Spezifikation

• EcmaScript-Dekoratoren erkunden

• Object.defineProperty

• Babel Legacy Decorator-Plugin

• core-decorators

Der obige Inhalt ist eine Einführung in Decorator und verwandte Tutorials. Ich hoffe, dass er allen helfen kann.

Zuerst empfohlen:

Detaillierte Erklärung der Funktions-Decorator-Beispiele in JavaScript

Detaillierte Erklärung und Beispiele des Decorator-Decorators

PHP-Designmodus Decorator

Das obige ist der detaillierte Inhalt vonEinführung in Decorator und zugehörige Tutorials. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!