En JavaScript, les modules vous permettent de diviser votre code en morceaux plus petits et réutilisables, améliorant ainsi l'organisation, la maintenabilité et la lisibilité. Les modules sont essentiels pour créer des applications évolutives, en particulier lorsque la base de code s'agrandit. Avec l'introduction d'ES6 (ECMAScript 2015), JavaScript a acquis un système de modules natifs qui vous permet d'importer et d'exporter du code entre différents fichiers.
Un module est essentiellement un morceau de code stocké dans son propre fichier. Ce code peut définir des variables, des fonctions, des classes ou toute autre construction que vous souhaitez rendre disponible pour une utilisation dans d'autres parties de l'application.
Pour rendre les variables, fonctions ou classes d'un fichier disponibles dans un autre fichier, vous utilisez le mot-clé export. Il existe deux manières d'exporter depuis un module en JavaScript : les exportations nommées et les exportations par défaut.
Les exports nommés vous permettent d'exporter plusieurs éléments (variables, fonctions, etc.) depuis un module. Vous les exportez en précisant leurs noms.
// math.js (Module File) export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
Un export par défaut vous permet d'exporter une seule valeur, qui peut être une fonction, une classe ou un objet. L'export par défaut est généralement utilisé lorsque vous souhaitez exporter une fonctionnalité principale du module.
// math.js (Module File)
export default function multiply(a, b) {
return a * b;
}
Pour accéder aux valeurs exportées depuis un module dans un autre fichier, vous utilisez le mot-clé import. Il existe deux types d'imports : les imports nommés et les imports par défaut.
Lors de l'importation d'exportations nommées, vous devez utiliser le nom exact qui a été utilisé dans la déclaration d'exportation.
// app.js (Main File)
import { add, subtract } from './math.js';
console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 3)); // Output: 2
Lors de l'importation d'une exportation par défaut, vous pouvez choisir n'importe quel nom pour la valeur importée.
// app.js (Main File) import multiply from './math.js'; console.log(multiply(2, 3)); // Output: 6
Vous pouvez également combiner des importations nommées avec une importation par défaut du même module.
// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) {
return a * b;
}
// app.js
import multiply, { add } from './math.js';
console.log(multiply(2, 3)); // Output: 6
console.log(add(2, 3)); // Output: 5
Vous pouvez exporter et importer des classes de la même manière que les fonctions et les variables.
// math.js (Module File) export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
JavaScript prend également en charge les importations dynamiques, qui vous permettent de charger des modules de manière conditionnelle au moment de l'exécution. Cela peut être utile pour le fractionnement du code, où vous chargez des modules uniquement en cas de besoin, réduisant ainsi le temps de chargement initial.
// math.js (Module File)
export default function multiply(a, b) {
return a * b;
}
Dans les navigateurs modernes, vous pouvez utiliser les modules ES6 de manière native. Il vous suffit d'ajouter l'attribut type="module" à votre
Comment ouvrir des fichiers HTML sur un téléphone mobile
Windows ultime
Comment se connecter à la base de données dans SQLplus
Le Metaverse reconnaît les dix principales pièces potentielles
Supprimer le champ du tableau
méthode appelée par le spectateur
Quels sont les langages de programmation chinois ?
disposition absolue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
