Le premier pattern que nous allons voir est le Constructor Pattern. Si vous venez d’un autre langage de programmation (le PHP ou le Java, par exemple), vous devez le connaître sous le nom de “Popo” (Plain Old PHP Object), “Pojo” (Plain Old Java Object) ou “Entité”.
C’est souvent le premier design pattern que j’apprends à mes étudiants. Il est à la fois :
Simple à comprendre ;
Simple à mettre en place ;
Très pratique.
Gérez le formatage de vos données avec le Constructor Pattern
L’issue vous indique que les données ne sont plus formatées de la même manière :
Les heures ne vont plus être des chaînes de caractères sous la forme “2h09”, mais des nombres sous la forme 129 (pour 129 minutes).
Les titres sont maintenant en anglais et en français. Si un titre français est disponible, il doit être utilisé en priorité.
Vous pourriez tout à fait réaliser ces modifications dans le fichiertemplates/MovieCard.js. Ce serait un peu la solution la plus simple et la plus rapide. Cela dit, si demain vous affichez les données de l’API à plusieurs endroits de l’application, vous devrez modifier chacun de ces endroits à la main.
De la même manière, si le format de données évolue encore, je devrai à nouveau réaliser ces modifications ?
Exactement !
Et du coup, le principe du Constructor Pattern, c’est de faciliter les changements de format ?
C’est ça !
Un Constructor Pattern est souvent utilisé pour faciliter la création et/ou le formatage d’objets. C’est en quelque sorte l'empreinte digitale de ces derniers. Nous pouvons nous servir de ce type de pattern pour :
Formater des données. Ces données peuvent provenir d’une API (comme dans notre projet), d’un Local Storage ou d’un Session Storage.
Créer des objets. Par exemple, le Constructor Pattern était très utilisé pour créer des animations avec jQuery il y a quelques années.
Maintenant que vous avez identifié la problématique résolue par ce pattern, il est temps de nous intéresser à ses caractéristiques.
Identifiez les caractéristiques du Constructor Pattern
Chaque pattern que vous allez voir sera présenté avec un diagramme : cela vous donnera l’opportunité d’apprendre à les lire, et de voir l’information représentée sous une autre forme. :)
Dans le diagramme ci-dessus, vous pouvez voir qu’un Constructor Pattern est composé de deux éléments :
Le “Parent”. Ici, ce sera une classe qui correspondra au squelette de notre pattern. Spoiler alerte, nous appellerons cette classe Movie dans le cadre de Filmo Patterns.
L’objet “New Object”. Il sera instancié à partir de cette classe. Si vous avez un doute sur l’instanciation, n’hésitez pas à relire les chapitres de la première partie liés à l’orienté objet.
Euhhh et ça donne quoi niveau code ?
Voici la représentation de ce pattern niveau code :
// Le Parent
class Movie {
constructor(data) {
this._title = data.title
this._duration = data.duration
}
get title() {
return this._title
}
get duration() {
return this._duration
}
}
const dataExample = {
title: "Titre de film",
duration: "1h20"
}
// Le "New Object"
const MovieExample = new Movie(dataExample)Mais ça ressemble beaucoup aux exemples de la partie précédente ?
Tout à fait !
C’est notamment pour ça que j’ai décidé de commencer par ce pattern. Si vous savez comment créer des objets via les classes en JavaScript, vous savez comment créer un Constructor Pattern.
À quoi correspond legetutilisé devant les méthodesget title etget duration ?
Implémentez un Constructor Pattern
Le plus souvent, les cours sur les design patterns s’arrêtent à cette étape. Autrement dit, on vous a expliqué ce qu’étaient le pattern, son diagramme, à quoi il servait, et un peu de code et c’est tout ! Dans ce cours, on va aller un peu plus loin. On va ici s’intéresser à son implémentation.
Alors où allons-nous ajouter notre Constructor Pattern ? Si vous ouvrez le projet, vous verrez que :
J’ai créé un dossier
models. C’est dans ce dossier que je “range” mes Constructor Patterns ;À l’intérieur de ce dossier, j’ai déjà créé deux fichiers :
MovieetOldMovie. Nous allons pour le moment nous servir du fichier OldMovie.
Dans la vidéo ci-dessous, je vais vous montrer comment coder votre Constructor Pattern.
Si vous avez bien suivi la vidéo, votre code devrait être conforme au code de la branche partie-2/chapitre-1-exercice .
À vous de jouer !
Maintenant que vous savez comment implémenter un Constructor Pattern, c’est l’heure de passer à la pratique !
Dans cet exercice, vous utiliserez le nouveau fichier JSON data/new-movie-data.json . Ce dernier comprend les modifications qui ont été référencées dans cette issue GitHub.
Avant de commencer à coder, pensez bien à :
Utiliser le fichier
models/Movie.jspour votre pattern ;Lier ce fichier via la balise
scriptdans votre index.html.
Le code source contenant la solution de cet exercice se trouve sur la branchepartie-2/chapitre-1-fin .
En résumé
Le Constructor Pattern vous permet de gérer le formatage de vos objets lors de leur création.
Pour mettre en place un Constructor Pattern, vous devez créer un fichier ainsi qu’une classe. Les deux peuvent avoir le même nom, par exemple Movie.
L’ensemble de vos Constructors peuvent aller dans le dossier Models. Cela vous permettra de conventionner votre architecture.
Un constructor peut vous permettre de stocker différentes versions d’une même donnée, pour gérer par exemple les différentes tailles d’images.
Vous venez de découvrir votre premier design pattern : félicitations ! Nous allons maintenant nous intéresser au Factory Pattern pour déléguer la création de nos Constructors.
