Modules et classes JavaScript

Jour 9 : Modules et classes JavaScript

Date : 16 décembre 2024

Bienvenue au jour 9 ! Aujourd'hui, nous explorons les Modules et les Classes en JavaScript, deux concepts qui améliorent considérablement l'organisation, la réutilisabilité et la lisibilité du code. Comprendre ces sujets améliorera vos compétences JavaScript, vous permettant de structurer vos projets comme un développeur professionnel.

---

1. Modules JavaScript

Les modules vous permettent de diviser votre code en morceaux plus petits et réutilisables. Au lieu d'avoir un seul fichier volumineux, vous pouvez organiser les fonctionnalités en plusieurs fichiers, ce qui facilite la gestion et la maintenance de votre base de code.

Pourquoi utiliser des modules ?

1. Séparation des préoccupations : Chaque module gère une responsabilité spécifique.
2. Réutilisabilité : Le code d'un module peut être réutilisé dans un autre.
3. Maintenabilité : Plus facile à déboguer et à mettre à jour.

---

Exportation et importation dans des modules

Exporter depuis un module

Vous pouvez exporter des variables, des fonctions ou des classes à partir d'un module en utilisant l'exportation.

Exportation nommée

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

Exportation par défaut

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

Importer un module

Utilisez le mot-clé import pour importer des fonctionnalités d'un autre module.

Exemple : Importer des exportations nommées

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

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

Exemple : Importer une exportation par défaut

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

---

Importation dynamique

Les importations dynamiques chargent les modules au moment de l'exécution à l'aide de import().

Exemple : Chargement paresseux

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

---

2. Cours JavaScript

Les classes en JavaScript fournissent un modèle pour créer des objets et encapsuler les données et méthodes associées. Ils font partie d'ES6 et sont fondamentaux pour la programmation orientée objet en JavaScript.

Définir une classe

Une classe est définie à l'aide du mot-clé class.

Exemple : Cours de base

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const person1 = new Person("John", 30);
console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.

---

Héritage de classe

L'héritage permet à une classe de dériver des propriétés et des méthodes d'une autre classe à l'aide du mot-clé extends.

Exemple : Héritage

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

---

Méthodes statiques

Les méthodes statiques appartiennent à la classe elle-même, pas à l'instance.

Exemple : Méthode statique

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

---

Champs et méthodes privés

Les champs et méthodes privés ne sont accessibles qu'au sein de la classe et sont désignés par un préfixe #.

Exemple : Champ privé

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

---

Classe et littéraux d'objet

Alors que les littéraux d'objet sont rapides et simples pour les structures de données simples, les classes offrent :

• Un plan clair pour créer plusieurs objets similaires.
• Prise en charge de l'héritage et de l'encapsulation.

---

3. Combiner des modules et des cours

Les modules et les classes se complètent à merveille dans les applications JavaScript modernes. Vous pouvez définir une classe dans un module et l'utiliser dans un autre.

Exemple : Combiner des modules et des classes

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

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

---

4. Exemple concret : panier

Voici un exemple pratique combinant à la fois des modules et des cours.

Fichier : cart.js

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

Fichier : main.js

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

---

Points clés à retenir

1. Modules : Aidez à organiser votre code et favorisez la réutilisabilité.
2. Classes : fournissent une manière structurée de travailler avec des objets, offrant des fonctionnalités telles que l'héritage et l'encapsulation.
3. Utilisation combinée : utilisez des modules et des classes ensemble pour créer des applications évolutives et maintenables.

---

Tâches pratiques

1. Créez un module qui exporte des fonctions pour les opérations arithmétiques de base.
2. Écrivez une classe pour un système de bibliothèque avec des méthodes pour ajouter et lister des livres.
3. Combinez des modules et des classes pour simuler un panier d'achat de commerce électronique de base.

---

Quelle est la prochaine étape ?

Demain, le Jour 10, nous aborderons la Boucle d'événements et la programmation asynchrone, où vous apprendrez comment JavaScript gère la concurrence, les rappels, les promesses et la boucle d'événements. . Restez à l'écoute !

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!