Modèles de conception dans le développement JavaScript moderne

L'auteur du matériel, dont nous publions la traduction, dit que dans le monde du développement logiciel, la «conception architecturale» peut être appelée le processus de construction de l'application, au cours de laquelle ils s'efforcent de la rendre de haute qualité, fiable et bien adaptée au support. De plus, les modèles de conception (modèles) vous permettent de travailler avec des concepts qui sont des approches pour résoudre des problèmes courants. Ces décisions peuvent varier de l'abstrait, du conceptuel au très spécifique. Leurs connaissances permettent aux développeurs de communiquer efficacement entre eux.

Si au moins deux développeurs d'une équipe comprennent les modèles, parler de la résolution des problèmes auxquels l'équipe est confrontée devient très productif. Si un seul membre de l'équipe connaît les schémas, il arrive généralement de clarifier ce qu'il sait aux autres membres de l'équipe.



Le but de cet article est d'intéresser les lecteurs avec une sorte de présentation formelle des connaissances dans le domaine du développement logiciel, en leur montrant l'idée de modèles de conception et en décrivant plusieurs modèles qui sont intéressants en ce qu'ils trouvent une application dans le développement JavaScript moderne.

Motif singleton

▍ Général

Le motif de conception «singleton» (également appelé «singleton») ne peut pas être appelé l'un des motifs les plus utilisés, mais nous entamons la conversation avec lui, car il est relativement facile à comprendre.

Ce modèle découle du concept mathématique d'un singleton - un ensemble singleton, c'est-à-dire un ensemble contenant un seul élément. Par exemple, l'ensemble {null} est un singleton.

Dans le domaine du développement logiciel, la signification du modèle «singleton» se résume au fait que nous limitons le nombre d'instances possibles d'une certaine classe à un seul objet. À la première tentative de création d'un objet basé sur une classe qui implémente ce modèle, un tel objet est réellement créé. Toutes les tentatives ultérieures de création d'une instance de la classe renverront l'objet créé lors de la première tentative d'obtention d'une instance de la classe.


Pourquoi un autre super-héros quand nous avons Batman?

Ci-dessus est un exemple d'une classe qui implémente le modèle singleton.

▍ Pourquoi est-ce nécessaire?

Il est clair que ce schéma nous permet de nous limiter à un seul «super-héros» (c'est évidemment Batman). Mais sinon pourquoi en aurait-il besoin?

Bien que ce modèle ne soit pas sans ses propres problèmes (auparavant, il était appelé mal, étant donné que le singleton s'appelait menteurs pathologiques ), il peut, dans certaines situations, être très utile. L'une de ces situations consiste à initialiser les objets de configuration. Dans une application typique, il est logique de ne conserver qu'une seule instance d'un tel objet, sauf si, conformément aux caractéristiques du projet, plusieurs objets similaires y sont utilisés.

▍Où l'utiliser?

Le principal exemple d'utilisation du modèle singleton dans les grands frameworks populaires est les services angulaires. La documentation Angular a une page séparée expliquant comment faire d'un service un singleton.

La conception de services sous forme de singletones a une signification profonde, car les services sont utilisés comme référentiels d'état, de configuration et vous permettent d'organiser l'interaction entre les composants. Tout cela conduit au fait que le développeur a besoin pour que son application ne dispose pas de plusieurs instances du même service.

Prenons un exemple. Supposons que nous ayons une application simple qui est utilisée pour compter le nombre de clics sur les boutons.


Chaque clic sur l'un des boutons met à jour le compteur

Le nombre de clics sur les boutons doit être stocké dans un objet, qui implémente les fonctionnalités suivantes:

• Il vous permet de compter les clics sur les boutons.
• Il permet de lire la valeur actuelle du compteur de clics.

Si un tel objet n'était pas un singleton (et chaque bouton avait sa propre instance d'un tel objet associé), le programme calculait incorrectement le nombre de clics sur les boutons. De plus, avec cette approche, il est nécessaire de résoudre le problème suivant: "De quel objet particulier chargé de compter les clics les données affichées à l'écran seront-elles prises?"

Modèle d'observateur

▍ Général

Un modèle d'observateur est un modèle de conception dans lequel un objet appelé sujet maintient une liste d'objets dépendants appelés observateur et les avertit automatiquement lorsque leur état change, généralement en appelant l'une de leurs méthodes. .

Comprendre ce modèle n'est pas difficile si vous trouvez son analogie dans le monde réel. À savoir, nous parlons d'abonnements à des journaux.

Supposons que vous achetiez généralement des journaux dans un kiosque. Vous y allez, vous demandez s'il y a un nouveau numéro de votre journal préféré. Si ce dont vous avez besoin n'est pas dans le kiosque, vous rentrez chez vous, perdez du temps, puis allez à nouveau au kiosque. Si nous considérons cette situation comme appliquée à JavaScript, ce serait comme un sondage cyclique d'une entité, effectué jusqu'à ce que les données nécessaires en soient reçues.

Après, quand vous obtenez enfin le journal dont vous avez besoin, vous pouvez commencer ce que vous avez cherché pendant tout ce temps - prendre une tasse de café et déplier le journal. En JavaScript, cela reviendrait à appeler un rappel, que nous allions appeler après avoir obtenu le résultat souhaité.


Enfin, vous pouvez lire le journal

Il serait beaucoup plus raisonnable de le faire: abonnez-vous à un journal et recevez chaque jour son dernier numéro. Avec cette approche, l'éditeur vous fera savoir qu'un nouveau numéro du journal a été publié et vous le livrera. Vous n'avez plus besoin d'aller au kiosque. Plus de perte de temps.

Si vous basculez à nouveau vers JavaScript, cela signifie que vous n'avez plus à attendre dans la boucle un résultat et, après l'avoir reçu, appeler une certaine fonction. Au lieu de cela, vous informez le sujet que vous êtes intéressé par certains événements (messages) et lui transmettez la fonction de rappel, qui doit être appelée lorsque les données d'intérêt sont prêtes. Dans ce cas, vous devenez observateur.


Maintenant, vous ne manquerez plus jamais votre journal du matin préféré

Le motif en question a une caractéristique intéressante: vous n'êtes pas obligé d'être le seul observateur. Si vous ne pouvez pas obtenir votre journal préféré, cela vous bouleversera. Mais la même chose arrivera à d'autres personnes qui ne peuvent pas l'acheter. C'est pourquoi plusieurs observateurs peuvent souscrire à un même sujet.

▍ Pourquoi est-ce nécessaire?

Le modèle «observateur» est utilisé dans de nombreuses situations, mais il doit généralement être utilisé lorsque vous souhaitez créer une relation un-à-plusieurs entre des objets, et en même temps, ces objets ne doivent pas être fortement connectés. De plus, le système devrait être en mesure de notifier un nombre illimité d'objets de certaines modifications.

Les applications JavaScript sont un excellent endroit pour appliquer le modèle d'observateur, car tout est piloté par les événements ici, et au lieu de se référer constamment à une certaine entité pour savoir si un événement qui vous intéresse s'est produit, il sera beaucoup mieux de le laisser vous avertir lorsque l'occurrence de cet événement (il est similaire au vieil adage: "Ne nous appelez pas. Si nécessaire, nous vous appellerons nous-mêmes").

Il est probable que vous ayez déjà utilisé des conceptions qui ressemblent au modèle d'observateur. Par exemple, il s'agit de addEventListener . L'ajout d'un écouteur d'événements à un élément présente tous les signes d'utilisation du modèle d'observateur:

• Vous pouvez vous abonner à l'objet.
• Vous pouvez vous désinscrire de l'objet.
• Un objet peut informer tous ses abonnés de l'événement.

Il est utile de connaître l'existence du modèle «observateur» dans le sens où cette connaissance vous permet de réaliser votre propre sujet, ou bien plus rapidement qu'auparavant, de trouver une solution existante en utilisant ce modèle.

▍Où l'utiliser?

L'implémentation de base de ce modèle ne doit pas être particulièrement compliquée, mais il existe d'excellentes bibliothèques qui l'implémentent et sont utilisées dans de nombreux projets. Nous parlons du projet ReactiveX et de sa version JavaScript de RxJS .

La bibliothèque RxJS permet non seulement de s'abonner à des sujets, mais donne également au programmeur la possibilité de transformer les données de diverses manières, vous permet de combiner de nombreux abonnements, améliore la capacité de gérer les opérations asynchrones. De plus, ses capacités ne se limitent pas à cela. Si vous avez toujours voulu augmenter les capacités de vos programmes pour le traitement et la conversion des données à un niveau supérieur, vous pouvez recommander d'étudier la bibliothèque RxJS.

En plus du modèle «observateur», le projet ReactiveX peut être fier de la mise en œuvre du modèle «itérateur», qui permet au sujet d'informer les abonnés de la fin de l'abonnement, ce qui permet essentiellement d'annuler l'abonnement à l'initiative du sujet. Dans cet article, je ne vais pas parler du modèle «itérateur», mais je peux dire que si vous commencez tout juste à apprendre les modèles de conception, étudier ce modèle et réfléchir à sa composition avec le modèle «observateur» peut être de bons exercices.

Motif de façade

▍ Général

Le motif de la façade tire son nom de l'architecture. En architecture, une façade est généralement l'un des côtés extérieurs d'un bâtiment, généralement le côté avant. L'anglais a emprunté le mot «façade» au français. Nous parlons du mot «façade», qui, entre autres, se traduit par «la façade du bâtiment».

La façade du bâtiment en architecture est l'extérieur du bâtiment, cachant ce qui est à l'intérieur. Des propriétés similaires peuvent être notées dans le motif «façade», car il vise à cacher des mécanismes internes complexes derrière une certaine interface externe. Son application permet au développeur de travailler avec une API externe, arrangée assez simplement, et, en même temps, offre la possibilité de changer les mécanismes internes cachés derrière la façade, sans perturber les performances du système.

▍ Pourquoi est-ce nécessaire?

Le motif «façade» peut être utilisé dans un grand nombre de situations, parmi lesquelles on peut notamment noter celles qui tentent de rendre le code plus facile à comprendre (c'est-à-dire qu'elles cachent des mécanismes complexes derrière de simples API), et celles où des fragments de systèmes tendent à faire autant que possible plus lâche connecté les uns aux autres.


Ces objets ont besoin de quelque chose de la tanière du dragon.

Il est facile de voir qu'un objet de façade (ou un calque avec plusieurs objets) est une abstraction très utile. Il est peu probable que quelqu'un veuille rencontrer un dragon si cela peut être évité. L'objet de façade est nécessaire pour fournir à d'autres objets une API pratique, et cet objet fera face à tous les tours de dragon par lui-même.

Une autre caractéristique utile du modèle de «façade» est que le dragon peut être «refait» comme vous le souhaitez, mais cela n'affectera pas les autres parties de l'application. Supposons que vous souhaitiez remplacer un dragon par un chaton. Le chaton, comme le dragon, a des griffes, mais il est plus facile à nourrir. Transformez le dragon en chaton - cela signifie - pour réécrire le code de l'objet de façade sans apporter de modifications aux objets dépendants.

▍Où l'utiliser?

Le motif de façade se trouve souvent en angulaire. Là, les services sont utilisés comme un moyen de simplifier une logique de base. Mais ce modèle ne s'applique pas seulement à Angular, vous pouvez le voir ci-dessous.

Supposons que nous ayons besoin d'ajouter un système de gestion d'état à l'application. Pour résoudre ce problème, vous pouvez utiliser divers outils, parmi eux - Redux, NgRx, Akita, MobX, Apollo, ainsi que - de nouveaux outils constamment émergents. Pourquoi ne pas les essayer tous?
Quelle est la principale fonctionnalité qu'une bibliothèque de gestion d'état devrait fournir? Ce sont probablement les caractéristiques suivantes:

• Un mécanisme pour informer le système de gestion de l'État que nous devons changer d'état.
• Le mécanisme d'obtention de l'état actuel ou de son fragment.

Tout ne semble pas si mal.

Maintenant, armé du motif «façade», vous pouvez écrire des façades pour travailler avec différentes parties de l'état, fournissant des API pratiques qui peuvent être utilisées dans le programme. Par exemple, quelque chose comme facade.startSpinner() , facade.stopSpinner() et facade.getSpinnerState() . Ces méthodes sont faciles à comprendre, vous pouvez facilement vous y référer dans une conversation sur le programme.

Après cela, vous pouvez travailler avec des objets qui implémentent le modèle de «façade» et écrire du code qui transformera votre code afin qu'il puisse fonctionner avec Apollo (la gestion de l'état avec GraphQL est un sujet brûlant). Au cours des tests, vous constaterez peut-être qu'Apollo ne vous convient pas ou que vous êtes mal à l'aise d'écrire des tests unitaires basés sur ce système de gestion d'état. Pas de problème - écrivez une nouvelle façade conçue pour prendre en charge MobX et essayez à nouveau le système.


Différents systèmes de gestion de l'état de l'application, accessibles par une seule façade, peuvent également être des dragons ...

Résumé

Vous avez probablement remarqué que lorsque nous avons parlé de modèles de conception, nous n'avons pas considéré d'exemples de code. Le fait est qu'une analyse approfondie de chaque modèle dessine au moins un chapitre distinct dans le livre le plus fin. Au fait, puisque nous parlons de livres, nous avons ici des publications intéressantes que vous pouvez consulter pour ceux qui veulent se plonger dans l'étude des modèles.

En fin de compte, je tiens à dire que dans le développement de modèles, rien ne vaut une recherche sur Internet, la lecture et le test indépendant de diverses idées. Même s'il s'avère que vous n'utiliserez jamais de modèles, vous comprendrez quelque chose de nouveau et en apprendrez plus sur eux et grandirez dans des domaines inattendus pour vous.

Chers lecteurs! Quels modèles de conception utilisez-vous?