Une introduction aux systèmes de modules en JavaScript

L'idée des modules provient de la norme des programmes modulaires. Ce paradigme recommande que les logiciels doivent être constitués de différents éléments interchangeables appelés "composants" en décomposant les fonctionnalités du programme en données autonomes qui peuvent fonctionner individuellement ou par paires dans une application.

Un module est une donnée autonome qui enveloppe le code pour exécuter une fonctionnalité particulière ainsi que pour annoncer la réutilisabilité et l'entreprise.

Ici, vous couvrirez certainement les systèmes de modules utilisés dans les applications JavaScript, constitués du pattern module, du système de composants CommonJS utilisé dans la plupart des applications Node.js, et également du système de modules ES6.

Le modèle de module

Avant l'intro des composants JavaScript indigènes, le pattern de mise en page module était utilisé comme système de module pour scope les variables et aussi les fonctions à un fichier.

Ceci était exécuté en utilisant des expressions de fonctions immédiatement invoquées, populairement appelées IIFEs. Une IIFE est une fonctionnalité non réutilisable qui s'exécute dès qu'elle est développée.

Voici le cadre fondamental d'une IIFE :

Le bloc de code ci-dessus définit des IIFEs utilisés dans 3 contextes différents.

Les IIFE ont été utilisés en raison du fait que les variables proclamées à l'intérieur d'une fonction sont scopées à la fonction, ce qui fait qu'elles ne peuvent être obtenues qu'à l'intérieur de la fonction, ainsi que parce que les fonctions permettent de retourner des informations (ce qui les rend ouvertement disponibles).

Par exemple :

Le bloc de code ci-dessus est un exemple de la manière exacte dont les modules étaient produits avant l'introduction des modules JavaScript natifs.

Le bloc de code ci-dessus comprend un IIFE. Le IIFE comprend une fonction qu'il rend disponible en la retournant. Toutes les variables proclamées dans l'IIFE sont protégées de l'étendue mondiale. Par conséquent, la méthode (sayName ) est juste facilement accessible par la fonction grand public, callSayName .

Remarquez que le IIFE est enregistré dans une variable, foo . En effet, sans une variable indiquant sa zone en mémoire, les variables seront inaccessibles après l'exécution du manuscrit. Ce schéma est possible grâce aux fermetures JavaScript.

Le système de modules de CommonJS

Le système de composants CommonJS est une disposition de composants spécifiée par le groupe CommonJS pour résoudre les problèmes de portée de JavaScript en implémentant chaque module dans son espace de nom.

Voir aussi :  Comment configurer votre propre site Web en 2 heures ou moins

Les fonctions du système de modules CommonJS forcent les composants à exporter clairement les variables qu'ils veulent révéler à divers autres modules.

Ce système de module a été développé pour le JavaScript côté serveur (Node.js) ainsi que, donc, n'est pas soutenu par défaut dans les navigateurs.

Pour appliquer les composants CommonJS dans votre tâche, vous devez très d'abord initialiser NPM dans votre application en exécutant :

Les variables exportées en adhérant au système de modules CommonJS peuvent être importées comme suit :

Les modules sont importés dans CommonJS à l'aide de la balise require qui vérifie une donnée JavaScript, exécute les données lues, ainsi que renvoie la déclaration de l'utilisateur. exporte objet. Le site exports est constitué de toutes les exportations facilement disponibles dans le composant.

Vous pouvez exporter une variable en respectant le système de modules de CommonJS en utilisant soit les exports appelés, soit les exports par défaut.

Exportations nommées

Les exportations nommées sont des exportations déterminées par les noms qu'elles ont été nommées. Les exportations nommées permettent plusieurs exportations par composant, contrairement aux exportations par défaut.

Par exemple :

Dans le bloc de code ci-dessus, vous exportez 2 fonctionnalités appelées (monExport et aussi un autreExport ) en les connectant à l'interface exportations choses.

De même, vous pouvez exporter les caractéristiques comme suit :

Dans le bloc de code ci-dessus, vous avez établi le exports vers les fonctionnalités nommées. Vous pouvez simplement assigner l'objet exports défier un nouvel élément avec l'option module choses.

Votre code lancerait une erreur si vous essayiez de le faire de cette manière :

Il y a deux façons d'importer appelées exportations :

1. Importer toutes les exportations comme une seule chose ainsi que d'accéder à eux individuellement en utilisant. la notation par points .

Par exemple :

2. Dé-structurez les exportations de la exportations objet.

Par exemple :

Une chose est commune à toutes les approches d'importation, ils doivent être importés en utilisant exactement les mêmes noms que ceux avec lesquels ils ont été exportés.

Voir aussi :  Comment créer et effectuer des opérations sur des tableaux en Java

Exportations par défaut

Une exportation par défaut est une exportation déterminée par n'importe quel type de nom de votre choix. Vous ne pouvez avoir qu'une seule exportation par défaut par composant.

Par exemple :

Dans le bloc de code ci-dessus, vous exportez un cours (Foo ) en réaffectant le cours exports le défier.

L'importation des exportations par défaut est similaire à l'importation des exportations appelées, sauf que vous pouvez utiliser n'importe quel type de nom de votre option pour les importer.

Par exemple :

Dans le bloc de code ci-dessus, l'exportation par défaut a été nommée. Barre , bien que vous puissiez utiliser n'importe quel nom de votre choix.

Le système de modules ES6

Le système de composants ECMAScript Harmony, largement appelé modules ES6, est le principal système de composants JavaScript.

Les modules ES 6 sont soutenus par les navigateurs et les serveurs, bien que vous appeliez à un peu de configuration avant de les utiliser.

Dans les navigateurs, vous devez définir le type comme module dans la balise d'importation du manuscrit.

Comme ça :

Dans Node.js, vous devez définir les paramètres suivants type à module dans votre paquet. json données.

Comme ça :

Vous pouvez également exporter des variables en utilisant le système de modules ES6 en utilisant soit des exportations nommées, soit des exportations par défaut.

Exportations nommées

Similaires aux importations appelées dans les modules CommonJS, elles sont identifiées par les noms qui leur ont été désignés et permettent également plusieurs exportations par module.

Par exemple :

Dans le système de composants ES6, les exportations appelées sont exportées en préfixant la variable avec la balise export mots clés.

Les exportations nommées peuvent être importées dans un autre composant dans ES6 de manière similaire à CommonJS :

  • La déstructuration des exportations nécessaires à partir des exports article.
  • Importation de toutes les exportations en tant qu'objet unique et également accès à celles-ci individuellement en faisant usage des symboles de points.

Voici un exemple de déstructuration :

Voici un exemple d'importation de l'ensemble des choses :

Dans le bloc de code ci-dessus, l'astérisque ( * ) suggère "tous". Le site comme désigne la phrase de recherche exporte conteste la chaîne de caractères qui la suit, dans cette situation, foo .

Voir aussi :  Comment mettre en pause l'exécution d'un programme Node.js ?

Exportations par défaut

Similaire aux exportations par défaut dans CommonJS, ils sont déterminés par n'importe quel nom de votre choix, et aussi vous pouvez juste avoir une exportation par défaut par composant.

Par exemple :

Les exportations par défaut sont créées en ajoutant l'élément par défaut après le mot-clé export mots-clés, auxquels adhère le nom de l'exportation.

L'importation des exportations par défaut est similaire à l'importation des exportations nommées, si ce n'est que vous pouvez utiliser tout type de nom de votre option pour les importer.

Par exemple :

Exportations mixtes

Le module ES6 de base vous permet d'avoir à la fois des exportations par défaut ainsi que des exportations nommées dans un module, contrairement à CommonJS.

Par exemple :

Importance des modules

Le fait de diviser votre code en modules facilite non seulement sa vérification, mais aussi son utilisation multiple et sa maintenance. Les modules en JavaScript rendent de même votre code moins sujet aux erreurs, car tous les modules sont exécutés en mode strict par défaut.

Commentaire

Qu'est-ce que le système de modules en JavaScript ?

Un module n'est rien de plus qu'un morceau de code JavaScript écrit dans un fichier. Les variables, les fonctions d'un module ne sont pas utilisables à moins que le fichier du module ne les exporte.

Quand les modules ont-ils été introduits dans JavaScript ?

Modules improvisés Jusqu'en 2015, le langage JavaScript n'avait pas de système de module intégré. Pourtant, les gens construisaient de grands systèmes en JavaScript depuis plus d'une décennie, et ils avaient besoin de modules. Ils ont donc conçu leurs propres systèmes de modules en plus du langage.

Quels sont les deux types d'exportations de modules en JavaScript ?

Chaque module peut avoir deux types d'exportation différents, nommés exportation et exportation par défaut.

Qu'est-ce que le système de modules dans le nœud JS ?

Dans Node. js, les modules sont les blocs de code encapsulé qui communiquent avec une application externe sur la base de leurs fonctionnalités associées. Les modules peuvent être un fichier unique ou une collection de plusieurs fichiers/dossiers.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.