Comment utiliser l'exportation par défaut dans Es6

Dans es6, "export default" est utilisé pour exporter des fonctions, des objets ou des valeurs primitives liées en temps réel à partir du module. Un fichier ne peut écrire un "export default" qu'à la fin pour spécifier la sortie par défaut du module. . La syntaxe est "export default function () {...}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, ECMAScript version 6.0, ordinateur Dell G3.

Comment utiliser export default dans es6

L'instruction export est utilisée pour exporter des fonctions, des objets ou des valeurs primitives liées en temps réel à partir du module afin que d'autres programmes puissent le référencer via import {foo, bar} from '. /util/index'

Il existe deux façons d'exporter des exportations :

Fonction d'exportation d'exportation nommée FunctionName(){...} (chaque module contient n'importe quel nombre)

Expression par défaut d'exportation par défaut (chaque module en contient un)

export

Vous pouvez écrire plusieurs exportations dans un seul fichier

Exporter dans le fichier a.js

export let name1 = '张三'; // 或者使用 var, const
export function FunctionName(){...}
export class ClassName {...}

Importer dans le fichier b.js

import {name1,FunctionName,ClassName} from '../a.js';

Notez que la méthode d'écriture suivante signalera une erreur :

// 报错
export 1;
// 报错
var m = 1;
export m;
// 报错
function f() {}
export f;

export default

Un fichier ne peut écrire qu'un seul export default à la fin

Export dans le fichier a.js

const str = "export default的内容";
function FunctionName(){...}
class ClassName {...}
export default {str,FunctionName,ClassName}

Import dans le fichier b.js

import name from '../a.js';
// 使用
console.log(name.str)
name.FunctionName();

La différence entre export et export default

1. L'exportation et l'exportation par défaut peuvent être utilisées pour exporter des constantes, des fonctions, des fichiers, des modules, etc.

2 Dans un fichier ou un module, il peut y avoir plusieurs exportations, et l'exportation par défaut n'en a qu'une à la fin. le fichier

3. Exporter via l'exportation, dans Vous devez ajouter { } lors de l'importation, l'exportation par défaut n'est pas requise et peut être nommée comme vous le souhaitez

Introduction détaillée

Nous savons que l'exportation par défaut{} est indispensable lors de l'apprentissage du VUE, mais nous devons comprendre sa signification.

export default{} Ceci est utilisé lors de la réutilisation de composants. Supposons que nous écrivions un fichier de composants d'une seule page A et que nous devions l'utiliser dans un autre fichier B, nous devons alors utiliser la syntaxe d'importation/exportation ES6 pour définir l'exportation de l'interface de sortie dans le fichier A et introduire l'importation dans le fichier B. Utilisez les composants importés. afin que vous puissiez réutiliser le composant A pour faire correspondre le fichier B afin de générer des pages HTML.

Lors de l'utilisation de la commande d'importation, l'utilisateur doit connaître le nom de la variable ou de la fonction à charger, sinon elle ne pourra pas être chargée. Cependant, les utilisateurs souhaitent absolument démarrer rapidement et ne seront peut-être pas disposés à lire la documentation pour comprendre les attributs et les méthodes du module. Afin de faciliter la tâche des utilisateurs et de leur permettre de charger des modules sans lire la documentation, la commande export default est utilisée pour spécifier la sortie par défaut du module.

1. Utilisation de base

//export-default.js 这是一个模块文件export-default.js，它的默认输出是一个函数
export default function () {
  console.log('foo');
}

//import-default.js
import customName from './export-default';
customName();  //'foo'
//这是的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。
// 需要注意的是，这时import命令后面，不使用大括号。

Lorsque d'autres modules chargent le module anonyme, la commande d'importation peut spécifier n'importe quel nom pour la fonction anonyme.

2. La commande d'exportation par défaut est utilisée avant les fonctions non anonymes

// export-default.js
export default function foo() {
  console.log('foo');
}
 
// 或者写成
 
function foo() {
  console.log('foo');
}
 
export default foo;
//上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

[Recommandations associées : tutoriel vidéo javascript, front-end web]

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!