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:
1 2 3 4 5 6 7 | export default function greet(name) {
console.log(`Hello, ${name}!`);
}
import greet from './myModule' ;
|
Nach dem Login kopieren
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:
1 2 3 4 5 6 7 8 9 10 11 | export function greet(name) {
console.log(`Hello, ${name}!`);
}
export function farewell(name) {
console.log(`Goodbye, ${name}!`);
}
import { greet, farewell } from './myModule' ;
|
Nach dem Login kopieren
Kombinieren von Standard- und benannten Exporten
Sie können sowohl einen Standardexport als auch benannte Exporte in einem einzigen Modul haben:
1 2 3 4 5 6 7 | export default function greet(name) {
console.log(`Hello, ${name}!`);
}
export function farewell(name) {
console.log(`Goodbye, ${name}!`);
}
|
Nach dem Login kopieren
So importieren Sie sowohl den Standard- als auch den benannten Export:
1 | import greet, { farewell } from './myModule' ;
|
Nach dem Login kopieren
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:
1 2 3 4 5 | import React from 'react' ;
export default function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
|
Nach dem Login kopieren
In diesem Beispiel wird die Begrüßungskomponente als Standardexport exportiert. Es kann importiert und in anderen Komponenten verwendet werden:
1 2 3 4 5 | import Greeting from './Greeting' ;
function MyComponent() {
return <Greeting name= "Alice" />;
}
|
Nach dem Login kopieren
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!