Les différences entre \"export default xx\" et \"export {xx par défaut}\"

Les bases des modules JavaScript

Les modules sont des morceaux de code autonomes qui peuvent être importés et utilisés dans d'autres modules. Ils aident les développeurs à garder le code organisé, maintenable et facile à comprendre.

Pour travailler avec des modules, vous devez comprendre la syntaxe d'importation et d'exportation. Voici un bref récapitulatif :

• importer : utilisé pour importer des exportations nommées ou des exportations par défaut à partir d'autres modules.

• export : utilisé pour exporter des valeurs, des fonctions ou des classes à partir d'un module, les rendant disponibles pour que d'autres modules puissent les importer.

Il existe deux types d'exports :

• Exportations nommées : Vous pouvez avoir plusieurs exportations nommées dans un module. Ils sont explicitement importés en utilisant leurs noms.

• Exports par défaut : Chaque module ne peut avoir qu'un seul export par défaut. Ils sont importés sans préciser de nom.

Le comportement de l'exportation { xxx par défaut }

En JavaScript, les importations sont des liaisons dynamiques, ou des références, plutôt que des valeurs. Cela signifie que lorsque vous importez une variable depuis un autre module, vous importez une référence à cette variable, pas une copie de sa valeur.

Considérons l'exemple suivant :

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

Dans ce cas, devinez quelle valeur est imprimée ?

La réponse est 888 et non 1. C'est parce que l'exportation exporte des références.

Le comportement de l'exportation par défaut xxx

La syntaxe d'exportation par défaut est utilisée pour exporter une valeur par défaut depuis un module. Cependant, lorsque vous utilisez la valeur par défaut d'exportation, la valeur actuelle est exportée et non une référence en direct.

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

Dans ce cas, lorsque la variable de valeur dans math.js change, la variable de valeur dans app.js ne change pas. En effet, value contient la valeur actuelle au moment de l'importation, et non une référence en direct.

Exporter les types de données de référence

Comme vous pouvez le voir, nous avons exporté des types de données primitifs plus tôt, mais que se passerait-il si nous exportions des types de données de référence ?

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

Comme vous pouvez le voir, il n'y a aucune différence entre export default xxx et export { xxx as default } lorsqu'il s'agit de types de données de référence. On peut comprendre qu'il s'agit toujours de types de référence en JavaScript et qu'ils ne seront pas profondément copiés lors de l'exportation.

Meilleures pratiques et recommandations

Bien que export default xxx et export { xxx as default } puissent être utilisés pour exporter les valeurs par défaut, leur comportement diffère dans certains scénarios. Voici quelques recommandations pour vous aider à choisir la bonne syntaxe :

• Utilisez export default xxx lorsque vous souhaitez exporter une valeur, telle qu'une chaîne ou un nombre, et que vous n'avez pas besoin de liaisons dynamiques.

• Utilisez export { xxx par défaut } lorsque vous avez besoin d'une liaison dynamique, en particulier lorsque la valeur exportée peut changer au fil du temps (non recommandé).

• Pour les types de données de référence, l'une ou l'autre syntaxe peut être utilisée, car elles exportent toujours une référence.

• Une suggestion connexe : pour la lisibilité et la maintenabilité du code, il est recommandé d'utiliser les exportations nommées au lieu des exportations par défaut, voici pourquoi.

Conclusion

Les différences entre export default xxx et export { xxx as default } en JavaScript peuvent paraître subtiles, mais elles peuvent avoir un impact sur le comportement de votre code. J'espère que cet article vous sera utile.

Si vous trouvez mon contenu utile, veuillez envisagez de vous abonner. J'envoie une newsletter quotidienne avec les dernières mises à jour de développement Web. Merci pour votre soutien !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!