5 fonctionnalités JavaScript que vous devez connaître pour développer dans Gutenberg

En 2016, Matt Mullenweg nous a dit :

Je vais vous donner quelques devoirs : apprenez JavaScript en profondeur (…) car c'est l'avenir du web.

Matt Mullenweg (sur YouTube)

Je ne sais pas si vous avez suivi son conseil il y a trois ans, mais si vous ne l'avez pas fait, vous ne pouvez plus le reporter. La sortie officielle de l'éditeur de blocs a obligé de nombreux développeurs à se familiariser avec JavaScript. Le langage devient de plus en plus pertinent au sein de WordPress et, si nous ne voulons pas rester en retrait, nous devons améliorer nos compétences avec.

Dans le passé, j'ai écrit un article sur ce que vous pouvez réaliser en utilisant du JavaScript vanille, sans bibliothèques comme jQuery. Aujourd'hui, je veux aller plus loin et expliquer certaines des nouveautés qui se trouvent dans les nouvelles versions de JavaScript et qui choquent la première fois que vous les voyez. Je pense qu'il est important que vous les connaissiez, car ils sont présents dans tous les nouveaux projets JavaScript (y compris Gutenberg, bien sûr).

Apprenons JavaScript avec Gutenberg !

#1 – Déstructurer les objets et les tableaux

Supposons que nous voulions voir comment fonctionne l'interface d'édition d'un paragraphe dans Gutenberg. Si vous avez lu nos articles précédents sur Gutenberg, vous savez que nous devons regarder le composant d' edit du bloc concerné. Dans notre cas, ce composant est ParagraphBlock et la première chose que nous trouverons dans sa méthode de rendu, ligne 127, est ceci :

Qu'est ce que tout ca? Eh bien, commençons par quelque chose de plus facile. Imaginez que vous avez un objet comme celui-ci :

La déstructuration d'objets et de tableaux permet de décompresser des valeurs de tableaux, ou des propriétés d'objets, en variables distinctes :

Avec une seule déclaration, nous avons pu récupérer l' id , le title et content de notre post . Et c'est précisément ce que faisait Gutenberg dans notre premier extrait : nous avons extrait l'objet attributes , la fonction setAttributes , l'attribut isRTL , etc. de this.props .

Un peu plus déroutante, mais tout aussi intéressante, est la possibilité d'extraire des attributs d'objets imbriqués. C'est-à-dire à partir d'un objet tel que :

nous pouvons récupérer des valeurs dans post ainsi que des valeurs dans un objet imbriqué, comme id ou name dans author :

Maintenant faites attention : chaque fois que nous déstructurons un objet, les variables que nous créons ont les mêmes noms que les attributs que nous récupérons. Cela soulève la question : que se passerait-il si nous voulions récupérer plusieurs attributs id à partir de différents objets imbriqués ? Par exemple, dans notre cas, le post et son author d'objet imbriqué ont un id , donc…

pouvons-nous retirer ces deux valeurs ? La solution réside dans les alias :

Autrement dit, nous pouvons spécifier l'attribut que nous voulons extraire (par exemple, author.id ) et le nom de la variable qui contiendra sa valeur ( authorId ) en même temps.

Enfin, laissez-moi vous dire que la déstructuration fonctionne aussi avec les tableaux :

ainsi que les paramètres de fonction. Autrement dit, si l'un des paramètres de notre fonction est un objet, nous pouvons le déstructurer dans la définition de la fonction elle-même :

Assez pratique, hein ?

#2 – Fonctions fléchées

Un autre exemple assez courant. Si vous jetez un œil aux légendes des blocs d'images de Gutenberg, vous verrez ce qui suit à la ligne 693 :

Quelle est la value entre parenthèses ? Pourquoi y a-t-il une flèche ? Qu'est-ce que c'est que setAttributes avec des accolades à l'intérieur ? Arf !!

Eh bien, décryptons cela étape par étape. Lorsque vous voyez une flèche comme => , vous venez de rencontrer une fonction de flèche. Une fonction fléchée peut être extrêmement similaire aux fonctions classiques, mais elles utilisent une syntaxe légèrement différente :

Le principal avantage des fonctions fléchées est qu'elles peuvent être encore simplifiées, ce qui rend le code encore plus compact. Par exemple, si votre fonction a une seule instruction, vous pouvez enregistrer les accolades et le mot-clé return , car la fonction renverra automatiquement le résultat de l'évaluation de sa seule instruction :

Une autre simplification que nous pouvons faire sont les parenthèses dans sa liste d'arguments. Si nous écrivons une fonction qui a un seul paramètre, les parenthèses deviennent facultatives :

#3 - Opérateurs de propagation et de repos

De retour au bloc de paragraphe, jetez un oeil à la ligne 64 :

Que diable?

Eh bien, laissez-moi vous présenter l'opérateur de propagation : ... .

La syntaxe de propagation permet à un itérable tel qu'une expression de tableau ou une chaîne d'être développé aux endroits où zéro ou plusieurs arguments (pour les appels de fonction) ou éléments (pour les littéraux de tableau) sont attendus, ou une expression d'objet à développer aux endroits où zéro ou plus des paires clé-valeur (pour les littéraux d'objet) sont attendues.

Commençons par l'exemple le plus simple. Supposons que nous ayons un tableau avec un certain nombre d'éléments et que nous voulions le mettre dans un autre tableau. Nous pouvons y parvenir avec :

Avec lui, nous "développons" (d'où le nom de l'opérateur) les éléments d'un tableau ( list ) dans l'autre ( result ).

Cela fonctionne aussi avec les objets :

Regardez maintenant l'exemple suivant (qui est une copie de l'exemple de Gutenberg avec lequel nous avons ouvert cette section) :

Si je développe deux objets qui ont des propriétés en commun, l'objet résultant contiendra l'union des propriétés des deux objets et, pour chaque propriété "répétée", il contiendra la valeur de l'objet de droite. Ainsi, par exemple, l'attribut title qui se répète dans les deux objets, contient la valeur de l'objet newAttributes , tandis que les autres attributs ( author d'une part et words d'autre part) apparaissent dans le résultat avec les seules valeurs qu'ils pourraient contenir .

#4 - Modèles littéraux

Les modèles littéraux sont largement utilisés dans Gutenberg. Vous pouvez voir un exemple dans le index.js suivant, ligne 133 :

Ou, encore plus compliqué, inline 136 :

Les littéraux de modèle sont des littéraux de chaîne permettant des expressions incorporées. Vous pouvez utiliser des chaînes multilignes et des fonctions d'interpolation de chaîne avec elles. Elles étaient appelées « chaînes de modèle » dans les éditions précédentes de la spécification ES2015. Ici vous avez un autre exemple similaire au premier que nous venons de voir :

Maintenant, que se passait-il dans le deuxième exemple ? Fondamentalement, nous créons un objet avec des propriétés dont les "noms" sont dynamiques (certains utilisent une variable, d'autres utilisent des littéraux de modèle). Voyons cela avec un exemple plus court :

Plus facile que prévu, n'est-ce pas ?

#5 – Au revoir pour et pendant

Enfin, je voudrais terminer cet article avec quelques fonctions très utiles pour travailler avec des tableaux et avec lesquelles vous devriez déjà être familiarisé. Les deux peuvent être trouvés, par exemple, dans le bloc de colonnes de Gutenberg. En effet, je parle de map (ligne 136) et de reduce (ligne 119). Voyons à quoi sert chacun d'eux et comment vous pouvez les utiliser.

La méthode map crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant :

Fondamentalement, c'est une méthode qui parcourt tous les éléments d'un tableau (c'est l'instruction for ) et applique une fonction à chaque élément (le "corps" du classique for ).

La méthode reduce est très similaire à map , mais au lieu de renvoyer un tableau dont les éléments sont le résultat de l'application d'une fonction aux éléments d'origine, elle renvoie une seule valeur. C'est-à-dire une méthode qui permet d'appliquer une fonction à un accumulateur et à chaque valeur d'un tableau (de gauche à droite) pour le réduire à une seule valeur. Par exemple:

Emballer

Comme vous pouvez le voir, les nouvelles versions de JavaScript ajoutent des constructions qui permettent d'écrire du code plus efficacement et confortablement, mais sa syntaxe peut être déroutante au début. J'espère que l'article d'aujourd'hui vous a aidé à comprendre les nouveautés de JavaScript et comment utiliser ses nouvelles structures et fonctions.

J'aime beaucoup la façon dont JavaScript évolue, car je pense qu'il permet d'écrire un code meilleur et plus lisible (une fois que vous savez comment le lire, bien sûr). Qu'est-ce que tu penses? Après avoir lu cet article, avez-vous déjà envie d'« apprendre JavaScript en profondeur » une fois pour toutes ?

Image sélectionnée par Ross Findon sur Unsplash .