Aujourd'hui, JavaScript joue un rôle énorme dans le développement de sites Web. Les développeurs front-end utilisent JavaScript pour créer des applications Web interactives. En conséquence, il y a eu une augmentation de la demande de développeurs JavaScript.
Certes, JavaScript a évolué au fil des années. ES6 a introduit de nombreuses nouvelles fonctionnalités dans le langage. L'un d'eux est un moyen de partager facilement des codes entre des fichiers JavaScript.
L'importation et l'exportation de fonctions pour JavaScript sont de nouvelles fonctionnalités qui feront de vous un meilleur développeur. Voici comment fonctionnent ces fonctionnalités.
Qu'est-ce qu'un module JavaScript ?
Un module JavaScript est un fichier JavaScript qui contient une collection de code que vous pouvez utiliser. Les modules sont généralement écrits dans des fichiers séparés et importés à l'aide de importer mot-clé. Cela permet d'économiser du temps et des efforts car vous pouvez le réutiliser plus tard.
Par exemple, si vous avez une fonction appelée
calculerSomme(), vous pouvez l'inclure dans un autre fichier et le rendre disponible n'importe où dans votre projet à l'aide de la exporter et importer JavaScript fonctionne sans problème.L'un des avantages de l'utilisation de modules est qu'il aide à garder votre code organisé. Cela rend également votre code plus facile à gérer et à déboguer.
Pour utiliser un fichier JavaScript comme module, vous devez créer un script dans votre document HTML avec un type="module".
<type de script="module" source="fileName.js"></script>
Il existe deux types de module :
- Modules ECMAScript: modules JavaScript standard et pris en charge par tous les principaux navigateurs.
- Modules CommonJS: sont plus anciens et ne sont pas largement pris en charge.
Nous nous concentrerons ici sur les modules ECMAScript. Si besoin, consultez notre introduction à Javascript pour revoir les bases.
Comment exporter des fonctions en JavaScript
En JavaScript, les fonctions sont des objets de première classe qui peuvent être passés comme arguments en plus d'être utilisés seuls. L'exportation de fonctions est un bon moyen de les transférer dans d'autres programmes. Il est également utilisé lorsque vous souhaitez créer des bibliothèques réutilisables.
L'exportation de fonctions en JavaScript se fait à l'aide de la exporter fonction. Le exporter function exporte une fonction donnée à utiliser par un autre fichier ou script. En exportant nos propres fonctions, nous pouvons les utiliser librement dans d'autres fichiers ou scripts sans nous soucier des problèmes de licence.
Il existe deux manières d'utiliser le exporter fonctionner efficacement. Nous allons les passer en revue avec des exemples de code.
Supposons que vous ayez un fichier getPersonalDetails.js qui a une fonction qui renvoie le nom complet d'un utilisateur après une entrée d'invite. La fonction ressemble à ceci :
fonctionobtenirNomComplet(nom et prénom){
nomcomplet = prompt('Quel est votre prénom');
console.log (nomcomplet);
}
- Vous pouvez exporter cette fonction en utilisant simplement le exporter mot clé suivi du nom de la fonction entre accolades. Il ressemble à ceci :
exporter {getFullName} ; - La deuxième méthode consiste à ajouter le exporter mot clé juste avant de déclarer la fonction.
exporterfonctionobtenirNomComplet (nom et prénom){...}
Vous pouvez exporter plusieurs fonctions en utilisant la première méthode. Cela se fait en incluant les noms des fonctions souhaitées entre accolades. Les fonctions sont séparées par une virgule.
Par exemple: Supposons que vous ayez trois fonctions dans notre getPersonalDetails.js déposer - getNomComplet(),getEmail(), getDob(). Vous pouvez exporter les fonctions en ajoutant la ligne de code suivante :
exporter {getFullName, getEmail, getDob};
Comment importer des fonctions en JavaScript
Pour utiliser un module, vous devez d'abord l'importer. Toute fonction peut être importée à l'aide d'une référence de chemin complet.
L'importation de fonctions est assez simple. JavaScript a une fonctionnalité intégrée pour importer vos propres fonctions à partir d'autres fichiers. Si vous souhaitez accéder à ces fonctions à partir d'autres modules, c'est une bonne idée d'inclure une déclaration de fonction pour chacun de vos utilitaires.
Une fonction à importer est déjà exportée dans son fichier d'origine.
Vous pouvez importer des fonctions à partir d'un autre fichier à l'aide de la importer fonctionnalité de mot-clé. Importer vous permet de choisir la partie d'un fichier ou d'un module à charger.
Voici comment vous importez notre obtenirNomComplet fonction de getPersonalDetails.js:
importer {getFullName} depuis './getPersonalDetails.js'Cela rendra cette fonction disponible pour une utilisation dans notre fichier actuel.
Afin d'importer plusieurs fonctions, les fonctions à importer sont incluses dans les accolades. Chacun est séparé par une virgule (,).
importer {getFullName, getEmail, getDob} depuis './getPersonalDetails.js'Il existe une autre façon d'utiliser le importer Fonctionnalité. Cela nous permet d'importer toutes les exportations dans un fichier particulier. Il se fait à l'aide du importer * comme syntaxe.
Vous pouvez importer toutes les exportations dans notre getPersonalDetails.js en ajoutant la ligne de code suivante :
importer * comme module de détails personnels depuis './getPersonalDetails.js'Ce qui précède créera un objet appelé module de détails personnels.
C'est juste un nom de variable, vous pouvez lui donner n'importe quel nom.
Cet objet contient toutes les exportations de notre getPersonalDetails.js. Les fonctions sont stockées dans cet objet et sont accessibles de la même manière que vous accédez à n'importe quelle propriété d'objet.
Par exemple, nous pouvons accéder à la obtenirNomComplet fonction en ajoutant la ligne de code suivante
module de détails personnels.getFullName();Qu'est-ce que l'exportation par défaut ?
Exporter par défaut est une fonctionnalité d'exportation exceptionnelle. Ceci est utilisé si une seule variable est exportée à partir d'un fichier. Il est également utilisé pour créer une valeur de repli pour un fichier ou un module.
Voici un exemple où nous avons utilisé le obtenirNomComplet fonctionnent par défaut :
exporterdéfautfonctionobtenirNomComplet (nom et prénom){...}Vous ne pouvez pas avoir plus d'une valeur par défaut dans chaque module ou fichier.
Une fonction utilisée par défaut est importée différemment. Voici comment importer notre obtenirNomComplet fonction utilisée par défaut :
importer nom et prénom depuis './getPersonalDetails.js'Voici les différences :
- Il n'y a pas d'accolades autour de la valeur importée, nom et prénom.
- nom et prénom voici juste un nom de variable. Il stocke la valeur de la fonction par défaut.
Boostez vos fonctions JavaScript
Les modules JavaScript sont des morceaux de code qui peuvent être réutilisés dans d'autres parties de votre code, en utilisant les fonctions JavaScript d'importation et d'exportation. Ils sont généralement écrits dans des fichiers séparés et importés à l'aide du mot-clé import. L'un des avantages de l'utilisation de modules est qu'il aide à garder votre code organisé. Cela rend également votre code plus facile à gérer et à déboguer.