Instructions de modules, d'importation et d'exportation dans JavaScript | Expliqué avec des exemples

Les modules sont utilisés en JavaScript pour implémenter le concept de modularité qui est, à la base, le processus de division d'une solution en composants plus petits, compacts et plus significatifs. En JavaScript, la modularité est réalisée en utilisant des exportations et des mots clés. Lorsque JavaScript est utilisé comme un script modulaire avec une page Web HTML, le mot-clé "module"Est ajouté comme le type de la balise de script

Pourquoi utiliser des modules

Évitez de répéter les mots. «Avec le passage du temps, les applications Web sont passées de très petits programmes à de grands programmes complexes pour accomplir des tâches compliquées. Pour créer des applications Web plus grandes / complexes, ES6 JavaScript est venu avec la capacité de diviser les scripts en composants plus petits et gérables avec l'utilisation du fonctionnalité d'exportation et le fonction d'importation.

Configuration d'une page HTML

Allez dans votre éditeur de texte préféré et créez une page HTML, mettez simplement les lignes de code suivantes à l'intérieur de la balise corporelle:

Les modules JS ont expliqué

Au lieu de manipuler les éléments HTML sur une page Web, nous allons afficher et vérifier la sortie à l'aide de la console. Par conséquent, nous ne nécessitons pas d'éléments sophistiqués sur notre page Web HTML.

Exécutez le fichier et vous verrez la sortie suivante:

Configuration des fichiers de script

Maintenant, tout en restant dans le même répertoire où se trouve votre fichier HTML, créez deux ".js»Fichiers comme:

• Mointcrit.JS: Ce fichier sera lié à la page Web HTML.
• compscript.JS: Ce fichier contiendra certaines fonctions de composant.

Juste comme ça:

Maintenant, dans votre HTML, liez le Mescript.js en utilisant la commande suivante:

Comme vous pouvez le voir, contrairement aux balises de script normales, nous passons non seulement le lien source, mais aussi le type qui est défini sur «module», Pour informer le navigateur que ce script est sous forme modulaire.

Ajout de la fonction dans le fichier composant

Maintenant, pour afficher la modularité, vous allez créer certaines variables / fonctions dans le fichier de script composant "compscript.js»Et exportez-les à l'intérieur du Mointcrit.js.

À l'intérieur de compscript.js Créez la fonction suivante qui imprimera 5 numéros:

fonction printNumbers (num)
pour (soit i = num; i <= num+5 ; i++)
console.journal (i);

Votre fichier de script de composant ressemblera à ceci:

Fonctionnalités d'exportation et d'importation

Maintenant pour accéder à cette fonction à l'intérieur du Mointcrit.js Fichier Vous devez exporter cette fonction à partir de la compscript.fichier js. Vous pouvez le faire en mettant l'exportation de mots clés derrière la fonction comme ceci:

Maintenant, pour l'utiliser à l'intérieur du Mescript.js, nous devons attraper ça exporter en utilisant le importer fonction. Vous pouvez le faire en utilisant la syntaxe suivante:

Importer Function-Name à partir de "Scriptsoruce.JS;

Dans notre cas, cette ligne changerait:

import printnumbers de "./ compscript.js ";

Maintenant, pour utiliser cette fonction dans notre fichier de script principal, vous pouvez simplement appeler la fonction comme nous appelons n'importe quelle autre fonction dans JavaScript:

Printnumbers (5);

Le Mointcrit.js ressemblera à ceci:

Enregistrez le fichier et actualisez le HTML et dirigez-vous vers la console du développeur et vous verrez la sortie suivante:

Et si vous faites une attention particulière à la sortie à l'intérieur de la console, vous verrez:

Même si vous avez lié le script mians.js Avec la page HTML, notre composant a été exécuté avec succès. Par conséquent, vous pouvez dire que vous avez mis en œuvre avec succès le concept de modularité composée.

Mais attendez, il y a plus!

Imaginez que vous exportez plusieurs fonctions comme:

fonction d'exportation printnumbers (num)
pour (soit i = num; i <= num + 5; i++)
console.journal (i);


Fonction d'exportation namePrinter ()
console.Log ("John Doe")

Exportation const Age = 22;
fonction d'exportation printjob ()
console.log ('auditeur');

Écrire le mot-clé exporter Avec chaque élément que vous souhaitez exporter n'est pas une bonne approche, ce que vous pouvez faire est, c'est à la fin du fichier, écrivez une commande de ligne, qui exportera les fonctions et les variables que vous souhaitez.

Vous faites cela en écrivant la ligne suivante:

export printNumbers, namePrinter, age, printJob;

Ton compscript.js ressemblera à ceci:

De même, pour importer toutes les fonctions et variables avec le mot-clé d'exportation à partir d'un fichier, vous pouvez utiliser le symbole astérisque «*» comme indiqué ci-dessous:

Importer * en tant que comp de "./ compscript.js ";

Le symbole d'astérisque "*" signifie que vous souhaitez importer toutes les exportations du fichier sous le nom "se comporter",

Pour utiliser la fonction et les variables que nous venons d'importer, utilisez le dot avec le nom de la fonction / variable:

se comporter.NamePrinter ();

Si vous deviez utiliser toutes les exportations du compscript.js fichier, alors vous utiliserez le code suivant:

Importer * en tant que comp de "./ compscript.js ";
se comporter.NamePrinter ();
console.journal ("L'âge est:" + comp.âge);
se comporter.printJob ();
se comporter.Printnumbers (2);

Puis votre Mointcrit.js ressemblera à ceci:

Enregistrez les fichiers et actualisez la page Web et vous verrez la sortie à l'intérieur de la console comme

Comme vous pouvez le voir, nous avons réussi à utiliser chaque exportation du compscript.js à l'intérieur de notre Mointcrit.js déposer.

Conclusion

Les modules nous aident à diviser nos applications Web en parties plus petites, concises et gérables; La modularité en javascript est réalisée en divisant le script en différents composants et en utilisant le importer et exporter caractéristiques Option introduite dans ES6. Pour démontrer cela, nous avons configuré une page HTML de base, créé deux fichiers de script différents et donné certaines fonctionnalités dans le fichier du composant. Ensuite, nous les avons utilisés dans notre fichier de script principal. Nous avons également appris différentes façons d'exporter plusieurs fonctionnalités et d'importer toutes les fonctionnalités à la fois.