Comment créer du code réutilisable en JavaScript à l’aide de modèles de conception
Si vous souhaitez créer du code JavaScript réutilisable ou collaborer avec une équipe de développeurs, vous devez savoir comment utiliser et identifier les différents modèles de conception dans le langage.
En JavaScript, le terme modèle de conception fait référence à une manière spécifique d'écrire du code et est souvent considéré comme un modèle de programmation. Ce qui est intéressant, c'est que l'étiquette «modèle de conception» peut être appliquée à tout, d'une application entière à un simple bloc de code.
Le modèle de conception est un vaste sujet, mais en comprenant le modèle de module et la méthode d'usine, vous devriez vous y familiariser.
Le modèle de module
Les modules JavaScript ont été introduits en 2009, avec la version ES5 du langage de programmation. À l'aide de modules, les développeurs pouvaient désormais créer des morceaux de code personnalisés et les exporter pour les utiliser dans d'autres sections d'une application JavaScript.
La structure de base du modèle de module
(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})();Dans l'exemple ci-dessus, les modèles de module sont toujours inclus dans une expression de fonction immédiatement appelée (IIFE). Cela signifie qu'un modèle de module est exécuté dès qu'il est défini. La chose importante à noter est que le modèle de module se compose de deux sections distinctes.
La première section est utilisée pour déclarer des variables et des fonctions privées, qui ne sont accessibles que dans le cadre du modèle de module.
La deuxième section se compose d'une valeur de retour qui renferme des variables publiques et des fonctions accessibles en dehors de la portée du modèle de module.
Utilisation du modèle de module pour créer une application
Considérez une application simple comme un gestionnaire de tâches. En utilisant le modèle de module, vous devrez créer des modules personnalisés pour chaque section. Ceux-ci peuvent inclure:
- Un contrôleur de tâches
- Un contrôleur d'interface utilisateur
- Un contrôleur de stockage
- Un contrôleur d'application
Le contrôleur de tâches sera utilisé pour créer chaque nouvelle tâche. Le contrôleur d'interface utilisateur sera utilisé pour contrôler les fonctions liées à l'interface utilisateur, telles que l'écoute du clic sur un bouton ou la modification de ce qui est affiché. Le contrôleur de stockage sera utilisé pour enregistrer chaque nouvelle tâche dans une base de données. Le module d'application sera utilisé pour exécuter l'application.
Utilisation du modèle de module pour créer un exemple de contrôleur d'interface utilisateur
const UIController = ( function() {
//the private section of the module
let component = 'Replacement Text';
const changeComponent = function() {
//change all the h1 text to what is in the component variable above
const element = document.querySelector('h1');
element.textContent = component;
}
//the public section of the module
return{
callChangeComponent: function() {
changeComponent();
}
}
})();
L'exemple ci-dessus montre clairement les deux sections qui se trouvent dans un modèle de module: privé et public.
Dans la section privée de la fonction, la variable de composant et la fonction changeComponent sont toutes deux privées. Par conséquent, si vous vouliez modifier tout le texte h1 sur une page Web, vous obtiendrez une erreur si vous deviez écrire le code suivant.
Méthode incorrecte pour appeler l'exemple de changeComponent
UIController.changeComponent();
Le message d'erreur indiquera explicitement que changeComponent () n'est pas une fonction de la fonction UIController. C'est la beauté du modèle de module; les variables et fonctions créées dans la section privée ne seront jamais directement accessibles en dehors de la portée de cette fonction.
Bien que les variables privées ne soient pas directement accessibles, elles peuvent cependant être indirectement accédées (à partir de la section publique). Un point à retenir de l'exemple de contrôleur d'interface utilisateur ci-dessus est que la section publique du modèle de module est toujours marquée par la propriété return.
Dans les paramètres de la propriété return, nous pouvons désormais accéder indirectement à la fonction changeComponent. Nous pouvons maintenant utiliser la ligne de code suivante (avec le modèle de module ci-dessus) pour changer efficacement tout le texte h1 d'une page Web ciblée en «Texte de remplacement».
Méthode correcte pour appeler l'exemple de changeComponent
UIController.callChangeComponent();
Le modèle d'usine
Le modèle d'usine (également connu sous le nom de méthode d'usine) est un autre modèle de conception JavaScript populaire. Le modèle de module brille lorsque l'encapsulation des données est requise, et le modèle de fabrique est plus utile dans les cas où nous avons affaire à une collection d'objets différents qui sont similaires à certains égards.
Revenons à notre gestionnaire de tâches ci-dessus; si nous permettions à l'utilisateur d'attribuer un type à chaque tâche créée, nous pourrions créer cet aspect de l'application (assez efficacement) en utilisant le modèle d'usine
Utilisation du modèle d'usine pour attribuer un exemple de type de tâche
//Factory pattern function
const TaskFactory = function(){
this.createTask = function(name, type){
let task;
//check the type the user selected
if(type === 'urgent'){
task = new UrgentTask(name);
}else if(type === 'trivial'){
task = new TrivialTask(name);
}
//set the type selected in the if statement to the one received as a property
task.type = type;
//used to print the task and its type to the console
task.define = function(){
console.log(`${this.name} (${this.type}): ${this.priority}`)
}
return task
}
}Le code ci-dessus utilise la méthode de fabrique pour créer de nouvelles tâches, vérifier le type (urgent ou trivial) et attribuer la propriété appropriée avant d'imprimer la nouvelle tâche sur la console.
La fonction interne createTask, prépare le terrain pour que plusieurs tâches soient créées simultanément, mais avant d'essayer de créer de nouvelles tâches, nous devons inclure du code supplémentaire dans cette section du projet.
Dans le code ci-dessus, nous créons une nouvelle UrgentTask ou une nouvelle Trivialtask si une condition spécifique est remplie. Cependant, il n'y a aucune fonction ou classe avec ces noms dans notre projet – ce problème peut être facilement résolu en introduisant le code suivant dans notre projet.
Créer des types de tâches urgentes et triviales
//Create the urgent task type
const UrgentTask = function(name){
this.name = name;
this.priority = "as soon as possible"
}
//create the trivial task type
const TrivialTask = function(name){
this.name = name;
this.priority = "when you can"
}
En raison du code ci-dessus, nous pouvons désormais attribuer la propriété UrgentTask ou TrivialTask à chaque nouvelle tâche créée. L'étape suivante consiste maintenant à créer une nouvelle tâche, mais avant cela, nous devons créer une base de données pour stocker chaque nouvelle tâche au fur et à mesure de sa création.
Étant donné que la création d'une base de données est un article entier en soi, nous remplacerons une base de données par une structure de données (un tableau).
Création d'un exemple de tableau
//create an array to host the different task
const task = [];
Maintenant, nous pouvons enfin créer une nouvelle tâche.
Création de nouveaux exemples de tâches
//create two new tasks
const factory = new TaskFactory();
task.push(factory.createTask('Clean the house', 'urgent'));
task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial'));
Avec le code ci-dessus, vous pouvez maintenant créer deux nouvelles tâches à l'aide de la fonction TaskFactory que nous avons créée initialement. Lorsque nous créons chaque nouvelle tâche, les propriétés (nom et type) sont passées dans la fonction createTask, qui se trouve dans la fonction TaskFactory que nous avons créée à l'aide du modèle de fabrique.
Une fois que chaque tâche a parcouru la TaskFactory et que la propriété de type appropriée lui est affectée. Il est ensuite poussé dans le tableau de tâches que nous avons créé précédemment.
Notre seul dilemme maintenant est de savoir comment savons-nous que ces deux tâches ont été créées ou que notre modèle d'usine a fonctionné? Si nous avions utilisé une base de données, nous pourrions simplement vérifier la base de données pour voir si deux nouvelles tâches ont été créées.
Revenez à «Utilisation du modèle d'usine pour attribuer un exemple de type de tâche» ci-dessus, directement sous le commentaire «utilisé pour imprimer la tâche et son type sur la console», il y a une petite fonction «task.define» qui a été créée pour imprimez chaque tâche du tableau sur la console à l'aide de la méthode de tableau suivante.
//print each task to the console
task.forEach(function(task){
task.define();
});
Vous devriez voir la sortie suivante s'afficher dans votre console.
Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can
Vous pouvez désormais utiliser des modèles de conception dans vos projets JavaScript
À ce stade, vous devez comprendre les modèles de conception en JavaScript et comprendre comment les modèles de conception peuvent être utilisés pour créer du code réutilisable et faciliter la vie de tous les développeurs impliqués dans un projet.
Maintenant que vous savez comment fonctionnent deux modèles de conception JavaScript populaires, vous devriez être en mesure de les appliquer efficacement pour développer une application.
Crédit d'image: Alltechbuzz / Pixabay