Heim > Web-Frontend > js-Tutorial > Exporte und Importe in JavaScript verstehen

Exporte und Importe in JavaScript verstehen

Mary-Kate Olsen
Freigeben: 2024-11-03 05:51:30
Original
220 Leute haben es durchsucht

Understanding Exports and Imports in JavaScript

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

// Exporting a default asset

export default function greet(name) {

  console.log(`Hello, ${name}!`);

}

 

// Importing the default export

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

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

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage