Modules JavaScript

Dans ce didacticiel, vous découvrirez les modules en JavaScript à l'aide d'exemples.

Au fur et à mesure que notre programme grossit, il peut contenir de nombreuses lignes de code. Au lieu de tout mettre dans un seul fichier, vous pouvez utiliser des modules pour séparer les codes dans des fichiers séparés selon leurs fonctionnalités. Cela rend notre code organisé et plus facile à maintenir.

Le module est un fichier qui contient du code pour effectuer une tâche spécifique. Un module peut contenir des variables, des fonctions, des classes etc. Voyons un exemple,

Supposons qu'un fichier nommé greet.js contienne le code suivant:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Maintenant, pour utiliser le code de greet.js dans un autre fichier, vous pouvez utiliser le code suivant:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Ici,

• La greetPerson()fonction dans le fichier greet.js est exportée à l'aide du exportmot - clé

   export function greetPerson(name) (… )

• Ensuite, nous avons importé greetPerson()dans un autre fichier en utilisant le importmot - clé. Pour importer des fonctions, des objets, etc., vous devez les envelopper ( ).

   import ( greet ) from '/.greet.js';

Remarque : vous ne pouvez accéder qu'aux fonctions, objets, etc. exportés depuis le module. Vous devez utiliser le exportmot - clé de la fonction, des objets, etc. particuliers pour les importer et les utiliser dans d'autres fichiers.

Exporter plusieurs objets

Il est également possible d'exporter plusieurs objets à partir d'un module. Par exemple,

Dans le fichier module.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

Dans le fichier principal,

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Ici,

 import ( name, sum ) from './module.js';

Cela importe à la fois la variable de nom et la sum()fonction à partir du fichier module.js .

Renommer les importations et les exportations

Si les objets (variables, fonctions, etc.) que vous souhaitez importer sont déjà présents dans votre fichier principal, le programme peut ne pas se comporter comme vous le souhaitez. Dans ce cas, le programme prend la valeur du fichier principal au lieu du fichier importé.

Pour éviter les conflits de dénomination, vous pouvez renommer ces fonctions, objets, etc. lors de l'exportation ou lors de l'importation.

1. Renommer dans le module (fichier d'exportation)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Ici, lors de l'exportation de la fonction à partir du fichier module.js , de nouveaux noms (ici, newName1 & newName2) sont attribués à la fonction. Par conséquent, lors de l'importation de cette fonction, le nouveau nom est utilisé pour référencer cette fonction.

2. Renommer dans le fichier d'importation

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Ici, lors de l'importation de la fonction, les nouveaux noms (ici, newName1 & newName2) sont utilisés pour le nom de la fonction. Vous utilisez maintenant les nouveaux noms pour référencer ces fonctions.

Exportation par défaut

Vous pouvez également effectuer l'exportation par défaut du module. Par exemple,

Dans le fichier greet.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Ensuite, lors de l'importation, vous pouvez utiliser:

 import random_name from './greet.js';

Lors de l’exportation par défaut,

• random_name est importé depuis greet.js. Puisque, random_namen'est pas dans greet.js, l'exportation par défaut ( greet()dans ce cas) est exportée en tant que random_name.
• Vous pouvez utiliser directement l'exportation par défaut sans inclure les accolades ().

Remarque : un fichier peut contenir plusieurs exportations. Cependant, vous ne pouvez avoir qu'une seule exportation par défaut dans un fichier.

Les modules utilisent toujours le mode strict

Par défaut, les modules sont en mode strict. Par exemple,

 // in greet.js function greet() ( // strict by default ) export greet();

Avantage d'utiliser le module

• La base de code est plus facile à maintenir car différents codes ayant des fonctionnalités différentes se trouvent dans des fichiers différents.
• Rend le code réutilisable. Vous pouvez définir un module et l'utiliser plusieurs fois selon vos besoins.

L'utilisation de l'importation / exportation peut ne pas être prise en charge dans certains navigateurs. Pour en savoir plus, visitez le support d'importation / exportation JavaScript.