Comprendre les modules JavaScript et le système d'importation/exportation

Modules et Import/Export en JavaScript

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.

Comprendre les modules en JavaScript

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.

Exporter depuis un module

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.

1. Exportations nommées

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;

2. Exportations par défaut

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;
}

Importer un module

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.

1. Importations nommées

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

2. Importations par défaut

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

3. Combinaison des importations nommées et par défaut

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

Exportation et importation de classes

Vous pouvez exporter et importer des classes de la même manière que les fonctions et les variables.

Exemple : exportation et importation d'une classe

// math.js (Module File)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Importations dynamiques

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;
}

Modules dans le navigateur

Dans les navigateurs modernes, vous pouvez utiliser les modules ES6 de manière native. Il vous suffit d'ajouter l'attribut type="module" à votre

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript