Comment utiliser l'importation et l'exportation dans JavaScript

JavaScript propose une fonctionnalité avancée nommée modules, en utilisant ces modules Nous pouvons utiliser n'importe quel objet, classe, littéral ou fonction d'un fichier javascript à tout autre fichier javascript. Il améliore la réutilisabilité du code et réduit le temps de chargement du fichier HTML. À cette fin, les modules JavaScript fournissent deux mots clés, "importer" et "exporter".

Implémentation de l'exportation en javascript

Un mot-clé "exporter" est requis chaque fois que nous exportons les données d'un fichier vers un autre fichier. En utilisant le mot-clé "exporter" Nous pouvons exporter quelque chose comme une variable, une fonction ou une classe vers tout autre fichier. Ce que nous devons faire, c'est simplement écrire le "exporter" mot-clé avant cette variable, fonction, classe ou tout ce que nous voulons exporter.

La syntaxe pour exporter une variable, une fonction et une classe est:

// exportant une variable
export var emp_name;
// exportant une fonction
fonction d'exportation emp ()

// exportant une classe
Employé de classe d'exportation

Maintenant, nous allons déterminer le fonctionnement du mot-clé «exportation» à l'aide de l'exemple suivant, disons que nous créons le fichier avec l'exportation de nom.JS:

Considérez l'exemple suivant qui détermine comment exporter une variable, une fonction ou une classe:

exporter let emp_name = "Mike Smith";
fonction d'exportation emp ()
console.Log ("Le nom de l'employé est Mike Smith");

Employé de classe d'exportation
Constructeur (EMP_NAME)

console.log ("bienvenue" + emp_name);

La syntaxe alternative pour l'exportation des éléments de fichier est:

Export emp_name, emp, employé;

En utilisant la syntaxe donnée ci-dessus, nous pouvons exporter tous les éléments du fichier dans une seule instruction, et pendant l'importation, nous utiliserons le même nom pour la variable, la fonction et la classe. Par exemple:

var emp_name = "Mike Smith";
fonction emp ()
console.Log ("Le nom de l'employé est Mike Smith");

Employé de classe
Constructeur (EMP_NAME)

console.log ("bienvenue" + emp_name);


export emp_name, emp, employé;

Une autre façon d'exporter est l'exportation par défaut, il est très utile pour exporter un seul élément:

var emp_name = "Mike Smith";
Exporter par défaut emp_name;

Cela aide à importer la variable dans une autre classe avec un autre nom.

Implémentation de l'importation dans JavaScript

En javascript, le mot-clé "importer" est utilisé chaque fois que nous importons quoi que ce soit à partir d'un fichier. Nous devons écrire le "importer" Mot-clé avant tout ce que nous voulons importer à partir d'un autre fichier.

La syntaxe de importer Une variable, une fonction et une classe est:

// Importation d'une variable
import emp_name de './nom de fichier'
// Importation d'une fonction
Import emp de './nom de fichier'
// Importation d'une classe
import employé de './nom de fichier'

Nous avons créé un autre fichier avec le nom «Importer.JS "et importé toutes les données du fichier" Exporter.js ”:

import emp_name de "./exporter.JS "
console.log (emp_name);
import emp de "./exporter.JS "
emp ();
import employé de "./exporter.JS "
Soit a = nouvel employé ("John");

Une variable, une fonction et une classe est importée du fichier "./exporter":

La sortie vérifiera que chaque élément présent dans le «./exporter.Le fichier JS "est importé dans l'importation.Fichier JS ":

EMP_NAME est variable, empiler est une fonction, et Employé est une classe créée dans le exporter.js déposer:

Import emp_name, EMP, employé de "./exporter.js ";
console.log (emp_name);
emp ();
Soit a = nouvel employé ("John");

Maintenant, ici, dans le code ci-dessus, nous importons tous les éléments dans une seule instruction:

Nous obtiendrons la sortie suivante:

Nous allons maintenant considérer un autre exemple pour comprendre comment importer un élément par défaut:

importer _name à partir de "./exporter.JS "
console.log (_name);

Nous importons un membre par défaut du fichier «Exporter.js "avec" _name ":

Dans le "exporter.JS " fichier La variable est créée avec le nom «EMP_NAME»:

Mais nous accédons la même variable avec "_nom" dans le "importer.JS " fichier et obtenir la sortie suivante:

Nous obtenons la même sortie, cela signifie que lors de l'importation défaut élément Il n'est pas nécessaire d'utiliser le même nom que dans le premier fichier, nous pouvons également utiliser des noms différents.

Conclusion

L'importation et l'exportation sont de nouvelles fonctionnalités introduites dans les modules de JavaScript pour améliorer la réutilisation du code. JavaScript fournit des mots clés d'importation et d'exportation pour utiliser le code d'un fichier vers d'autres fichiers. Dans cet article, nous déterminons comment travailler avec les fonctionnalités d'importation et d'exportation du module. Pour mieux comprendre le concept, nous considérons quelques exemples et les mettant en œuvre en javascript.

Après avoir étudié de manière approfondie cet article, quelqu'un peut analyser cela lors de l'utilisation importer et exporter caractéristiques du module Nous devons utiliser le même nom pour la variable, la fonction et la classe dans les deux fichiers (le fichier d'où vous exportez les données et le fichier dans lequel vous importez les données). Alors que "défaut" est un cas exceptionnel où il n'y a pas une telle exigence, vous pouvez utiliser n'importe quel nom de votre choix lors de l'importation.