In JavaScript sind Module eigenständige Codeeinheiten, die Assets durch Export anderen Modulen zugänglich machen und Assets aus anderen Modulen durch Import nutzen können. Dieser Mechanismus ist für die Erstellung modularen und wiederverwendbaren Codes in modernen JavaScript-Anwendungen unerlässlich.

Standardexporte

• Ein Modul kann nur einen Standardexport haben.
• Um ein Standard-Asset zu exportieren, verwenden Sie das Standardschlüsselwort vor der exportierten Entität.
• Um einen Standardexport zu importieren, können Sie ihn direkt einer Variablen zuweisen, ohne den exportierten Namen anzugeben:

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

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

Benannte Exporte

• Ein Modul kann mehrere benannte Exporte haben.
• Um ein benanntes Asset zu exportieren, verwenden Sie das Schlüsselwort export vor der exportierten Entität und geben Sie ihr einen Namen.
• Um benannte Exporte zu importieren, müssen Sie die Namen der Assets angeben, die Sie importieren möchten:

// 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';

Kombinieren von Standard- und benannten Exporten

Sie können sowohl einen Standardexport als auch benannte Exporte in einem einzigen Modul haben:

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

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

So importieren Sie sowohl den Standard- als auch den benannten Export:

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

Wichtige Punkte, die Sie sich merken sollten

• export wird verwendet, um Assets aus einem Modul verfügbar zu machen.
• import wird verwendet, um Assets aus anderen Modulen zu konsumieren.
• Ein Modul kann nur einen Standardexport haben.
• Benannte Exporte können einzeln oder gemeinsam importiert werden.
• Die für Importe verwendeten Namen sind willkürlich und müssen nicht mit den im exportierten Modul verwendeten Namen übereinstimmen.

Praxisbeispiel

Betrachten Sie eine React-Komponente:

import React from 'react';

export default function Greeting({ name }) {
  return 
Hello, {name}!
;
}

In diesem Beispiel wird die Begrüßungskomponente als Standardexport exportiert. Es kann importiert und in anderen Komponenten verwendet werden:

import Greeting from './Greeting';

function MyComponent() {
  return ;
}

Durch das Verständnis von Exporten und Importen können Sie Code in Ihren JavaScript-Projekten effektiv organisieren und wiederverwenden.