Mon parcours React : jour 11

Ce que j'ai appris aujourd'hui
Les modules changent la donne en JavaScript. Ils nous permettent de diviser le code en morceaux plus petits et réutilisables, ce qui facilite la gestion, le débogage et l'optimisation de nos projets. Voici une répartition :

Que sont les modules ?

• Les modules permettent la réutilisabilité et l'organisation du code dans les fichiers.
• Avant les modules : le code JavaScript était écrit sur une seule page, ce qui entraînait des fichiers lourds et encombrés, difficiles à déboguer ou à maintenir.
• Avec modules : nous pouvons diviser le code en fichiers plus petits et gérables.

Concepts clés

1. Exporter et Importer

• Exporter : envoie un module afin qu'il puisse être utilisé ailleurs.
• Importer : apporte un module à partir d'un autre fichier à utiliser.

Syntaxe :

• Export/Import nommé : Exportez plusieurs éléments par nom. Vous devez importer en utilisant le même nom.

// Export
export const greet = () => console.log("Hello!");
export const add = (a, b) => a + b;

// Import
import { greet, add } from "./module.js";
greet(); // Output: Hello!
console.log(add(2, 3)); // Output: 5

• Exportation/Importation par défaut :

Exportez un seul élément par défaut. Vous pouvez le renommer lors de l'importation.

// Export
export default function greet() {
    console.log("Hello, default export!");
}

// Import
import hello from "./module.js";
hello(); // Output: Hello, default export!

Différence clé :

• Exportation nommée : le nom de l'importation doit correspondre.
• Exportation par défaut : le nom de l'importation peut être différent.

2.Alias ​​du module

• Pourquoi l'utiliser ? Lors de l'importation à partir de plusieurs fichiers portant les mêmes noms d'exportation, l'alias permet d'éviter les conflits.
• Syntaxe :

import { sum as add } from "./math.js";
console.log(add(2, 3)); // Output: 5

3.Importation d'espace de noms (*)

• Utilisez * pour tout importer d'un module en tant qu'objet unique.
• Syntaxe :

import * as math from "./math.js";
console.log(math.sum(2, 3)); // Output: 5
console.log(math.sub(5, 2)); // Output: 3

4.Combiner les exportations

• Fusionnez les exportations de plusieurs modules en un seul.

Étapes :

• Exportez les modules individuellement.
• Créez un nouveau fichier pour les combiner à l'aide de l'export *.
• Importez le fichier combiné dans votre projet. Exemple:

// Module 1: calc.js
export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;

// Module 2: identity.js
export const name = "JavaScript";

// Combine Modules
export * as calc from "./calc.js";
export * as identity from "./identity.js";

// Import Combined
import * as modules from "./combine.js";
console.log(modules.calc.add(5, 3)); // Output: 8
console.log(modules.identity.name); // Output: JavaScript

Avantages de l'utilisation de modules

1. Cleaner Code : le code est organisé en morceaux plus petits et gérables.
2. Réutilisabilité : les modules peuvent être réutilisés dans plusieurs projets ou fichiers.
3. Débogage amélioré : les erreurs sont plus faciles à tracer dans des fichiers plus petits.

Réflexion
J'aime apprendre comment les modules simplifient et améliorent le développement JavaScript. La combinaison des exportations, des importations, des alias et des espaces de noms rend la gestion des projets beaucoup plus efficace.

Nous continuons d'avancer et d'apprendre plus fort ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!