Module JavaScript

Modules (Modules)

Les modules JavaScript permettent de décomposer le code en fichiers séparés.

Ce qui rend la maintenance de la bibliothèque de code plus facile.

Les modules sont utilisés import les instructions d'importation à partir de fichiers externes.

Les modules dépendent également de l'élément <script> pour type="module".

Exemple

<script type="module">
import message from "./message.js";
</script>

Essayez-le vous-même

Export

AvecFonctionsouVariablesLes modules peuvent être stockés dans n'importe quel fichier externe.

Il y a deux types d'exports :Exportation nomméeetExportation par défaut.

Exportation nommée (Named Exports)

Créons un fichier nommé person.js et y ajoutons le contenu que nous voulons exporter.

Vous pouvez créer des exports nommés de deux manières. Soit en créant individuellement en ligne, soit en créant tous en une seule fois à la fin du fichier.

Création en ligne directe individuelle :

person.js

export const name = "Bill";
export const age = 19;

Création en une seule fois à la fin du fichier :

person.js

const name = "Bill";
const age = 19;
export {name, age};

Exportation par défaut (Default Exports)

Créons un autre fichier nommé message.js et l'utilisons pour illustrer l'export par défaut.

Il ne peut y avoir qu'un seul export par défaut dans un fichier.

Exemple

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + 'years old.';
;
export default message;

Importation

Vous pouvez importer des modules dans un fichier de deux manières, en fonction de ce qu'ils sont : exports nommés ou exports par défaut.

Les exports nommés sont construits avec des accolades. Les exports par défaut ne le sont pas.

Importation depuis des exports nommés

Importation depuis le fichier person.js des exports nommés :

import { name, age } from "./person.js";

Essayez-le vous-même

Importation depuis l'export par défaut

Importation depuis le fichier message.js duexport par défaut :

import message from "./message.js";

Essayez-le vous-même

Attention

Les modules ne sont compatibles qu'avec les protocoles HTTP(s).

Les pages ouvertes via le protocole file:// ne peuvent pas utiliser l'import/export.