Modules en JavaScript

Articles

Cet article explique les modules en JavaScript.

YouTube Video

Modules en JavaScript

Les modules en JavaScript permettent d’organiser le code et de le diviser en composants réutilisables. En utilisant des modules, la lisibilité et la maintenabilité du code sont améliorées, et les mêmes fonctionnalités peuvent être réutilisées dans d'autres projets. Nous expliquons ici divers systèmes de modules, depuis le concept de modules jusqu’à des exemples d’utilisation concrets.

Le concept des modules en JavaScript

JavaScript ne disposait initialement pas d’un système modulaire. Cependant, à mesure que les applications devenaient plus grandes, la modularisation est devenue essentielle pour diviser le code en unités plus petites et réutilisables. Un module est un morceau de code ayant une fonction spécifique, qui peut être géré indépendamment d’autres codes, ce qui permet de le diviser en plusieurs fichiers.

Principaux types de modules

Il existe plusieurs systèmes de modules en JavaScript. Les plus courants sont les modules ES (ESM) et CommonJS.

Les modules ES sont un système de modules introduit dans ECMAScript 2015 (ES6), qui définit les modules à l'aide des mots-clés import et export. Ce système est largement utilisé aussi bien côté client (navigateurs) que côté serveur (Node.js).
CommonJS est un système de modules principalement utilisé dans Node.js. Les modules sont définis en utilisant require et module.exports pour importer et exporter des fichiers.

Détails des modules ES (ESM)

Les modules ES sont le système modulaire standard en JavaScript, permettant un échange facile de fonctionnalités entre modules. Dans les navigateurs et Node.js, ce système est utilisé pour définir et importer des modules.

`export` et `import`

export est un mot-clé permettant d’exposer des fonctionnalités d’un module vers l’extérieur. import est utilisé pour incorporer des fonctionnalités définies dans d’autres modules.

Exemple : Exportation de module

Les modules peuvent être exportés dans les ES Modules comme suit :.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

Dans ce module math.mjs, les fonctions add et subtract sont exportées. Ces fonctions peuvent être importées depuis d'autres modules.

Ici, .mjs est une extension de fichier qui indique explicitement un fichier JavaScript au format ES Modules. Dans Node.js, l'extension du fichier détermine s'il s'agit de CommonJS ou de ES Modules. Cependant, si type: "module" est spécifié dans package.json, les fichiers avec l'extension .js sont traités comme des ES Modules par défaut.

Exemple : Importation de module

Les modules peuvent être importés dans les ES Modules comme suit :.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

De cette manière, en utilisant import, vous pouvez facilement utiliser des fonctions définies dans d'autres fichiers.

Exportation par défaut et exportations nommées

Il existe deux méthodes d'exportation pour les modules. L'une est l'exportation nommée, et l'autre est l'exportation par défaut.

Les exportations nommées sont utilisées pour exporter plusieurs fonctions ou variables d'un module. Vous pouvez effectuer plusieurs exportations et, lors de l'importation, vous les recevez avec les noms spécifiés.

1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15

L'exportation par défaut est utilisée pour exporter une seule fonction ou classe d'un module. Lors de l'importation, elle peut être reçue sous n'importe quel nom.

1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}

1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

Une seule exportation par défaut est possible, mais les exportations nommées peuvent exporter plusieurs éléments simultanément.

Exemple d'utilisation côté client (navigateur).

Exemple : Exportation de module

Les modules peuvent être exportés dans les ES Modules comme suit :.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

Dans ce module utils.js, les fonctions sum et multiply sont exportées.

Exemple : Importation de module

Les modules peuvent être importés côté client comme suit :.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>

En définissant l'attribut type de la balise <script> sur module, la syntaxe des modules ES comme import et export peut être utilisée dans le HTML.
La déclaration import charge le fichier externe utils.js et affiche le résultat.

Détails de CommonJS

CommonJS est un système de modules principalement utilisé dans Node.js. Les modules sont exportés et importés à l'aide de module.exports et require.

`require` et `module.exports`

Dans CommonJS, module.exports est utilisé pour exporter des modules. De plus, require est utilisé pour utiliser des modules provenant d'autres fichiers.

Exemple : Exportation de module

Les modules peuvent être exportés dans CommonJS comme suit :.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};

Exemple : Importation de module

Les modules peuvent être importés dans CommonJS comme suit :.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

Dans Node.js, CommonJS est le système de modules par défaut, mais les modules ES sont également pris en charge.

Importation dynamique

En JavaScript, les modules peuvent être importés dynamiquement à l'aide de import(). Cette méthode utilise le traitement asynchrone pour charger les modules lorsque cela est nécessaire.

Les importations dynamiques peuvent être effectuées comme suit :.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

L'importation dynamique est un moyen d'améliorer les performances des applications. Puisque vous pouvez charger les modules selon les besoins au lieu de tout charger au départ, cela améliore la vitesse d'affichage de la page.

Avantages des modules

Réutilisabilité du code
- Le code modularisé peut être réutilisé dans d'autres projets. En créant des modules avec des fonctionnalités communes et en les utilisant dans plusieurs applications, l'efficacité du développement est considérablement améliorée.
Amélioration de la maintenabilité
- En divisant le code en modules, il est plus facile de modifier des fonctionnalités ou des parties spécifiques. Gérer le code en petites unités rend plus facile la localisation et la correction des bugs.
Éviter les collisions de noms
- Définir de nombreuses variables et fonctions dans l'espace global peut entraîner des collisions de noms, mais la modularisation prévient ce problème et permet de maintenir une base de code plus propre.
Gestion des dépendances
- L'utilisation de modules permet de gérer explicitement les dépendances d'une application. Il devient clair quel module dépend d'autres modules, ce qui rend la structure du code plus facile à comprendre.

Résumé

Le système de modules de JavaScript est un moyen puissant d'organiser le code et de le diviser en composants réutilisables. En comprenant les différences entre les ES Modules et CommonJS et en choisissant le système de modules approprié en fonction du projet, vous pouvez améliorer la lisibilité et la maintenabilité du code. De plus, en utilisant les imports dynamiques, vous pouvez optimiser les performances de l'application.

Profitons du système de modules pour créer des applications JavaScript plus évolutives et efficaces.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Fonctionnalités supplémentaires des classes en JavaScript Gestion des erreurs en JavaScript

Modules en JavaScript

YouTube Video

Modules en JavaScript

Le concept des modules en JavaScript

Principaux types de modules

Détails des modules ES (ESM)

export et import

Exemple : Exportation de module

Exemple : Importation de module

Exportation par défaut et exportations nommées

Exemple d'utilisation côté client (navigateur).

Exemple : Exportation de module

Exemple : Importation de module

Détails de CommonJS

require et module.exports

Exemple : Exportation de module

Exemple : Importation de module

Importation dynamique

Avantages des modules

Résumé

YouTube Video

`export` et `import`

`require` et `module.exports`