Modules JavaScript

Qu'est-ce que les modules ?

Les modules sont des blocs de code qui peuvent exporter et/ou importer des fonctions et des valeurs.

// Exporter une fonction "add"
export function add(a, b) {
return a + b;
}
// Importer une fonction "add"
import { add } from './math.js';
let result = add(2, 3);

Les modules vous permettent de diviser le code en fichiers séparés .

Les modules sont une fonctionnalité fondamentale dans JavaScript moderne .

Fichiers de module

Un module JavaScript est généralement un fichier , mais il peut aussi être un script HTML .

Un fichier de module est un fichier .js utilisant import / export.

Un script de module est un script HTML utilisant import / export.

Comment utiliser les modules

Les modules utilisent export et import pour échanger des fonctionnalités entre eux.

Un script HTML utilisant type="module" est traité comme un module :

Fichier de module "math.js" :

// Exporter une fonction "add"
export function add(a, b) {
return a + b;
}

Script de module :

<script type="module">

// Importer la fonction add
import { add } from './math.js';

let result = add(2, 3);

</script>
Essayez-le vous-même »

Remarque

Les fichiers de module doivent être stockés sur un serveur .

Les modules ne fonctionnent qu'avec le protocole HTTP(s) .

Une page web ouverte via le protocole file:// ne peut pas utiliser import / export.

Fichier de module "person.js"

// Exporter le nom et l'âge
export const name = "Jesse";
export const age = 40;

Script de module

<script type="module">

// Importer le nom et l'âge
import { name, age } from "./person.js";

</script>

Essayez-le vous-même »

Les modules peuvent exporter

  • Variables
  • Fonctions
  • Objets
  • Classes

Fichier de module "message.js"

const message = () => {
const name = "Jesse";
const age = 40;
return name + ' a ' + age + ' ans.';
};

export default message;

Script de module :

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

Essayez-le vous-même »

Remarque

Les modules fonctionnent en mode strict par défaut.

Pourquoi les modules ?

  • Les modules aident à organiser le code .

    Ils vous permettent de décomposer de grandes bases de code en petits fichiers autonomes, chacun axé sur une tâche spécifique. Les modules sont essentiels pour les applications grandes et complexes.

  • Les modules empêchent les conflits de noms .

    Avant les modules, les développeurs n'avaient que le scope global, ce qui pouvait entraîner une "pollution de l'espace de noms" où du code non lié pouvait accidentellement écraser d'autres variables globales. Les modules ont un scope privé. Les variables et les fonctions ne sont pas exposées globalement, sauf si elles sont explicitement exportées.

  • Les modules ont une meilleure lisibilité .

    Ils améliorent l'organisation du code, facilitant la navigation, la compréhension et la gestion, surtout dans des projets plus importants ou des environnements d'équipe.

  • Les modules sont facilement réutilisables dans différentes parties d'une application et dans des projets entièrement nouveaux.

    Ils favorisent la réutilisabilité en permettant l'exportation de fonctions, de variables ou d'objets d'un fichier et leur importation dans d'autres fichiers ou projets. Cela élimine le code redondant et favorise un processus de développement plus efficace.

    Un module peut être facilement réutilisé dans différentes parties d'un projet ou dans des projets entièrement nouveaux, ce qui favorise le principe "Ne vous répétez pas" (DRY), réduisant la duplication de code et économisant du temps.

  • Les modules sont plus faciles à maintenir et à déboguer .

    En divisant le code en modules distincts, les modifications ou corrections de bogues dans une partie de l'application peuvent être isolées à un module spécifique, minimisant l'impact sur d'autres parties du système. Cela rend la base de code plus facile à maintenir et à faire évoluer à mesure que le projet grandit.

    Les modules permettent à plusieurs développeurs de travailler simultanément sur différentes parties de la base de code avec moins de risques de conflits. Des frontières de module claires améliorent la communication et facilitent l'ajout de nouvelles fonctionnalités avec un impact minimal sur le code existant.

  • Les modules ont une meilleure encapsulation et isolation .

    Les variables et les fonctions définies dans un module sont privées par défaut, ne devenant accessibles à d'autres modules que lorsqu'elles sont explicitement exportées. Cela améliore l'isolation du code, réduit le risque d'effets secondaires indésirables et rend le code plus facile à comprendre.

  • Les modules ont une meilleure gestion des dépendances .

    Ils utilisent des instructions d'importation et d'exportation explicites pour gérer les dépendances. Cela facilite la compréhension des relations entre les différentes parties de l'application et la gestion des bibliothèques ou composants externes.

    Les modules sont beaucoup plus fiables que l'ancien processus manuel garantissant que les scripts étaient chargés dans le bon ordre.