Décorateurs JavaScript et accesseurs automatiques

Une présentation pas à pas de la création de décorateurs JavaScript et de la manière dont l'utilisation des accesseurs automatiques contribue à améliorer votre expérience de développeur.

Table des matières

• Contexte et spécifications
• Préface
• Accesseurs automatiques
• Créer des décorateurs
  • Un décorateur simple
  • Validation auprès des décorateurs
  • Options de décoration
• Métadonnées

Contexte et spécification

La proposition des décorateurs sur GitHub fait déjà un excellent travail en décomposant les cas d'utilisation de base des décorateurs. Mon objectif n'est pas de recréer ces exemples ici, mais plutôt de mettre en évidence certaines fonctionnalités et interactions moins connues. De plus, dans le prochain article de cette série, je soulignerai comment composer ou enchaîner plusieurs décorateurs sur une seule propriété de classe.

Préface

Chaque exemple de code sera accompagné d'un lien vers un terrain de jeu interactif Babel REPL, afin que vous puissiez l'essayer par vous-même sans avoir besoin de configurer un polyfill ou de créer un dépôt. L'option "Évaluer" en haut à gauche (sous Paramètres) doit être cochée dans tous mes exemples, ce qui signifie que vous pourrez voir le code, le modifier, ouvrir la console de développement de votre navigateur et y voir les journaux/résultats.

Vous n'avez pas besoin de prêter attention au code transpilé sur le côté droit du Babel REPL, à moins que vous ne souhaitiez fouiller dans le polyfill pour les décorateurs. Le côté gauche de Babel REPL est l'endroit où vous pouvez modifier et écrire du code pour l'essayer par vous-même.

Pour souligner, la console de vos outils de développement doit afficher les journaux de la console. Si ce n'est pas le cas, assurez-vous que Évaluer est coché en haut à gauche.

Accesseurs automatiques

Les accesseurs automatiques sont une fonctionnalité importante de la spécification Decorators. Nous commencerons par apprendre ce qu'ils sont et comment l'utilisation de l'accesseur automatique facilitera l'écriture des décorateurs.

La proposition des décorateurs décrit ici l'accès automatique. Mais en fin de compte, c'est une fonctionnalité simple ; regardons un exemple de travail de base : Babel REPL.

class MyClass {
  accessor myBoolean = false
}

Dans cette définition de classe, le mot-clé accesseur précède le nom de la propriété. Cependant, cela n'a pas encore vraiment changé quoi que ce soit à propos de la propriété - nous verrons ensuite à quel point les accesseurs automatiques sont utiles lorsqu'ils sont combinés avec des décorateurs.

(Notez que vous pouvez également utiliser static avec des accesseurs automatiques, tels que l'accesseur statique myBoolean = false)

Créer des décorateurs

Pour mieux comprendre pourquoi nous utilisons un accesseur automatique, créons quelques décorateurs.

Un décorateur simple

Nous allons commencer par combiner des auto-accesseurs avec un décorateur qui ne fait pas grand chose en réalité, afin d'avoir une idée de la syntaxe.

Voici un décorateur fonctionnel qui conserve une variable interne et vous permet d'obtenir et de définir cette variable via la propriété de la classe : Babel REPL

function simpleDecorator(value, context) {
  let internalValue = false
  return {
    get() {
      return internalValue
    },
    set(val) {
      internalValue = val
      return internalValue
    }
  }
}

class MyClass {
  @simpleDecorator
  accessor myBoolean
}

Ce décorateur renvoie un objet avec deux méthodes : get() et set(). C'est ainsi qu'un décorateur pour un accesseur automatique peut « décorer » ou envelopper à la fois le setter et le getter d'une propriété en un seul endroit ; nous n'avons pas besoin de créer un simpleGetterDecorator et un simpleSetterDecorator. Au lieu de cela, nous les avons combinés en une seule définition avec des accesseurs automatiques, ce qui est plus simple.

En fin de compte, cela semble être une fonction assez normale jusqu'à présent - ce qui est idéal pour une introduction !

Validation auprès des décorateurs

Pour nous préparer au reste de l'article, mettons à jour notre décorateur afin qu'il effectue réellement une sorte de validation. Nous allons créer un décorateur qui vous permettra uniquement de définir des nombres pairs et rien d'autre. Voici à quoi cela ressemblerait : Babel REPL

function onlyEvenNumbers(value, context) {
  let internalNumber = 0
  return {
    get() {
      return internalNumber
    },
    set(val) {
      const num = Number(val)
      if(isNaN(num)) {
        // don't set the value if it's not a number or coerced to a number
        return internalNumber
      }
      if(num % 2 !== 0) {
        // don't allow odd numbers
        return internalNumber
      }
      internalNumber = val
      return internalNumber
    }
  }
}

class MyClass {
  @onlyEvenNumbers
  accessor myEvenNumber
}

Nous ajoutons donc une logique à la méthode set() et désormais, toute personne essayant de définir la propriété myEvenNumber sur notre classe passera par cette logique de validation. Bien.

Options du décorateur

Maintenant que nous avons un joli décorateur uniquement pair, faisons-lui gérer à la fois les nombres pairs et impairs avec une option permettant de configurer le type de nombre que nous voulons !

Heureusement, comme il s'agit d'un JavaScript d'apparence assez normale que nous écrivons ici, il n'est pas trop difficile de le configurer pour qu'il fonctionne de cette façon. Nous enveloppons le décorateur d'origine avec une fonction qui prend en charge une option, puis renvoyons le décorateur. Babel REPL

function evensOrOdds(onlyEvens = true) {
  return function decorator(value, context) {
    let internalNumber = 0
    return {
      get() {
        return internalNumber
      },
      set(val) {
        const num = Number(val)
        if(isNaN(num)) {
            // don't set the value if it's not a number
            return internalNumber
        }
        if(num % 2 !== (onlyEvens ? 0 : 1)) {
            return internalNumber
        }
        internalNumber = val
        return internalNumber
      }
    }
  }
}

class MyClass {
  @evensOrOdds(true)
  accessor myEvenNumber

  @evensOrOdds(false)
  accessor myOddNumber
}

Nous avons maintenant configuré notre décorateur pour qu'il accepte des options arbitraires, ce qui permet aux utilisateurs de notre décorateur de personnaliser son comportement. Ouais.

Métadonnées

Un outil supplémentaire que vos décorateurs peuvent utiliser est context.metadata. Cet objet est transmis à chaque décorateur et vous pouvez l'utiliser pour diverses choses, mais vous devez être prudent car l'objet de métadonnées est le même pour toutes les invocations de chaque décorateur.

Continuer l'apprentissage

Continuez avec le prochain article de la série pour apprendre à composer (ou appliquer plusieurs) décorateurs à une seule propriété !

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!