Exporte und Importe in JavaScript verstehen

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 beachten sollten

• Export wird verwendet, um Assets aus einem Modul verfügbar zu machen.
• Import wird verwendet, um Assets aus anderen Modulen zu verbrauchen.
• Ein Modul kann nur einen Standardexport haben.
• Benannte Exporte können einzeln oder kollektiv 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 <h1>Hello, {name}!</h1>;
}

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 <Greeting name="Alice" />;
}

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

Das obige ist der detaillierte Inhalt vonExporte und Importe in JavaScript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!