Introduction à Decorator et tutoriels associés

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() {}  // 作用表达式

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

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

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"]
}

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"]
});

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.

Référence

• Détails des décorateurs JavaScript ES7

• Spécifications du décorateur

• Exploration des décorateurs EcmaScript

• Object.defineProperty

• Plugin Babel Legacy Decorator

• core-decorators

Le contenu ci-dessus est une introduction à Decorator et aux tutoriels associés. J'espère qu'il pourra aider tout le monde.

Recommandé en premier :

Explication détaillée de la fonction Exemples de décorateur en JavaScript

Explication détaillée et exemples de décorateur décorateur

Décorateur en mode conception php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!