Comment importer et exporter des fonctions en JavaScript

Aujourd’hui, JavaScript joue une fonction importante dans le développement de sites web. Les programmeurs frontaux utilisent JavaScript pour produire des applications Internet interactives. Pour cette raison, il y a eu une augmentation populaire pour les programmeurs JavaScript.

Certes, JavaScript a évolué au fil des ans. L’ES6 a introduit de nombreuses fonctionnalités inédites dans le langage. Parmi celles-ci, une méthode pour partager commodément les codes entre les données JavaScript.

L’importation et l’exportation de fonctions pour JavaScript sont de toutes nouvelles fonctionnalités qui feront certainement de vous un bien meilleur programmeur. Voici exactement comment ces fonctionnalités fonctionnent.

Qu’est-ce qu’un module JavaScript ?

Un composant JavaScript est un fichier JavaScript qui contient une collection de code que vous pouvez utiliser. Les modules sont généralement écrits dans des données séparées et également importés en faisant usage de l’option import phrase de recherche. Cela permet de conserver du temps et des efforts puisque vous pouvez les recycler ultérieurement.

Par exemple, si vous avez effectivement une fonction appelée calculateSum() , vous pouvez l’inclure dans une donnée supplémentaire et la rendre offerte n’importe où dans votre travail en utilisant la fonction export et import des fonctions JavaScript sans problème.

L’un des avantages de l’utilisation des composants est qu’elle aide à garder votre code organisé. Cela rend également votre code plus facile à travailler ainsi que plus simple à déboguer.

Afin d’utiliser une donnée JavaScript comme composant, vous devez créer un manuscrit dans votre document HTML avec une balise type= » component  » .

Il existe deux sortes de composants :

1. Les modules ECMAScript : composants JavaScript standard et sont supportés par tous les navigateurs web significatifs.
2. Les composants CommonJS : sont plus anciens, ainsi qu’ils ne sont pas largement soutenus.

Nous nous concentrerons ici sur les modules ECMAScript. Si nécessaire, consultez notre introduction à JavaScript pour revoir les bases.

Comment exporter des fonctions en JavaScript

En JavaScript, les fonctions sont des choses de première classe qui peuvent être passées comme arguments en plus d’être utilisées seules. L’exportation de fonctions est un bon moyen de les transférer directement dans divers autres programmes. Il est en outre utilisé lorsque vous avez l’intention de créer des bibliothèques à usage multiple.

L’exportation de fonctions en JavaScript se fait à l’aide de la fonction export de la fonction. Le site export exporte une fonction fournie pour être utilisée par une autre donnée ou un autre manuscrit. En exportant nos propres fonctions, nous pouvons facilement les utiliser dans divers autres documents ou scripts sans nous inquiéter des problèmes d’accréditation.

Il y a deux façons d’utiliser la fonction export avec succès. Nous allons les discuter avec des exemples de code.

Supposons que vous avez un fichier getPersonalDetails . js qui a une fonction qui renvoie le nom complet d’un utilisateur après une entrée opportune. La fonction se présente comme suit :

1. Vous pouvez exporter cette fonction en utilisant simplement l’option export mot-clé suivi du nom de la fonction entre accolades. Cela ressemble à ceci :

2. La 2e méthode consiste à inclure le mot-clé export juste avant d’énoncer la fonction.

Vous pouvez exporter plusieurs fonctionnalités en utilisant la première technique. Pour ce faire, il suffit de composer les noms des caractéristiques souhaitées dans l’accolade. Les caractéristiques sont séparées par une virgule.

Par exemple : Supposons que vous ayez trois caractéristiques dans notre getPersonalDetails . js fichier – getFullName(), getEmail() , getDob() . Vous pouvez exporter les caractéristiques en incluant la ligne de code suivante :

Comment importer des fonctions en JavaScript

Afin d’utiliser un module, vous devez d’abord l’importer. Tout type de fonction peut être importé en utilisant une référence de chemin complet.

L’importation de fonctions est assez simple. JavaScript a un attribut intégré pour importer vos propres fonctions à partir de divers autres fichiers. Si vous voulez accéder à ces fonctions à partir de divers autres modules, c’est une bonne idée d’inclure une affirmation de fonctionnalité pour chacun de vos utilitaires.

Une fonctionnalité à importer est actuellement exportée dans ses données initiales.

Vous pouvez importer des fonctionnalités à partir d’un fichier différent en utilisant la fonction import la capacité du mot-clé. Importation vous permet de choisir le composant d’un document ou d’un composant à lots.

Voici exactement comment vous importez notre getFullName fonction de getPersonalDetails . js :

Cela rendra certainement cette fonction facilement utilisable dans nos documents actuels.

Afin d’importer de nombreuses fonctions, les fonctions à importer sont composées dans les accolades dentaires. Chacune est divisée par une virgule (,).

Il existe une autre façon d’utiliser la fonction import fonctionnalité. Cela nous permet d’importer toutes les exportations dans un document particulier. Cela se fait en utilisant la fonction import * comme syntaxe.

Vous pouvez importer toutes les exportations dans notre getPersonalDetails . js en incluant la ligne de code suivante :

Ce qui précède va certainement créer un élément appelé personalDetailsModule.

C’est simplement un nom de variable, vous pouvez l’appeler n’importe quoi.

Cette chose se compose de toutes les exportations dans notre getPersonalDetails. js. Les fonctions sont conservés dans cet article et aussi peut être consulté la méthode que vous accédez à toute chose bâtiment.

Par exemple, nous pouvons accéder à la getFullName en incluant la ligne de code suivante

Qu’est-ce que l’exportation par défaut ?

L’exportation par défaut est une performance d’exportation remarquable. Elle est utilisée pour qu’une variable soit exportée d’une donnée. Il est également utilisé pour développer une valeur de repli pour une donnée ou un composant.

Ci-dessous, un exemple où nous avons fait usage de la performance d’exportation remarquable. getFullName comme une fonction par défaut :

Vous ne pouvez pas avoir plus d’une valeur comme défaut dans chaque composant ou documents.

Une fonction utilisée comme défaut est importée d’une manière différente. Voici comment importer notre getFullName fonction utilisée par défaut :

Voici les distinctions :

1. Il n’y a pas d’accolades autour de la valeur importée, fullName .
2. nom complet ici est juste un nom de variable. Il garde la valeur de ce que la caractéristique par défaut est.

Superchargez vos fonctions JavaScript

Les composants JavaScript sont des éléments de code qui peuvent être réutilisés dans d’autres composants de votre code, en faisant usage des fonctions JavaScript d’importation et aussi d’exportation. Ils sont généralement composés dans différentes données, et importés en utilisant la phrase de recherche import. L’un des avantages de l’utilisation de modules est qu’elle permet de conserver l’organisation de votre code. En outre, cela rend votre code plus facile à travailler et à déboguer.