Comprendre les exportations et les importations en JavaScript

En JavaScript, les modules sont des unités de code autonomes qui peuvent exposer des ressources à d'autres modules à l'aide de l'exportation et consommer des ressources d'autres modules à l'aide de l'importation. Ce mécanisme est essentiel pour créer du code modulaire et réutilisable dans les applications JavaScript modernes.

Exportations par défaut

• Un module ne peut avoir qu'un seul export par défaut.
• Pour exporter un actif par défaut, utilisez le mot-clé default avant l'entité exportée.
• Pour importer un export par défaut, vous pouvez l'attribuer directement à une variable sans préciser le nom de l'export :

// Exporting a default asset
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Importing the default export
import greet from './myModule';

Exportations nommées

• Un module peut avoir plusieurs exportations nommées.
• Pour exporter un actif nommé, utilisez le mot-clé export avant l'entité exportée et donnez-lui un nom.
• Pour importer des exports nommés, vous devez préciser les noms des actifs que vous souhaitez importer :

// Exporting named assets
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

// Importing named exports
import { greet, farewell } from './myModule';

Combinaison des exportations par défaut et nommées

Vous pouvez avoir à la fois une exportation par défaut et des exportations nommées dans un seul module :

export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

Pour importer à la fois les exportations par défaut et nommées :

import greet, { farewell } from './myModule';

Points clés à retenir

• l'exportation est utilisée pour exposer les actifs d'un module.
• l'importation est utilisée pour consommer des actifs d'autres modules.
• Un module ne peut avoir qu'un seul export par défaut.
• Les exportations nommées peuvent être importées individuellement ou collectivement.
• Les noms utilisés pour les importations sont arbitraires et ne doivent pas nécessairement correspondre aux noms utilisés dans le module exporté.

Exemple pratique

Envisagez un composant React :

import React from 'react';

export default function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Dans cet exemple, le composant Greeting est exporté comme exportation par défaut. Il peut être importé et utilisé dans d'autres composants :

import Greeting from './Greeting';

function MyComponent() {
  return <Greeting name="Alice" />;
}

En comprenant les exportations et les importations, vous pouvez organiser et réutiliser efficacement le code dans vos projets JavaScript.

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!