Modules JavaScript (JavaScript Modules)

Salut HaWker ! Jeff Bruchado par ici.

C'est l'un des derniers articles de notre serie d'articles qui va couvrir notre voyage pour Apprendre la Programmation depuis Zero.

Les Modules sont comme les pieces de LEGO dans le monde de la programmation. Ils vous permettent de construire votre projet en le divisant en blocs plus petits, plus gerables et reutilisables.

Comprenons pourquoi les Modules sont si cools :

Organisation : Avec les modules, vous pouvez diviser votre code en fichiers plus petits et plus faciles a gerer. C'est comme avoir une boite a outils ou chaque outil a sa propre place.

Reutilisation : Vous avez cree un morceau de code ? Avec les modules, vous pouvez le reutiliser dans differentes parties de votre projet, ou meme dans d'autres projets, sans copier-coller.

Portee : Chaque module a sa propre portee. Cela signifie que les variables, fonctions, etc., a l'interieur d'un module ne perturbent pas l'espace global de votre projet.

Dependances : Les modules rendent claires les dependances de chaque partie de votre projet. Vous pouvez voir exactement ce dont chaque partie a besoin pour fonctionner.

Alors, comment fonctionnent les Modules en JavaScript ?

Exportation : Vous definissez ce que chaque module va fournir aux autres fichiers en utilisant export. Ca peut etre une fonction, une variable, une classe...
Importation : Quand vous avez besoin de quelque chose d'un autre module, vous utilisez import pour apporter ce qui a ete exporte.
Modularite : Avec export et import, vous pouvez creer un code bien modulaire, ou chaque partie a sa responsabilite bien definie.

Par exemple :

// Dans fichier.js
export function additionner(a, b) {
  return a + b;
}

// Dans autreFichier.js
import { additionner } from './fichier.js';

console.log(additionner(1, 2)); // 3

Dans cet exemple, la fonction additionner est exportee dans fichier.js et importee dans autreFichier.js.

Les Modules JavaScript sont comme les pieces d'un puzzle. Chaque piece a sa fonction et, quand elles sont unies, forment un projet complet et fonctionnel. Ils apportent clarte, efficacite et une structure super organisee a votre code. C'est comme avoir une equipe de super-heros, ou chacun a son super-pouvoir special, contribuant a sauver la journee (ou le projet !).

Ensuite, approfondissons ce concept.

Modules JavaScript

Les Modules JavaScript (comme je l'ai deja mentionne) sont basiquement une maniere d'organiser le code dans un projet, de sorte que chaque module possede sa propre responsabilite et peut etre reutilise dans d'autres parties du projet. Il existe deux principaux systemes de modules en JS :

CommonJS
ECMAScript Modules (ES Modules).

CommonJS

CommonJS a ete le premier systeme de modules a etre adopte par JavaScript. Il a ete cree pour etre utilise dans des environnements serveur, comme Node.js, et est base sur une syntaxe d'exportation et d'importation de modules.

Un exemple de comment fonctionne l'exportation d'un module CommonJS est le suivant :

// math.js
function add(x, y) {
  return x + y;
}

function subtract(x, y) {
  return x - y;
}

module.exports = {
  add: add,
  subtract: subtract,
};

Dans cet exemple, le module math.js possede deux fonctions : add et subtract. Nous utilisons l'objet module.exports pour exporter ces fonctions afin qu'elles puissent etre importees dans d'autres modules.

Pour importer un module CommonJS dans un autre fichier, nous utilisons le mot-cle require :

// main.js
const math = require('./math');

console.log(math.add(1, 2)); // 3
console.log(math.subtract(5, 3)); // 2

Exercice Pratique

Creez un module JavaScript qui exporte une fonction qui recoit deux nombres et retourne la somme de ces nombres. Le nom du fichier doit etre "somme.js" et doit utiliser le patron CommonJS pour exporter et importer le module.

Ensuite, creez un autre fichier appele "index.js" qui importe le module "somme.js" et utilise la fonction exportee pour additionner deux nombres quelconques.

Envoyez-moi votre solution en repondant a ce contenu.

ECMAScript Modules (ES Modules)

C'est le nouveau standard de modules en JavaScript, qui a ete adopte par ECMAScript. Il a ete cree pour etre utilise aussi bien dans des environnements serveur que cote client (navigateurs).

Le systeme de modules ES Modules est base sur deux mots-cles : export et import.

La syntaxe pour exporter un module ES Modules est similaire a celle de CommonJS, mais nous utilisons le mot-cle export au lieu de module.exports :

// math.js
export function add(x, y) {
  return x + y;
}

export function subtract(x, y) {
  return x - y;
}

Pour importer un module ES Modules dans un autre fichier, nous utilisons le mot-cle import :

// main.js
import { add, subtract } from './math';

console.log(add(1, 2)); // 3
console.log(subtract(5, 3)); // 2

Conclusion

En resume, les modules sont une forme d'organiser le code dans un projet et de garantir que chaque module ait sa propre responsabilite et puisse etre reutilise dans d'autres parties du projet.

Rappelez-vous ! Il existe deux principaux systemes de modules :

CommonJS et
ECMAScript Modules (ES Modules)

CommonJS a ete le premier systeme de modules a etre adopte par JavaScript et est utilise principalement dans des environnements serveur, comme Node.js.

Pour exporter un module CommonJS, nous utilisons l'objet module.exports, tandis que pour importer un module nous utilisons le mot-cle require.

ES Modules est le nouveau standard de modules, qui a ete adopte par ECMAScript. Il peut etre utilise aussi bien dans des environnements serveur que cote client (navigateurs). Pour exporter un module ES Modules, nous utilisons le mot-cle export, tandis que pour importer un module nous utilisons le mot-cle import.

Il est courant lorsque vous travaillez sur un projet ou un autre, de voir les Developpeurs utiliser l'un ou l'autre, donc il est important de connaitre la difference entre eux !

Dans les projets plus modernes, la plupart utilisent deja les ES Modules, tandis que dans les projets plus anciens, il est courant de voir l'utilisation de CommonJS.

Eh bien HaWker, nous arrivons a la fin d'un autre article. Et nous approchons de la fin de notre cours.

Comme toujours, si vous avez une question ou voulez explorer un point plus en detail, repondez simplement avec votre question, dans cet email.

Et rappelez-vous, je suis la pour vous aider a vous ameliorer de 1% a chaque nouvel article !

Si vous etes arrive jusqu'ici, comme d'habitude, s'il vous plait, repondez a cet email avec "J'ai reussi a comprendre les Modules JavaScript".

Ainsi je saurai que cette serie d'articles vous est utile, et que vous suivez et profitez.

Comme vous le savez deja ! Seul un veritable HaWker arrive jusqu'a la fin.

Felicitations !

Je suis content de vous avoir ici.

A bientot.

C'est parti !

- Jeff Bruchado

Felicitations d'etre arrive jusqu'ici, HaWker !

A ce moment ou vous avez appris les modules JavaScript, que diriez-vous de tester vos connaissances ? Participez au quiz ci-dessous et voyez combien vous avez absorbe de notre article.

C'est une excellente facon de consolider l'apprentissage et de vous preparer pour les prochaines etapes de votre voyage de programmation.

Appuyez pour acceder au quiz.

Bonne chance et amusez-vous !