7 meilleurs modèles de conception JavaScript que vous devriez connaître
Découvrez les 7 meilleurs modèles de conception JavaScript qui vous aideront à écrire du code plus maintenable, réutilisable et évolutif. Ces modèles sont essentiels à connaître pour tout développeur JavaScript.
7 meilleurs modèles de conception JavaScript que vous devez connaître – Les modèles de conception en JavaScript sont des solutions réutilisables appliquées aux problèmes courants lors de l'écriture d'applications Web JavaScript.
Introduction
Il est tout à fait approprié de qualifier les modèles de conception JavaScript de modèles pour fournir des solutions aux problèmes, mais pas vraiment de dire que ces modèles peuvent remplacer les développeurs.
Les modèles de conception aident à combiner les expériences de nombreux développeurs pour structurer les codes de manière optimisée qui répondent aux problèmes auxquels nous recherchons des solutions, et fournissent un vocabulaire commun utilisé pour décrire les solutions à nos problèmes plutôt que pour décrire la syntaxe et la sémantique de notre code.
Les modèles de conception JavaScript aident les développeurs à écrire des codes organisés, beaux et bien structurés. Bien que les modèles de conception, lorsqu'ils sont utilisés, puissent être facilement réutilisés, ils ne peuvent jamais compléter les développeurs, mais plutôt les soutenir en évitant les problèmes mineurs qui pourraient entraîner des problèmes majeurs dans le développement d'applications Web en fournissant des solutions généralisées qui ne sont pas liées à un problème spécifique. problème.
Ils diminuent la base de code globale en supprimant les répétitions inutiles, rendant ainsi notre code plus robuste que les solutions ad hoc.
Dans cet article, j'explorerai sept modèles de conception JavaScript les meilleurs et les plus populaires, dont la plupart tomberont bien sûr dans trois catégories, à savoir : modèles de conception de création, modèles de conception structurelle et modèles de conception comportementale. Un motif ressemble à l’image suivante : juste pour vous familiariser avec le contexte.
1. Modèle de conception du constructeur.
Il s'agit d'une méthode spéciale utilisée pour initialiser les objets nouvellement créés une fois qu'une mémoire est allouée. Étant donné que JavaScript est généralement orienté objet, il traite principalement les objets. J'ai donc l'intention de me plonger dans les constructeurs d'objets. Il existe trois manières de créer de nouveaux objets en JavaScript :
Ce qui suit est une façon de créer un modèle de conception de constructeur.
// This creates a new empty Object
var newObject = {};
// This creates a new empty Object
var newObject = Object.create(Object.prototype);
var newObject = newObject();
Pour accéder aux propriétés d'une fonction, vous devez initialiser l'objet.
const object = new ConstructorObject();
Le new mot-clé ci-dessus indique à JavaScript que a constructorObjectdoit agir en tant que constructeur. L'héritage est une chose que ce modèle de conception ne prend pas en charge. En savoir plus
ici .
2. Modèle de prototype
Le modèle de prototype est basé sur un héritage prototypique dans lequel des objets sont créés pour servir de prototypes à d'autres objets. En réalité, les prototypes font office de modèle pour chaque constructeur d'objet créé.
Exemple
var myCat= {
name:"Ford Escort",
brake:function(){
console.log("Stop! I am applying brakes");
}
Panic : function (){
console.log ( "wait. how do you stop thuis thing?")
}
}
// use objec create to instansiate a new car
var yourCar= object.create(myCar);
//You can now see that one is a prototype of the other
console.log (yourCar.name);]
3. Modèle de conception de modules
Dans le modèle de conception du module, il y a une amélioration par rapport au modèle de prototype. Les différents types de modificateurs (privés et publics) sont définis dans le modèle de module. Vous pouvez créer des fonctions ou des propriétés similaires sans conflits. Il est possible de renommer publiquement les fonctions. Ce qui est intimidant, c'est l'incapacité de remplacer les fonctions créées à partir de l'environnement extérieur.
Exemple
function AnimalContainter () {
const container = [];
function addAnimal (name) {
container.push(name);
}
function getAllAnimals() {
return container;
}
function removeAnimal(name) {
const index = container.indexOf(name);
if(index < 1) {
throw new Error('Animal not found in container');
}
container.splice(index, 1)
}
return {
add: addAnimal,
get: getAllAnimals,
remove: removeAnimal
}
}
const container = AnimalContainter();
container.add('Hen');
container.add('Goat');
container.add('Sheep');
console.log(container.get()) //Array(3) ["Hen", "Goat", "Sheep"]
container.remove('Sheep')
console.log(container.get()); //Array(2) ["Hen", "Goat"]
4. Modèle singleton
C'est essentiel dans un scénario où une seule instance doit être créée, par exemple une connexion à une base de données. Il n'est possible de créer une instance que lorsque la connexion est fermée ou que vous vous assurez de fermer l'instance ouverte avant d'en ouvrir une nouvelle. Ce modèle est également appelé modèle strict. Un inconvénient associé à ce modèle est son expérience intimidante en matière de tests en raison de ses objets de dépendances cachés qui ne sont pas facilement identifiés pour les tests.
Exemple
function DatabaseConnection () {
let databaseInstance = null;
// tracks the number of instances created at a certain time
let count = 0;
function init() {
console.log(`Opening database #${count + 1}`);
//now perform operation
}
function createIntance() {
if(databaseInstance == null) {
databaseInstance = init();
}
return databaseInstance;
}
function closeIntance() {
console.log('closing database');
databaseInstance = null;
}
return {
open: createIntance,
close: closeIntance
}
}
const database = DatabseConnection();
database.open(); //Open database #1
database.open(); //Open database #1
database.open(); //Open database #1
database.close(); //close database
5. Modèle d'usine.
Il s'agit d'une création concernée par la création d'objets sans avoir besoin d'un constructeur. Il fournit une interface générique pour créer des objets, où l'on peut spécifier le type d'objets d'usine à créer. Par conséquent, nous spécifions uniquement l'objet et l'usine l'instancie et le renvoie pour que nous puissions l'utiliser. Il est judicieux d'utiliser le modèle d'usine lorsque la configuration du composant objet présente un niveau de complexité élevé et lorsque nous souhaitons créer facilement différentes instances d'objets en fonction de l'environnement dans lequel nous nous trouvons. Nous pouvons également utiliser le modèle d'usine lorsque nous travaillons avec de nombreux petits objets partageant les mêmes propriétés et lors de la composition d'objets nécessitant un découplage.
Exemple
// Dealer A
DealerA = {};
DealerA.title = function title() {
return "Dealer A";
};
DealerA.pay = function pay(amount) {
console.log(
`set up configuration using username: ${this.username} and password: ${
this.password
}`
);
return `Payment for service ${amount} is successful using ${this.title()}`;
};
//Dealer B
DealerB = {};
DealerB.title = function title() {
return "Dealer B";
};
DealerB.pay = function pay(amount) {
console.log(
`set up configuration using username: ${this.username}
and password: ${this.password}`
);
return `Payment for service ${amount} is successful using ${this.title()}`;
};
//@param {*} DealerOption
//@param {*} config
function DealerFactory(DealerOption, config = {}) {
const dealer = Object.create(dealerOption);
Object.assign(dealer, config);
return dealer;
}
const dealerFactory = DealerFactory(DealerA, {
username: "user",
password: "pass"
});
console.log(dealerFactory.title());
console.log(dealerFactory.pay(12));
const dealerFactory2 = DealerFactory(DealerB, {
username: "user2",
password: "pass2"
});
console.log(dealerFactory2.title());
console.log(dealerFactory2.pay(50));
6. Modèle d'observateur
Le modèle de conception d'observateur est pratique dans un endroit où les objets communiquent simultanément avec d'autres ensembles d'objets. Dans ce modèle d'observateur, il n'y a pas de poussée et d'attraction inutiles d'événements à travers les états, les modules impliqués ne font que modifier l'état actuel des données.
Exemple
function Observer() {
this.observerContainer = [];
}
Observer.prototype.subscribe = function (element) {
this.observerContainer.push(element);
}
// the following removes an element from the container
Observer.prototype.unsubscribe = function (element) {
const elementIndex = this.observerContainer.indexOf(element);
if (elementIndex > -1) {
this.observerContainer.splice(elementIndex, 1);
}
}
/**
* we notify elements added to the container by calling
* each subscribed components added to our container
*/
Observer.prototype.notifyAll = function (element) {
this.observerContainer.forEach(function (observerElement) {
observerElement(element);
});
}
7. Modèle de commande
Pour conclure, je dirais que le modèle de conception de commande met fin à mes 7 meilleures sommes de modèles de conception JavaScript. Le modèle de conception de commande encapsule l'invocation de méthode, les opérations ou les requêtes dans un seul objet afin que nous puissions transmettre les appels de méthode à notre discrétion. Le modèle de conception de commande nous donne la possibilité d'émettre des commandes à partir de tout ce qui exécute des commandes et délègue la responsabilité à différents objets. Ces commandes sont présentées dans run()et execute()au format.
(function(){
var carManager = {
//information requested
requestInfo: function( model, id ){
return "The information for " + model + " with ID " + id + " is foo bar";
},
// now purchase the car
buyVehicle: function( model, id ){
return "You have successfully purchased Item " + id + ", a " + model;
},
// now arrange a viewing
arrangeViewing: function( model, id ){
return "You have successfully booked a viewing of " + model + " ( " + id + " ) ";
}
};
})();
Conclusion
Il est avantageux pour les développeurs JavaScript d'utiliser des modèles de conception. Certains avantages majeurs de l’utilisation de modèles de conception incluent la maintenabilité du projet et suppriment également les travaux inutiles sur le cycle de développement. Même si les modèles de conception JavaScript peuvent apporter des solutions à des problèmes complexes, notamment un développement et une productivité rapides, il est inapproprié de conclure que ces modèles de conception peuvent remplacer les développeurs.
#javascript