Die Unterschiede zwischen „Standard xx exportieren' und „{xx als Standard exportieren}'

Die Grundlagen von JavaScript-Modulen

Module sind eigenständige Codeteile, die importiert und in anderen Modulen verwendet werden können. Sie helfen Entwicklern, den Code organisiert, wartbar und leicht verständlich zu halten.

Um mit Modulen arbeiten zu können, müssen Sie die Import- und Exportsyntax verstehen. Hier ist eine kurze Zusammenfassung:

• Importieren: Wird zum Importieren benannter Exporte oder Standardexporte aus anderen Modulen verwendet.

• Exportieren: Wird verwendet, um Werte, Funktionen oder Klassen aus einem Modul zu exportieren und sie für den Import anderer Module verfügbar zu machen.

Es gibt zwei Arten von Exporten:

• Benannte Exporte: Sie können mehrere benannte Exporte in einem Modul haben. Sie werden explizit unter Verwendung ihres Namens importiert.

• Standardexporte: Jedes Modul kann nur einen Standardexport haben. Sie werden ohne Angabe eines Namens importiert.

Das Verhalten von export { xxx as default }

In JavaScript sind Importe Live-Bindungen oder Referenzen und keine Werte. Das bedeutet, dass Sie beim Importieren einer Variablen aus einem anderen Modul einen Verweis auf diese Variable importieren und keine Kopie ihres Werts.

Betrachten Sie das folgende Beispiel:

// math.js
let value = 1;

setTimeout(() => {
  value = 888;
}, 500);

export { value as default };

// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value); // ?
}, 1000);

Erraten Sie in diesem Fall, welcher Wert gedruckt wird?

Die Antwort ist 888, nicht 1. Das liegt daran, dass Export Referenzen exportiert.

Das Verhalten des Exportstandards xxx

Die Export-Standardsyntax wird verwendet, um einen Standardwert aus einem Modul zu exportieren. Wenn Sie jedoch den Export-Standardwert verwenden, wird der aktuelle Wert exportiert und keine Live-Referenz.

// math.js
let value = 1;

setTimeout(() => {
  value = 888;
}, 500);

export default value;

// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value); // 1
}, 1000);

Wenn sich in diesem Fall die Wertvariable in math.js ändert, ändert sich die Wertvariable in app.js nicht. Dies liegt daran, dass der Wert den aktuellen Wert zum Zeitpunkt des Imports enthält und keine Live-Referenz.

Referenzdatentypen exportieren

Wie Sie sehen können, haben wir früher primitive Datentypen exportiert, aber was wäre, wenn wir Referenzdatentypen exportieren würden?

// math.js
const value = {
  current: 1,
};

setTimeout(() => {
  value.current = 888;
}, 500);

export default value;
// OR
// export { value as default };

// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value.current);
}, 1000);

Wie Sie sehen, gibt es beim Umgang mit Referenzdatentypen keinen Unterschied zwischen export default xxx und export { xxx as default }. Es versteht sich, dass es sich in JavaScript immer um Referenztypen handelt und beim Exportieren nicht tief kopiert wird.

Best Practices und Empfehlungen

Während sowohl „export default xxx“ als auch „export { xxx as default }“ zum Exportieren von Standardwerten verwendet werden können, unterscheidet sich ihr Verhalten in bestimmten Szenarien. Hier sind einige Empfehlungen, die Ihnen bei der Auswahl der richtigen Syntax helfen sollen:

• Verwenden Sie den Exportstandard xxx, wenn Sie einen Wert, z. B. eine Zeichenfolge oder eine Zahl, exportieren möchten und keine Live-Bindungen benötigen.

• Verwenden Sie export { xxx als Standard }, wenn Sie eine Live-Bindung benötigen, insbesondere wenn sich der exportierte Wert im Laufe der Zeit ändern kann (nicht empfohlen).

• Für Referenzdatentypen kann jede Syntax verwendet werden, da sie immer eine Referenz exportieren.

• Ein diesbezüglicher Vorschlag: Für die Lesbarkeit und Wartbarkeit des Codes wird empfohlen, benannte Exporte anstelle von Standardexporten zu verwenden. Hier ist der Grund dafür.

Abschluss

Die Unterschiede zwischen export default xxx und export { xxx as default } in JavaScript mögen subtil erscheinen, aber sie können sich auf das Verhalten Ihres Codes auswirken. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Wenn Sie meine Inhalte hilfreich finden, erwägen Sie bitte ein Abonnement. Ich versende täglich einen Newsletter mit den neuesten Updates zur Webentwicklung. Vielen Dank für Ihre Unterstützung!

Das obige ist der detaillierte Inhalt vonDie Unterschiede zwischen „Standard xx exportieren' und „{xx als Standard exportieren}'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!