Fonctionnement du modèle de module en JavaScript

Comment le modèle de conception de module peut-il aider les développeurs JavaScript ? Nous allons jeter un coup d’oeil.

En tant que développeurs, nous nous efforçons toujours d’écrire du code propre et lisible. Tout en résolvant de nombreux problèmes à l’aide de la technologie, écrire du code propre est un must pour chaque développeur car cela peut économiser des tonnes de ressources, de temps et d’argent à l’avenir.

Modèles de conception permettre aux développeurs de mieux communiquer en fournissant un moyen approprié de tester, d’implémenter et de maintenir le code. De nombreux modèles de conception peuvent être utilisés pour aider les développeurs écrire un meilleur code.

Pour chaque langage de programmation, il existe des modèles de conception qui ont été créés au fil des ans, basés sur l’expérience de nombreux développeurs. Les modèles de conception sont des solutions éprouvées, testées à plusieurs reprises, qui améliorent la communication et rendent le code réutilisable.

JavaScript a de nombreux modèles de conception qui peuvent être utilisés pour améliorer le code. Il existe trois catégories principales de modèles de conception : créationnels, structurels et comportementaux. Chaque catégorie a de nombreux modèles de conception différents qui peuvent être utilisés pour résoudre un problème spécifique.

Nous allons couvrir plus sur le modèle de module, ce qu’il fait et comment il peut être utilisé dans les applications JavaScript modernes pour augmenter la réutilisabilité et rendre le code propre.

Modèle de module

Rendre votre application réutilisable est le meilleur moyen de s’assurer qu’elle aura un code riche et bien écrit. Nous devons toujours nous assurer d’écrire le meilleur code possible et le modèle de module peut nous y aider.

JavaScript n’a pas de support intégré pour les modules, mais la communauté a créé des solutions de contournement impressionnantes. Les deux normes les plus populaires sont :

• Modules CommonJS: L’implémentation dominante de cette norme est dans Node.js (Node.js modules ont quelques fonctionnalités qui vont au-delà de CommonJS). Il a une syntaxe compacte, conçue pour le chargement synchrone et il est principalement utilisé côté serveur.
• DMLA: L’implémentation la plus populaire de cette norme est RequireJS. Il a une syntaxe légèrement plus compliquée, permet à AMD de fonctionner sans évaluation, est conçu pour le chargement asynchrone et est principalement utilisé côté client.

Le modèle de module est un modèle de conception utilisé pour améliorer la maintenabilité et la réutilisabilité du code en créant des niveaux d’accès publics et privés. Appelé quelques fois encapsulation, il protège la valeur à l’intérieur d’un module contre l’accès à partir d’autres portées.

Le modèle de module préserve la confidentialité de l’état et s’organise à l’aide de fermetures. Il protège les pièces de la portée globale, en évitant d’éventuelles erreurs et conflits.

Le modèle de module est assez similaire à un IIFE (expression fonctionnelle immédiatement invoquée), mais un module renvoie toujours un objet au lieu d’une fonction.

Il n’y a aucun moyen de définir si une fonction, une variable ou toute autre structure doit être globale ou privée en JavaScript. Nous n’avons pas de modificateurs d’accès (mots clés dans les langages orientés objet qui définissent l’accessibilité des classes, méthodes et autres membres) en JavaScript, et c’est pourquoi la portée est très importante.

En général, voici comment un modèle de module est défini :

(function() {
    


    return {
        
    }


})();

Remarqué que nous utilisons un IIFE et renvoyons un objet au lieu de toute autre valeur.

Nous pouvons également définir un module comme une fonction. Jetons un œil au code suivant :

const createSupplier = (function() {
  const name = "General Motors";
  const field = "automobile";


  return {
    name,
    field
  };
})();


createSupplier.name;
createSupplier.field;

Nous avons défini une fonction, en utilisant IIFE à l’intérieur, qui renvoie un objet. Nous renvoyons simplement un objet avec un nom et un champ. Nous pouvons accéder et transmettre chaque propriété de l’objet de réponse à une nouvelle variable.

Maintenant, imaginons que nous définissions une nouvelle variable dans notre fonction et que nous voulions qu’elle soit privée, cela signifie qu’il n’y a aucun moyen d’y accéder en dehors de la portée de la fonction.

const createSupplier =(function() {
  const name = "General Motors";
  const field = "automobile";


  return {
    name,
    field
  };
})();


createSupplier.name;
createSupplier.field;
createSupplier.year;

Le code en dehors de la portée de notre module ne peut pas accéder à la valeur de l’année. C’est ainsi que le modèle de module peut garder les valeurs privées.

Méthodes privées

Nous pouvons utiliser le modèle de module pour créer des méthodes privées. Comme nous le savons, nous n’avons pas de modificateurs d’accès en JavaScript, mais nous pouvons utiliser la puissance des fermetures pour créer des méthodes privées. Regardez le code suivant :

const createSupplier = (function () {
  const name = "General Motors";
  const field = "automobile";


  const getSupplierName = () => name;


  return {
    name,
    field,
    getName: () => getSupplierName(),
  };
})();


createSupplier.name;
createSupplier.field;
createSupplier.getName();

Comme nous ne renvoyons pas notre méthode privée, elle n’est pas disponible en dehors du module. Nous ne pouvons utiliser que la méthode publique, qui est la fonction publicGetName, pour renvoyer le nom. Cela nous donne la possibilité de créer une encapsulation dans notre code.

Modèle de module révélateur

Le modèle de module révélateur est une amélioration apportée au modèle de module où nous écrivons toute la logique de l’objet dans la portée privée du module et les parties publiques sont exposées en renvoyant un objet anonyme.

const createSupplier = (function () {
  
  const name = "General Motors";
  const field = "automobile";
  const getSupplierName = () => name;
  const getSupplierField = () => field;


  
  return {
    name,
    field,
    getName: () => getSupplierName(),
    getField: () => getSupplierField(),
  };
})();


createSupplier.name;
createSupplier.field;
createSupplier.getName();

Le modèle de module révélateur est beaucoup plus facile à utiliser et à modifier. Le but du modèle de module de révélation est de maintenir l’encapsulation et de révéler certaines variables et méthodes renvoyées dans un littéral d’objet.

Conclusion

Les développeurs interagissent et créent constamment des modèles de conception, même lorsqu’ils ne s’en rendent pas compte. Le modèle de module est encore une autre façon de déclarer et de créer du code réutilisable.

Les modules sont un élément important de toute application moderne. Ils nous aident à mieux organiser et structurer notre base de code. Lorsque nous écrivons du code, diviser notre code en petits modules gérables fait une différence dans la façon dont notre application va évoluer.