Introduction à Decorator et tutoriels associés-tutoriel php-php.cn

Introduction à Decorator et tutoriels associés

小云云

Libérer： 2023-03-17 18:56:01

original

1475 Les gens l'ont consulté

Introduction à Decorator

Decorator est une fonction qui peut étendre une classe ou une méthode en annotant des expressions. Décorateur peut être appliqué à n’importe quelle classe ou propriété. Par exemple :

@myDecorator class A {} // 作用class

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

Copier après la connexion

Javascript Decorator est toujours dans le statut de proposition ES7. Pour plus de progrès sur cette fonctionnalité, vous pouvez visiter la page des décorateurs de propositions pour voir.

Principe du décorateur

Quand il s'agit de modifier les propriétés ou les méthodes d'un objet, tout le monde pensera certainement à la méthode Object.defineProperty(obj, prop, descriptor) Grâce à cette méthode, nous. peut facilement modifier ou réécrire le comportement ou les propriétés d'un objet, la liaison bidirectionnelle mentionnée précédemment dans Vue est obtenue en remplaçant les méthodes set et get. Donc, avant d'utiliser officiellement Decorator, nous utilisons la méthode Object.defineProperty pour y parvenir. Comprenons brièvement cette méthode :

/**

obj : l'objet dont les propriétés doivent être modifiées
prop : le nom de la propriété de l'objet qui doit être modifié
descripteur : un objet de description utilisé pour définir le comportement spécifique de l'attribut
**/
Object.defineProperty(obj, prop, descriptor)

propriété descripteur Description

configurable : définissez si l'objet d'attribut peut être configuré, c'est-à-dire que s'il est faux, les opérations de description (inscriptible, get, etc.) qui définissent la modification ne sont pas valides
enumerable : qu'il puisse être parcouru via for-in ou l'énumération Object.keys
value : définit la valeur de l'attribut value de l'objet, la valeur peut être un nombre, un objet, une fonction, etc. etc.
inscriptible : définit si la valeur peut être remplacée
get : un objet fonction qui sera déclenché lors de l'accès à l'attribut valeur
set : un objet fonction qui sera déclenché lors de la définition de l'attribut valeur

Modifier une propriété pour readonly (readonly)

Comprendre l'objet Après la syntaxe de base de .defineProperty, j'implémente d'abord simplement une instance en lecture seule à travers celui-ci. Le code spécifique est le suivant :

Syntaxe de base et utilisation de 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 {}

Copier après la connexion

Utilisez le sucre de syntaxe Decorator pour modifier un attribut en lecture seule

Utilisez Decorator pour encapsuler PureRender pour les composants React

Nous savons tous qu'il existe une méthode ShouldComponentUpdate dans le cycle de vie de React, qui détermine si le composant restitue le composant en renvoyant vrai ou faux. En d’autres termes, grâce à cette méthode, nous pouvons filtrer certains événements de rendu de données non valides, améliorant ainsi les performances. Par exemple, nous comparons les objets de données transmis par props. Si les attributs et les valeurs de l'objet props n'ont pas changé, il n'est pas nécessaire d'exécuter la méthode de rendu.

Évidemment, en comparant si les propriétés et les valeurs de l'objet de données sous props ont changé, cette logique peut être réutilisée, au lieu d'écrire à plusieurs reprises la méthode ShouldComponentUpdate dans chaque composant séparément. En parlant de changer le comportement de la méthode de l'objet composant, ici nous pouvons évidemment utiliser la fonctionnalité

Decorator pour ce faire, c'est-à-dire que nous remplaçons ShouldComponentUpdate de l'objet Decorator. En parcourant les propriétés et les valeurs de l'objet props et en les comparant avec les propriétés et les valeurs des anciens accessoires, il est déterminé si un nouveau rendu est nécessaire. Le code spécifique est le suivant :

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 {}

Copier après la connexion

Utiliser Decorator via Babel

Puisque Decorator est une ébauche dans ES7, il doit maintenant être utilisé via Bable. La méthode d'utilisation est la suivante :

Installer

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

Utiliser

Méthode 1. Via configuration.babelrc

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

Copier après la connexion

Méthode 2, via CLI

babel --plugins transform-decorators script .js

Méthode 3, via l'API Node

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

Copier après la connexion

Résumé

Grâce à Decorator, cela ne nécessite pas de direct accès aux objets ou aux méthodes En écrivant une logique supplémentaire, vous pouvez facilement étendre les capacités des objets ou des méthodes, ce qui non seulement répond aux exigences fonctionnelles, mais rationalise également le code et garantit la maintenabilité du code, comme le @log, @test, et @mixin nous avons déjà vu. Attendez les outils. Par conséquent, vous pouvez en essayer davantage dans vos travaux futurs.