Les développeurs montrent une intention positive dans l’apprentissage des modèles de conception JavaScript. Les modèles de conception JS donnent à votre code source une conception pour le rendre efficace et maintenu.

Modèles de conception javascript

Aperçu

Un grand nombre de programmeurs JavaScript ne sont pas clairs sur les modèles de conception JavaScript et cet écart doit être comblé. Dans cette série de tutoriels JavaScript, nous écrivons cet article de blog qui couvrira les modèles de conception JavaScript les plus utilisés tels que le modèle de conception du module, le modèle d’observateur, etc. De plus, nous essaierons de démontrer l’utilisation d’exemples de code afin qu’il ne reste plus d’ambiguïté dans votre esprit. Ce sujet est très important si vous poursuivez une carrière en JavaScript. Par conséquent, restez connecté tout au long de cet article, et à la fin de cet article de blog, vous devriez avoir une forte compréhension des modèles de conception JS. Les points suivants doivent être couverts dans ce guide pour débutant JavaScript:

Que sont les modèles de conception JavaScript?

Les modèles de conception JavaScript sont des solutions sous la forme de modèles qui fournissent des solutions efficaces aux problèmes courants qui se produisent à plusieurs reprises dans la rédaction du code source. En mots plus simples, les modèles de conception sont des styles / commandes prédéfinis pour écrire le code Javasciprt gérable et gérable. Dans les petites organisations, la plupart des développeurs ne prêtent pas attention aux modèles de conception, mais cela devient un sujet critique lorsque vous créez des logiciels commerciaux à grande échelle. Fondamentalement, il existe un certain nombre de développeurs travaillant pour des logiciels de niveau d’entreprise qui ont leur propre style d’écriture de code. Par conséquent, vous optez pour un modèle de conception pour éviter les problèmes de répétition, créer des blocs de code réutilisables et accélérer le développement d’applications.

Modèle de conception du module

C’est le modèle de conception le plus courant et le plus incontournable pour lesquels les développeurs optent. Selon ce modèle de conception, les blocs de code d’application sont placés séparément les uns des autres sous forme de modules. Ce modèle de conception JavaScript fournit l’isolement et l’encapsulation. De plus, vous pouvez faire des fonctions et des attributs publics / privés auxquels vous ne pouvez pas accéder à l’extérieur du module. Surtout, les modules du modèle de conception modulaire renvoient toujours un objet. Vous pouvez utiliser ce modèle de conception au cas où vous construisez une application commerciale riche en entreprise de niveau d’entreprise. Ainsi, vous pouvez créer un module séparé pour chaque fonctionnalité pour apporter l’indépendance. L’extrait de code suivant montre le modèle de conception modulaire:

const student = (function () {
  // Private
  let name = "mustafa";
  let program = "computer science";
  const getStudentName = () => name;
  const getStudentProgram = () => program;

  // Public
  return {
    name,
    program,
    getName: () => getStudentName(),
    getStudentProgram: () => getStudentProgram(),
  };
})();

student.name;
student.program;
student.getStudentProgram();

Modèle d’usine javascript

Selon ce modèle de conception, vous créez des objets à l’aide d’une interface plutôt que d’appeler le constructeur avec le nouveau opérateur****. En fait, nous spécifions un type d’objet et l’usine crée une instance et nous renvoie pour une utilisation. De plus, ce modèle de conception JavaScript donne un contrôle complet sur la création d’objets. De plus, vous pouvez choisir ce modèle de conception pour gérer des objets simples et complexes et il est également sage d’utiliser le modèle d’usine pour le découplage. Écrivons un extrait de code pour une exploration plus approfondie.

// sandwich.js
const Sandwich = function({name }) {
  this.name = name || "";
};
module.exports = Sandwich;

// burger.js
const Burger = function({name }) {
    this.name = name || "";
};
module.exports = Burger;

// gadFoodFactory.js
const Sandwich = require("./sandwich");
const Burger = require("./burger");
const food = { Burger, Sandwich };
module.exports = {
    createFood(type, attributes) {
        const GadFoodType = food[type];
        return new GadFoodType(attributes);
    }
};

// index.js
const gadFoodFactory = require("./gadFoodFactory");
const mySandwich = gadFoodFactory.createFood("Sandwich", {
    name: "Chicken"
});
const myBurger = gadFoodFactory.createFood("Burger", {
    name: "Grilled",
});
console.log(mySandwich);
console.log(myBurger);

Singleton motif javascript

Ce modèle de conception est très populaire qui restreint l’instanciation d’une classe à un seul objet. Le service dans le framework JavaScript Angular suit ce modèle où il ne crée qu’une seule instance du service et cet objet est accessible à tous les modules. De plus, tout le client connecté à l’objet unique partage les mêmes ressources et niveaux d’accès. La démonstration du modèle singleton est la suivante:

let singletonPattern = new (function () {

  let name = "mustafa";

  this.printName = function() {
      console.log(name);
  }
})();

singletonPattern.printName();

// output: mustafa

Modèle d’observateur javascript

Le modèle d’observateur est très utile pour créer des applications commerciales évolutives. Un mécanisme de notification est impliqué dans ce modèle de code. Chaque fois qu’il y a un changement, il déclenche un événement qui informe d’autres abonnements dépendants. Ainsi, ce modèle diffuse le dernier état vers d’autres objets à travers les modules. En fait, il s’agit d’informer automatiquement la modification des abonnés. Les exemples de code suivants suivent le modèle d’observateur:

function ObserverFunc() {
this.observerArray = [];
}

ObserverFunc.prototype.subscribe = function (ele) {
this.observerArray.push(ele);
}

ObserverFunc.prototype.unsubscribe = function (element) {
const elementIndex = this.observerArray.indexOf(element);
if (elementIndex > -1) {
this.observerArray.splice(elementIndex, 1);
}
}

ObserverFunc.prototype.notifyAll = function (element) {
this.observerArray.forEach(function (observerElement) {
observerElement(element);
});
}

Conclusion

C’est tout pour les modèles de conception JavaScript* . Nous espérons que vous avez apprécié ce tutoriel JavaScript*et appris les concepts des modèles de conception. Nous avons couvert les modèles de code les plus couramment utilisés tels que les modèles de conception de modules, les singleton, l’observateur et les modèles de conception d’usine. Cet article vous donnera une image claire avec l’aide des extraits de code. De plus, il existe d’autres articles de blog très pertinents que vous pouvez trouver dans la section «voir aussi» ci-dessous.

Connecte-toi avec nous

Enfin, contenerize.com est dans un processus cohérent d’écriture de publications JavaScript sur de nouveaux sujets. Vous pouvez rester dans la boucle en nous suivant sur nos plateformes de médias sociaux, notamment Facebook, LinkedIn et Twitter.

Poser une question

Vous pouvez nous informer de vos questions ou questions sur notre Forum.

FAQS

Quels sont les modèles de conception les plus populaires en javascript? Les motifs du module, de l’observateur, de l’usine et du singleton sont largement utilisés dans la programmation JavaScript. Veuillez suivre ce lien pour explorer davantage.

Voir également