Aller au contenu principal

Les modules

Modules JavaScript et syntaxe d'import/export

Partie théorique​

En JavaScript, un module est un fichier contenant du code JavaScript, qui est isolé des autres modules.

info

Chaque module a sa propre portée, c'est-à-dire que les variables, les fonctions, etc., déclarées dans un module ne sont pas visibles en dehors de ce module, sauf si elles sont exportées.

  • Pour permettre d'utiliser les variables ou les fonctions d'un module dans un autre module, nous devons les exporter à l'aide du mot-clé export.

  • De même, pour utiliser ces variables ou fonctions exportées dans un autre module, nous devons les importer à l'aide du mot-clé import.

Exemple pratique​

Supposons que nous ayons un module nommé math.js qui contient 2 fonctions : add et multiply.

// math.js
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}
Bonne pratique - Export nomme vs export par defaut

Preferer les exports nommes (export function foo) pour les modules avec plusieurs exports. Utiliser export default pour les modules avec un seul export principal.

Nous pouvons utiliser ces fonctions dans un autre module en les important.

// app.js
import { add, multiply } from './math.js';

console.log(add(2, 3)); // Affiche 5
console.log(multiply(2, 3)); // Affiche 6

Test de mémorisation/compréhension​


Que fait le mot-clé 'export' en JavaScript ?


Que fait le mot-clé 'import' en JavaScript ?


TP pour réfléchir et résoudre des problèmes​

Créez deux modules : calculatrice.js et app.js.

  • Le module calculatrice.js doit exporter quatre fonctions : add, subtract, multiply et divide.
  • Le module app.js doit importer ces fonctions et les utiliser pour effectuer quelques calculs. 
    console.log(add(10, 5)); // Affiche 15
    console.log(subtract(10, 5)); // Affiche 5
    console.log(multiply(10, 5)); // Affiche 50
    console.log(divide(10, 5)); // Affiche 2
Bonne pratique - Organisation en modules

Regrouper les fonctions liees dans un meme module et exporter uniquement ce qui est utile aux autres fichiers.

Une solution