[Nouveau] Rejoignez la communauté Angular.fr !

Skip to content

Les modules

Les modules en JavaScript sont un moyen d'encapsuler du code dans des unités distinctes et réutilisables. Introduits avec ES6 (ECMAScript 2015), les modules permettent de scinder le code JavaScript en plusieurs fichiers, facilitant ainsi la gestion, la maintenance et la réutilisation du code dans de grandes applications. Voici les concepts clés liés à l'utilisation des modules en JavaScript :

Exportation depuis un Module

Un module peut exporter des variables, des fonctions, des classes ou d'autres objets, les rendant ainsi accessibles à d'autres modules. Pour exporter, vous utilisez le mot-clé export.

javascript
// Dans un fichier mathUtils.js
export function additionner(x, y) {
    return x + y;
}

export const PI = 3.14159;

Vous pouvez également avoir une exportation par défaut, qui est l'exportation principale d'un module.

javascript
// Dans un fichier calculatrice.js
export default class Calculatrice {
    // ...
}

Importation dans un Module

Pour utiliser les éléments exportés par un autre module, vous utilisez le mot-clé import.

javascript
// Dans un autre fichier JavaScript
import { additionner, PI } from './mathUtils.js';
import Calculatrice from './calculatrice.js';

console.log(additionner(2, 3)); // 5
console.log(PI); // 3.14159

Avantages des Modules

  • Maintenabilité : Les modules aident à organiser le code en unités fonctionnelles, facilitant la maintenance et la compréhension du code.
  • Réutilisabilité : Le code encapsulé dans un module peut être réutilisé dans différents parties d'une application ou même dans différents projets.
  • Espace de Noms : Les modules aident à éviter la pollution de l'espace de noms global, réduisant ainsi le risque de conflits de noms.
  • Dépendances : Ils permettent de gérer clairement les dépendances entre les différentes parties d'une application.

Chargement des Modules

Les modules JavaScript peuvent être chargés dans les navigateurs ou sur des plateformes côté serveur comme Node.js. Dans les navigateurs, les modules sont chargés de manière asynchrone en utilisant l'attribut type="module" dans la balise <script>.

html
<script type="module" src="monScript.js"></script>

Dans Node.js, les modules ES6 sont également pris en charge, bien que la syntaxe et le mécanisme de gestion des modules puissent différer légèrement des modules en navigateur.

Conclusion

Les modules JavaScript fournissent un moyen puissant et flexible de construire des applications larges et bien organisées. Ils sont devenus un élément essentiel de l'écosystème JavaScript moderne, aussi bien pour le développement front-end que back-end.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !