Comment améliorer vos compétences en JavaScript en écrivant votre propre cadre de développement Web

Photo par @ryoji__iwata de Unsplash

Vous êtes-vous déjà demandé comment fonctionne un framework?

Quand j'ai découvert AngularJS après avoir appris jQuery il y a de nombreuses années, AngularJS m'a semblé être une magie noire.

Puis Vue.js est sorti et, après avoir analysé son fonctionnement sous le capot, j'ai été encouragé à essayer d'écrire mon propre système de reliure à double sens.

Dans cet article, je vais vous montrer comment écrire un framework JavaScript moderne avec des attributs d'élément HTML personnalisés, la réactivité et la double liaison.

Comment fonctionne la réactivité?

Il serait bon de commencer par comprendre comment fonctionne la réactivité. La bonne nouvelle est que c'est simple. En fait, lorsque vous déclarez un nouveau composant dans Vue.js, le framework proxifie chaque propriété (getters et setters) à l'aide du modèle de conception du proxy.

Ainsi, il sera capable de détecter les changements de valeur de propriété à la fois du code et des entrées utilisateur.

À quoi ressemble le modèle de conception de proxy

L'idée derrière le modèle de proxy est simplement de surcharger l'accès à un objet. Une analogie dans la vie réelle pourrait être l'accès à votre compte bancaire.

Par exemple, vous ne pouvez pas accéder directement au solde de votre compte bancaire et modifier la valeur en fonction de vos besoins. Il est nécessaire que vous demandiez à quelqu'un qui a cette permission, dans ce cas, votre banque.

Dans l'exemple ci-dessus, lors de l'utilisation de l'objet de banque pour accéder au solde du compte, la fonction de lecture est surchargée et renvoie toujours 9 000 000 à la place de la valeur de la propriété, même si celle-ci n'existe pas.

En surchargeant la fonction set, il est possible de manipuler son comportement. Vous pouvez modifier la valeur à définir, mettre à jour une autre propriété ou même ne rien faire du tout.

Exemple de réactivité

Maintenant que vous savez comment fonctionne le modèle de conception de proxy, commençons à écrire notre infrastructure JavaScript.

Pour rester simple, nous allons imiter la syntaxe AngularJS pour le faire. Déclarer un contrôleur et lier des éléments de modèle aux propriétés du contrôleur est assez simple.

Commencez par définir un contrôleur avec des propriétés. Ensuite, utilisez ce contrôleur dans un modèle. Enfin, utilisez l'attribut ng-bind pour activer la liaison double avec la valeur de l'élément.

Analyser le modèle et instancier le contrôleur

Pour que les propriétés soient liées, nous devons obtenir un emplacement (contrôleur) pour les déclarer. Il est donc nécessaire de définir un contrôleur et de l’introduire dans notre framework.

Lors de la déclaration du contrôleur, l'infrastructure recherchera des éléments dotés d'attributs ng-controller.

S'il convient à l'un des contrôleurs déclarés, il créera une nouvelle instance de ce contrôleur. Cette instance de contrôleur est uniquement responsable de cet élément de modèle particulier.

Voici à quoi ressemble la déclaration de variable des contrôleurs faits à la main. L'objet controllers contient tous les contrôleurs déclarés dans la structure en appelant addController.

Définition de contrôleurs faits à la main

Pour chaque contrôleur, une fonction usine est enregistrée pour instancier un nouveau contrôleur si nécessaire. La structure stocke également chacune des nouvelles instances du même contrôleur que celles utilisées dans le modèle.

À la recherche de reliures

À ce stade, nous avons une instance du contrôleur et un modèle utilisant cette instance.

L'étape suivante consiste à rechercher des éléments avec des liaisons qui utilisent les propriétés du contrôleur.

Très simple, il stocke toutes les liaisons d'un objet (utilisé comme une carte de hachage). Cette variable contient toutes les propriétés à associer à la valeur actuelle et tous les éléments DOM qui lient cette propriété.

Déclaration de reliures à la main

Propriétés du contrôleur de liaison double

Une fois que le travail préliminaire a été effectué par le cadre, voici la partie intéressante: la double liaison.

Cela implique de lier la propriété du contrôleur aux éléments DOM pour mettre à jour le DOM chaque fois que le code met à jour la valeur de la propriété.

En outre, n’oubliez pas de lier les éléments DOM à la propriété du contrôleur. Ainsi, lorsque l’utilisateur modifie la valeur d’entrée, il met à jour la propriété du contrôleur. Ensuite, il mettra également à jour tous les autres éléments liés à cette propriété.

Détecter les mises à jour à partir du code avec un proxy

Comme expliqué ci-dessus, Vue encapsule les composants dans un proxy pour réagir aux modifications de propriétés. Faisons de même en envoyant un proxy au setter uniquement pour les propriétés liées au contrôleur.

Chaque fois qu'une propriété liée est définie, le proxy vérifie tous les éléments liés à cette propriété. Ensuite, il les mettra à jour avec la nouvelle valeur.

Dans cet exemple, nous ne prenons en charge que la liaison d'éléments d'entrée, car seul l'attribut value est défini.

Réagir aux événements d'éléments

La dernière chose à faire est de réagir aux interactions des utilisateurs. Les éléments DOM déclenchent des événements lorsqu'ils détectent un changement de valeur.

Écoutez ces événements et mettez à jour la propriété liée avec la nouvelle valeur de l'événement. Tous les autres éléments liés à la même propriété seront mis à jour automatiquement grâce au proxy.

Une fois que vous avez tout mis ensemble, vous obtenez des entrées à double reliure faites à la main. Voici une démo de travail incluant tout le code.

Merci pour la lecture. J'espère que cela vous a aidé à démystifier le fonctionnement des frameworks JavaScript.

Toutes nos félicitations! Vous avez développé des fonctionnalités populaires telles que les attributs d'élément HTML personnalisés, la réactivité et la double liaison!

Si vous avez trouvé cet article utile, veuillez cliquer plusieurs fois sur le bouton pour que les autres utilisateurs puissent trouver l'article et montrer votre soutien!

N’oubliez pas de me suivre pour être averti de mes prochains articles

Découvrez mes autres messages

https://medium.com/@jbardon/latest

➥ Réagir pour les débutants

  • Un guide rapide pour apprendre à réagir et comment fonctionne son DOM virtuel
  • Comment amener la réactivité à réagir avec les états

➥ JavaScript

  • Erreurs courantes à éviter lors du travail avec Vue.js
  • Arrêtez le débogage JavaScript pénible et adoptez Intellij avec la carte source
  • Comment réduire d'énormes paquets JavaScript sans effort