Les patrons de conception sont des solutions réutilisables aux problèmes courants dans la conception de logiciels. Ils sont à la fois passionnants et fascinants à explorer dans n’importe quel langage de programmation. Une des raisons de cela est qu’ils nous aident à tirer parti de l’expérience combinée de nombreux développeurs qui nous ont précédés et à nous assurer de structurer notre code de manière optimisée, répondant aux besoins des problèmes que nous essayons de résoudre. Les modèles de conception nous fournissent également un vocabulaire commun pour décrire les solutions. Cela peut être significativement plus simple que de décrire la syntaxe et la sémantique lorsque nous essayons de transmettre un mode de structuration d’une solution sous forme de code à d’autres. Dans ce blog, je vais vous décrire quelques unes de ces patrons de conception en javascript.
Dans les exemples qui suivent, je vous montre comment travailler avec un objet ‘individu’ qui contient les propriétés age, nom et ville en utilisant les différents patrons de conception.
Le patron de conception ‘Factory’ (usine)
Le Factory est un patron de conception créatif qui concerne la notion de création d’objets. Là où il diffère des autres modèles dans sa catégorie, c’est qu’il ne nous oblige pas explicitement à utiliser un constructeur. Au lieu de cela, un Factory ( l’usine ) peut fournir une interface générique pour créer des objets, où nous pouvons spécifier le type d’objet que nous souhaitons créer.
Imaginez que nous avons une usine UI où nous sommes invités à créer un type de composant UI. Plutôt que de créer ce composant directement en utilisant le nouvel opérateur ou via un autre constructeur créatif, nous demandons plutôt un objet Factory pour un nouveau composant. Nous informons l’usine quel type d’objet est requis (p. Ex. “Bouton”, “Panneau”) et il l’instancie, nous le renvoyant pour l’utiliser.
Un example
[code language=”javascript”]
var individuFactory = function(age, nom, ville) {
//les fonctions servent un peu le role de classes
//on crée un objet vide dans cet objet
var temp = {};
temp.age = age;
temp.nom = nom;
temp.ville = ville;
temp.AfficherIndividu = function() {
console.log(this.age + "," + this.nom + "," + this.ville)
};
return temp;
};
Individu1 = individuFactory(15, ‘Jean’, ‘Paris’);
Individu2 = individuFactory(18, ‘Pascal’, ‘Toulouse’);
Individu3 = individuFactory(19, ‘Pierette’, ‘Marseille’);
Individu4 = individuFactory(35, ‘Michael’, ‘Lille’);
//Ajouter ces individus à un tableau et les afficher
var individus = [];
individus.push(Individu1, Individu2, Individu3, Individu4);
for (var i = 0; i < individus.length; i++) {
console.log(individus[i].age + "," + individus[i].nom + "," + individus[i].ville);
}
[/code]
Le patron de conception ‘Constructeur’
Dans les langages de programmation classiques orientés objet, un constructeur est une méthode spéciale utilisée pour initialiser un objet nouvellement créé une fois que la mémoire lui a été attribuée. En JavaScript, comme presque tout est un objet, nous nous intéressons le plus souvent aux constructeurs d’objets.
Les constructeurs d’objets sont utilisés pour créer des types spécifiques d’objets: à la fois la préparation de l’objet à utiliser et l’acceptation des arguments qu’un constructeur peut utiliser pour définir les valeurs des propriétés et des méthodes du membre lorsque l’objet est créé.
Un example
[code language=”javascript”]
//Patron de conception : Constructeur
//Identique au precedent, cette fois ci, on utilise un constructeur.
var individuConstructeur = function(age, nom, ville) {
// au lieu d’utiliser un objet temp, comme les fonctions sont aussi des objets, on peut leur ajouter des proprietes.
// en utilisant ‘this’
this.age = age;
this.nom = nom;
this.ville = ville;
this.Afficher = function() {
console.log(this.age + "," + this.nom + "," + this.ville)
};
};
//Contrairement au patron de conception Factory, comme on ne retourne pas d’objet, il faut creer d’autres objet
// a partir de cet objet lui meme
// Il faut utiliser un constructeur.
var individu_c1 = new individuConstructeur(48, ‘Marine Le Pen’, ‘Henin Beaumont’);
var individu_c2 = new individuConstructeur(39, ‘Emmanuel Macron’, ‘Paris’);
var individu_c3 = new individuConstructeur(63, ‘Francois Fillon’, ‘Sartre’);
var individu_c4 = new individuConstructeur(49, ‘Benoit Hamon’, ‘Paris’);
var individu_c5 = new individuConstructeur(62, ‘Jean LaSalle’, ‘Pyrenees Atlantiques’);
var individu_c6 = new individuConstructeur(75, ‘Jacques Cheminade’, ‘Mars’);
var individu_c7 = new individuConstructeur(64, ‘Jean Luc Melenchon’, ‘Montpellier’);
individu_c1.Afficher();
//Le probleme avec le patron de conception Constructeur c’est que chaque objet a sa propre methode
// Afficher
//Donc si on cree des milliers d’objets, ca fera beaucoup et c’est donc de la redondance.
[/code]
Le patron de conception ‘Prototype’
Le GoF se réfère au prototype en tant que celui qui crée des objets en fonction d’un modèle d’un objet existant par clonage.
Nous pouvons penser que le modèle de prototype est basé sur l’héritage où nous créons des objets qui constituent des prototypes pour d’autres objets. L’objet prototype lui-même est effectivement utilisé comme modèle pour chaque objet créé par le constructeur. Si le prototype de la fonction constructeur utilisé contient une propriété appelée nom par exemple (selon l’exemple de code plus bas), chaque objet créé par ce même constructeur aura également cette même propriété.
L’un des avantages de l’utilisation du prototype est que nous travaillons avec les fonctionnalités que JavaScript offre de manière native plutôt que tenter d’imiter les fonctionnalités d’autres langues.
Non seulement le modèle est un moyen simple d’implémenter les héritages, mais il peut également aussi y avoir une amélioration des performances: lors de la définition d’une fonction dans un objet, ils sont tous créés par référence (de sorte que tous les objets enfants désignent la même fonction) Au lieu de créer leurs propres copies individuelles.Les objets créés sont des clones (clones peu profonds) de l’objet d’origine qui sont transmis. Un cas d’utilisation du modèle prototype effectue une opération de base de données étendue pour créer un objet utilisé pour d’autres parties de l’application. Si un autre processus doit utiliser cet objet, au lieu d’avoir à effectuer cette opération de base de données substantielle, il serait avantageux de cloner l’objet précédemment créé.
[code language=”javascript”]
//Patron de conception : Prototype
//Permet de resoudre les problematiques lies au prototype Constructeur.
//On cree d’abord un objet vide
//Nous allons ajouter des proprietes et des fonctions
var individuPrototype = function() {
};
individuPrototype.prototype.age = 0;
individuPrototype.prototype.nom = "pas de nom";
individuPrototype.prototype.ville = "pas de ville";
individuPrototype.prototype.Afficher = function() {
console.log(this.age + "," + this.nom + "," + this.ville);
}
individuPrototype.prototype.Afficher();
var individu_p1 = new individuPrototype();
individu_p1.age = 45;
individu_p1.nom = ‘Pierre’;
individu_p1.ville = ‘Marseille’;
individu_p1.Afficher();
// Des tests pour determiner si un objet a ou non des proprietes definis a l’interieur
console.log(‘age’ in individu_p1);
console.log(individu_p1.hasOwnProperty(‘nom’));
// Les désavantages, c’est que, a chaque fois, il faut créer un objet vide
// redondance de code même si l’objet crée est plutôt ‘léger’
[/code]
Le patron de conception ‘Prototype’ : Optimisation
[code language=”javascript”]
// Patron de conception : Prototype Dynamique
var individuPrototypeDynamqique = function(age, nom, ville) {
//Comme pour le patron de conception Constructeur
this.age = age;
this.nom = nom;
this.ville = ville;
//Seule difference dans la fonction
//Un test pour determiner ou non la presence de la fonction Afficher
// Si elle n’existe pas, on la cree, mais au lieu de la creer ici, on la cree
// dans l’espace prototype
// La fonction est cree UNE SEULE FOIS lors de la creation du premier objet
// Quand le second objet sera cree, on n’aura pas besoin de la creer une deuxieme fois.
if (typeof this.Afficher !== ‘function’) {
individuPrototypeDynamqique.prototype.Afficher = function() {
console.log(this.age + "," + this.nom + "," + this.ville);
}
}
}
var individu_d1 = new individuPrototypeDynamqique(33, ‘Ajmal’, ‘Ile Maurice’);
var individu_d2 = new individuPrototypeDynamqique(30, ‘Pauline’, ‘Paris’);
individu_d1.Afficher();
individu_d2.Afficher();
[/code]
Conclusion
Si on veut un seul objet, on peut utiliser le patron de conception ‘Constructeur’
Si on veut créer plusieurs objets, le patron de conception Prototype Dynamique convient le mieux.
Vous pouvez retrouver le code sur JSFiddle