Heim Web-Frontend js-Tutorial So verwenden Sie JS-Dekoratorfunktionen

So verwenden Sie JS-Dekoratorfunktionen

Jun 02, 2018 pm 02:22 PM
javascript 函数

Dieses Mal zeige ich Ihnen, wie Sie die JS-Decorator-Funktion verwenden und welche Vorsichtsmaßnahmen bei der Verwendung der JS-Decorator-Funktion gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

In ES6 wurden verwandte Definitionen und Operationen von Klassenobjekten (z. B. Klasse und Erweiterungen) hinzugefügt, was es für uns einfacher macht, einige Methoden oder Verhaltensweisen zwischen mehreren verschiedenen Klassen zu teilen oder zu erweitern. Nicht so elegant. Zu diesem Zeitpunkt benötigen wir eine elegantere Methode, die uns dabei hilft, diese Dinge zu erreichen.

Was ist ein Dekorator?

Pythons Dekorator

Im objektorientierten (OOP) Designmuster In Der Dekorator wird als Dekorationsmodus bezeichnet. Der Dekorationsmodus von OOP muss durch Vererbung und Kombination implementiert werden, und Python unterstützt nicht nur die Dekoratoren von OOP, sondern auch Dekoratoren direkt von der Syntaxebene aus.

Wenn Sie mit Python vertraut sind, werden Sie damit vertraut sein. Werfen wir also zunächst einen Blick darauf, wie ein Dekorator in Python aussieht:

def decorator(f):
  print "my decorator"
  return f
@decorator
def myfunc():
  print "my function"
myfunc()
# my decorator
# my function
Nach dem Login kopieren

Der @decorator hier ist das, was wir den Dekorator nennen. Im obigen Code verwenden wir den Dekorator, um eine Textzeile zu drucken, bevor wir unsere Zielmethode ausführen, und nehmen keine Änderungen an der ursprünglichen Methode vor. Der Code entspricht im Wesentlichen:

def decorator(f):
  def wrapper():
    print "my decorator"
    return f()
  return wrapper
def myfunc():
  print "my function"
myfunc = decorator(myfuc)
Nach dem Login kopieren

Aus dem Code ist nicht schwer zu erkennen, dass der Dekorateur einen Parameter erhält, der die Zielmethode ist, für die wir dekoriert werden. Nach der Verarbeitung des erweiterten Inhalts gibt er eine Methode zurück zukünftige Aufrufe und verliert auch den Zugriff auf das ursprüngliche Methodenobjekt. Wenn wir Dekoration auf eine Funktion anwenden, ändern wir tatsächlich die Eintragsreferenz der dekorierten Methode, sodass sie auf den Einstiegspunkt der vom Dekorateur zurückgegebenen Methode verweist, wodurch wir die ursprüngliche Funktion erweitern und ändern können.

ES7-Dekorator

Der Dekorator in ES7 greift ebenfalls auf diesen Syntaxzucker zurück, verlässt sich jedoch auf die ES5-Methode Object.defineProperty.

Object.defineProperty

Die Methode Object.defineProperty() definiert direkt eine neue Eigenschaft für ein Objekt oder ändert eine vorhandene Eigenschaft eines Objekts und gibt diese zurück Objekt.

Mit dieser Methode können Sie die Eigenschaften des Objekts präzise hinzufügen oder ändern. Durch Zuweisung hinzugefügte gewöhnliche Eigenschaften erstellen Eigenschaften, die während der Eigenschaftenaufzählung (for...in- oder Object.keys-Methoden) verfügbar gemacht werden, und diese Werte können geändert oder gelöscht werden. Mit diesem Ansatz können diese zusätzlichen Details gegenüber den Standardwerten geändert werden. Standardmäßig sind mit Object.defineProperty() hinzugefügte Eigenschaftswerte unveränderlich.

Syntax

Object.defineProperty(obj, prop, descriptor)
Nach dem Login kopieren
  1. obj: Das Objekt, auf dem die Eigenschaften definiert werden sollen.

  2. prop: Der Name der Eigenschaft, die definiert oder geändert werden soll.

  3. Deskriptor: Der zu definierende oder zu ändernde Attributdeskriptor.

  4. Rückgabewert: Das an die Funktion übergebene Objekt.

Aufgrund der Besonderheit des Symboltyps unterscheidet sich in ES6 die Verwendung eines Symboltypwerts als Schlüssel eines Objekts von der herkömmlichen Definition oder Änderung, und Object.defineProperty definiert den Schlüssel als Symbol Eine der Attributmethoden.

Attributdeskriptor

Es gibt derzeit zwei Hauptformen von Attributdeskriptoren in Objekten: Datendeskriptoren und Zugriffsdeskriptoren.

Ein Datendeskriptor ist eine Eigenschaft mit einem Wert, der schreibbar sein kann oder nicht.

  • Zugriffsdeskriptoren sind Eigenschaften, die durch Getter-Setter-Funktionspaare beschrieben werden.

  • Der Deskriptor muss eine dieser beiden Formen sein, nicht beide.

Sowohl der Datendeskriptor als auch der Zugriffsdeskriptor haben die folgenden optionalen Schlüsselwerte:

konfigurierbar

genau dann, wenn Das Konfigurierbare der Eigenschaft ist wahr, der Eigenschaftsdeskriptor kann geändert werden und die Eigenschaft kann auch aus dem entsprechenden Objekt gelöscht werden. Der Standardwert ist falsch.

enumerable

enumerable definiert, ob die Eigenschaften eines Objekts in for...in-Schleifen und Object.keys() aufgezählt werden können.

Nur ​​wenn die Aufzählungseigenschaft der Eigenschaft wahr ist, kann die Eigenschaft in der Aufzählungseigenschaft des Objekts erscheinen. Der Standardwert ist falsch. Der Datendeskriptor
verfügt außerdem über die folgenden optionalen Schlüsselwerte:

Wert

该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。

writable

当且仅当该属性的 writable 为 true 时,value 才能被赋值运算符改变。默认为 false。

存取描述符同时具有以下可选键值:

get

一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

set

一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。

如果一个描述符不具有value,writable,get 和 set 任意一个关键字,那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字,将会产生一个异常。
用法

类的装饰

@testable
class MyTestableClass {
 // ...
}
function testable(target) {
 target.isTestable = true;
}
MyTestableClass.isTestable // true
Nach dem Login kopieren

上面代码中,@testable 就是一个装饰器。它修改了 MyTestableClass这 个类的行为,为它加上了静态属性isTestable。testable 函数的参数 target 是 MyTestableClass 类本身。

基本上,装饰器的行为就是下面这样。

@decorator
class A {}
// 等同于
class A {}
A = decorator(A) || A;
Nach dem Login kopieren

也就是说,装饰器是一个对类进行处理的函数。装饰器函数的第一个参数,就是所要装饰的目标类。

如果觉得一个参数不够用,可以在装饰器外面再封装一层函数。

function testable(isTestable) {
 return function(target) {
  target.isTestable = isTestable;
 }
}
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true
@testable(false)
class MyClass {}
MyClass.isTestable // false
Nach dem Login kopieren

上面代码中,装饰器 testable 可以接受参数,这就等于可以修改装饰器的行为。

注意,装饰器对类的行为的改变,是代码编译时发生的,而不是在运行时。这意味着,装饰器能在编译阶段运行代码。也就是说,装饰器本质就是编译时执行的函数。

前面的例子是为类添加一个静态属性,如果想添加实例属性,可以通过目标类的 prototype 对象操作。

下面是另外一个例子。

// mixins.js
export function mixins(...list) {
 return function (target) {
  Object.assign(target.prototype, ...list)
 }
}
// main.js
import { mixins } from './mixins'
const Foo = {
 foo() { console.log('foo') }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // 'foo'
Nach dem Login kopieren

上面代码通过装饰器 mixins,把Foo对象的方法添加到了 MyClass 的实例上面。

方法的装饰

装饰器不仅可以装饰类,还可以装饰类的属性。

class Person {
 @readonly
 name() { return `${this.first} ${this.last}` }
}
Nach dem Login kopieren

上面代码中,装饰器 readonly 用来装饰“类”的name方法。

装饰器函数 readonly 一共可以接受三个参数。

function readonly(target, name, descriptor){
 // descriptor对象原来的值如下
 // {
 //  value: specifiedFunction,
 //  enumerable: false,
 //  configurable: true,
 //  writable: true
 // };
 descriptor.writable = false;
 return descriptor;
}
readonly(Person.prototype, 'name', descriptor);
// 类似于
Object.defineProperty(Person.prototype, 'name', descriptor);
Nach dem Login kopieren
  • 装饰器第一个参数是 类的原型对象,上例是 Person.prototype,装饰器的本意是要“装饰”类的实例,但是这个时候实例还没生成,所以只能去装饰原型(这不同于类的装饰,那种情况时target参数指的是类本身);

  • 第二个参数是 所要装饰的属性名

  • 第三个参数是 该属性的描述对象

另外,上面代码说明,装饰器(readonly)会修改属性的 描述对象(descriptor),然后被修改的描述对象再用来定义属性。

函数方法的装饰

装饰器只能用于类和类的方法,不能用于函数,因为存在函数提升。

另一方面,如果一定要装饰函数,可以采用高阶函数的形式直接执行。

function doSomething(name) {
 console.log('Hello, ' + name);
}
function loggingDecorator(wrapped) {
 return function() {
  console.log('Starting');
  const result = wrapped.apply(this, arguments);
  console.log('Finished');
  return result;
 }
}
const wrapped = loggingDecorator(doSomething);
Nach dem Login kopieren

core-decorators.js

core-decorators.js是一个第三方模块,提供了几个常见的装饰器,通过它可以更好地理解装饰器。

@autobind

autobind 装饰器使得方法中的this对象,绑定原始对象。

@readonly

readonly 装饰器使得属性或方法不可写。

@override

override 装饰器检查子类的方法,是否正确覆盖了父类的同名方法,如果不正确会报错。

import { override } from 'core-decorators';
class Parent {
 speak(first, second) {}
}
class Child extends Parent {
 @override
 speak() {}
 // SyntaxError: Child#speak() does not properly override Parent#speak(first, second)
}
// or
class Child extends Parent {
 @override
 speaks() {}
 // SyntaxError: No descriptor matching Child#speaks() was found on the prototype chain.
 //
 //  Did you mean "speak"?
}
Nach dem Login kopieren

@deprecate (别名@deprecated)

deprecate 或 deprecated 装饰器在控制台显示一条警告,表示该方法将废除。

import { deprecate } from 'core-decorators';
class Person {
 @deprecate
 facepalm() {}
 @deprecate('We stopped facepalming')
 facepalmHard() {}
 @deprecate('We stopped facepalming', { url: 'http://knowyourmeme.com/memes/facepalm' })
 facepalmHarder() {}
}
let person = new Person();
person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.
person.facepalmHard();
// DEPRECATION Person#facepalmHard: We stopped facepalming
person.facepalmHarder();
// DEPRECATION Person#facepalmHarder: We stopped facepalming
//
//   See http://knowyourmeme.com/memes/facepalm for more details.
//
Nach dem Login kopieren

@suppressWarnings

suppressWarnings 装饰器抑制 deprecated 装饰器导致的 console.warn() 调用。但是,异步代码发出的调用除外。

使用场景

装饰器有注释的作用

@testable
class Person {
 @readonly
 @nonenumerable
 name() { return `${this.first} ${this.last}` }
}
Nach dem Login kopieren

有了装饰器,就可以改写上面的代码。装饰

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}
Nach dem Login kopieren

相对来说,后一种写法看上去更容易理解。

新功能提醒或权限

菜单点击时,进行事件拦截,若该菜单有新功能更新,则弹窗显示。

/**
 * @description 在点击时,如果有新功能提醒,则弹窗显示
 * @param code 新功能的code
 * @returns {function(*, *, *)}
 */
 const checkRecommandFunc = (code) => (target, property, descriptor) => {
  let desF = descriptor.value; 
  descriptor.value = function (...args) {
   let recommandFuncModalData = SYSTEM.recommandFuncCodeMap[code];
   if (recommandFuncModalData && recommandFuncModalData.id) {
    setTimeout(() => {
     this.props.dispatch({type: 'global/setRecommandFuncModalData', recommandFuncModalData});
    }, 1000);
   }
   desF.apply(this, args);
  };
  return descriptor;
 };
Nach dem Login kopieren

loading

在 React 项目中,我们可能需要在向后台请求数据时,页面出现 loading 动画。这个时候,你就可以使用装饰器,优雅地实现功能。

@autobind
@loadingWrap(true)
async handleSelect(params) {
 await this.props.dispatch({
  type: 'product_list/setQuerypParams',
  querypParams: params
 });
}
Nach dem Login kopieren

loadingWrap 函数如下:、

export function loadingWrap(needHide) {
 const defaultLoading = (
  <p className="toast-loading">
   <Loading className="loading-icon"/>
   <p>加载中...</p>
  </p>
 );
 return function (target, property, descriptor) {
  const raw = descriptor.value;
  
  descriptor.value = function (...args) {
   Toast.info(text || defaultLoading, 0, null, true);
   const res = raw.apply(this, args);
   
   if (needHide) {
    if (get('finally')(res)) {
     res.finally(() => {
      Toast.hide();
     });
    } else {
     Toast.hide();
    }
   }
  };
  return descriptor;
 };
}
Nach dem Login kopieren

问题:这里大家可以想想看,如果我们不希望每次请求数据时都出现 loading,而是要求只要后台请求时间大于 300ms 时,才显示loading,这里需要怎么改?

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样进行JQuery元素查找与操作

怎样使用nodeJS模块

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS-Dekoratorfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tipps zum dynamischen Erstellen neuer Funktionen in Golang-Funktionen Tipps zum dynamischen Erstellen neuer Funktionen in Golang-Funktionen Apr 25, 2024 pm 02:39 PM

Die Go-Sprache bietet zwei Technologien zur dynamischen Funktionserstellung: Schließung und Reflexion. Abschlüsse ermöglichen den Zugriff auf Variablen innerhalb des Abschlussbereichs, und durch Reflektion können mithilfe der FuncOf-Funktion neue Funktionen erstellt werden. Diese Technologien sind nützlich bei der Anpassung von HTTP-Routern, der Implementierung hochgradig anpassbarer Systeme und dem Aufbau steckbarer Komponenten.

Überlegungen zur Parameterreihenfolge bei der Benennung von C++-Funktionen Überlegungen zur Parameterreihenfolge bei der Benennung von C++-Funktionen Apr 24, 2024 pm 04:21 PM

Bei der Benennung von C++-Funktionen ist es wichtig, die Reihenfolge der Parameter zu berücksichtigen, um die Lesbarkeit zu verbessern, Fehler zu reduzieren und das Refactoring zu erleichtern. Zu den gängigen Konventionen für die Parameterreihenfolge gehören: Aktion-Objekt, Objekt-Aktion, semantische Bedeutung und Einhaltung der Standardbibliothek. Die optimale Reihenfolge hängt vom Zweck der Funktion, den Parametertypen, möglichen Verwirrungen und Sprachkonventionen ab.

Wie schreibe ich effiziente und wartbare Funktionen in Java? Wie schreibe ich effiziente und wartbare Funktionen in Java? Apr 24, 2024 am 11:33 AM

Der Schlüssel zum Schreiben effizienter und wartbarer Java-Funktionen ist: Halten Sie es einfach. Verwenden Sie eine aussagekräftige Benennung. Bewältigen Sie besondere Situationen. Nutzen Sie entsprechende Sichtbarkeit.

Vollständige Sammlung von Excel-Funktionsformeln Vollständige Sammlung von Excel-Funktionsformeln May 07, 2024 pm 12:04 PM

1. Die SUMME-Funktion wird verwendet, um die Zahlen in einer Spalte oder einer Gruppe von Zellen zu summieren, zum Beispiel: =SUMME(A1:J10). 2. Die Funktion AVERAGE wird verwendet, um den Durchschnitt der Zahlen in einer Spalte oder einer Gruppe von Zellen zu berechnen, zum Beispiel: =AVERAGE(A1:A10). 3. COUNT-Funktion, die verwendet wird, um die Anzahl der Zahlen oder Texte in einer Spalte oder einer Gruppe von Zellen zu zählen, zum Beispiel: =COUNT(A1:A10) 4. IF-Funktion, die verwendet wird, um logische Urteile auf der Grundlage spezifizierter Bedingungen zu treffen und die zurückzugeben entsprechendes Ergebnis.

Vergleich der Vor- und Nachteile von C++-Funktionsstandardparametern und variablen Parametern Vergleich der Vor- und Nachteile von C++-Funktionsstandardparametern und variablen Parametern Apr 21, 2024 am 10:21 AM

Zu den Vorteilen von Standardparametern in C++-Funktionen gehören die Vereinfachung von Aufrufen, die Verbesserung der Lesbarkeit und die Vermeidung von Fehlern. Die Nachteile sind eingeschränkte Flexibilität und Namensbeschränkungen. Zu den Vorteilen variadischer Parameter gehören unbegrenzte Flexibilität und dynamische Bindung. Zu den Nachteilen gehören eine größere Komplexität, implizite Typkonvertierungen und Schwierigkeiten beim Debuggen.

Welche Vorteile haben C++-Funktionen, die Referenztypen zurückgeben? Welche Vorteile haben C++-Funktionen, die Referenztypen zurückgeben? Apr 20, 2024 pm 09:12 PM

Zu den Vorteilen von Funktionen, die Referenztypen in C++ zurückgeben, gehören: Leistungsverbesserungen: Durch die Übergabe als Referenz wird das Kopieren von Objekten vermieden, wodurch Speicher und Zeit gespart werden. Direkte Änderung: Der Aufrufer kann das zurückgegebene Referenzobjekt direkt ändern, ohne es neu zuzuweisen. Einfachheit des Codes: Die Übergabe als Referenz vereinfacht den Code und erfordert keine zusätzlichen Zuweisungsvorgänge.

Was ist der Unterschied zwischen benutzerdefinierten PHP-Funktionen und vordefinierten Funktionen? Was ist der Unterschied zwischen benutzerdefinierten PHP-Funktionen und vordefinierten Funktionen? Apr 22, 2024 pm 02:21 PM

Der Unterschied zwischen benutzerdefinierten PHP-Funktionen und vordefinierten Funktionen ist: Umfang: Benutzerdefinierte Funktionen sind auf den Umfang ihrer Definition beschränkt, während auf vordefinierte Funktionen im gesamten Skript zugegriffen werden kann. So definieren Sie: Benutzerdefinierte Funktionen werden mit dem Schlüsselwort function definiert, während vordefinierte Funktionen vom PHP-Kernel definiert werden. Parameterübergabe: Benutzerdefinierte Funktionen empfangen Parameter, während vordefinierte Funktionen möglicherweise keine Parameter erfordern. Erweiterbarkeit: Benutzerdefinierte Funktionen können nach Bedarf erstellt werden, während vordefinierte Funktionen integriert sind und nicht geändert werden können.

Erweiterte Verwendung von Referenzparametern und Zeigerparametern in C++-Funktionen Erweiterte Verwendung von Referenzparametern und Zeigerparametern in C++-Funktionen Apr 21, 2024 am 09:39 AM

Referenzparameter in C++-Funktionen (im Wesentlichen Variablenaliase; durch Ändern der Referenz wird die Originalvariable geändert) und Zeigerparameter (Speichern der Speicheradresse der Originalvariablen, Ändern der Variablen durch Dereferenzierung des Zeigers) werden beim Übergeben und Ändern von Variablen unterschiedlich verwendet. Referenzparameter werden oft verwendet, um Originalvariablen (insbesondere große Strukturen) zu ändern, um Kopieraufwand bei der Übergabe an Konstruktoren oder Zuweisungsoperatoren zu vermeiden. Zeigerparameter werden verwendet, um flexibel auf Speicherorte zu zeigen, dynamische Datenstrukturen zu implementieren oder Nullzeiger zur Darstellung optionaler Parameter zu übergeben.

See all articles