Explication détaillée de l'utilisation et de la différence entre l'exportation et l'exportation par défaut dans JavaScript ES6

Cet article vous présente principalement l'utilisation et les différences de l'exportation, de l'importation et de l'exportation par défaut dans JavaScript ES6. L'introduction de l'article est très détaillée. Je pense qu'il sera utile pour tout le monde d'apprendre ES6. . Si vous en avez besoin, vos amis peuvent s'y référer, jetons un coup d'œil ci-dessous.

Préface

Je crois que de nombreuses personnes ont utilisé l'exportation, l'exportation par défaut et l'importation, mais quelle est la différence entre eux ? Avant d’examiner les différences entre eux, examinons d’abord leur utilisation.

Utilisation de l'import et de l'export ES6

La solution de chargement de module js est déjà apparue avant ES6. Les principales sont les spécifications CommonJS et AMD. commonjs est principalement utilisé sur les serveurs pour réaliser un chargement synchrone, comme nodejs. Les spécifications AMD s'appliquent aux navigateurs, tels que requirejs, qui se charge de manière asynchrone. Il existe également des spécifications CMD pour les solutions de chargement synchrone telles que seaJS.

ES6 implémente les fonctions du module au niveau des spécifications du langage, et la mise en œuvre est assez simple. Il peut remplacer complètement les spécifications CommonJS et AMD existantes et devenir une solution de module universelle pour les navigateurs et les serveurs.

Le module ES6 a principalement deux fonctions : exporter et importer

• l'export permet de sortir ce module en externe (un fichier peut être compris comme un module ) L'interface de la variable

• import permet de charger un autre module contenant l'interface d'export dans un module.

C'est-à-dire qu'après avoir utilisé la commande d'exportation pour définir l'interface externe du module, d'autres fichiers JS peuvent charger ce module (fichier) via la commande d'importation. Comme suit (en supposant que les fichiers a et b soient dans le même répertoire)

// a.js

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo} 
//通过向大括号中添加sex，echo变量并且export输出，就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式，如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。

// b.js
通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex) // boy
echo(sex) // boy

le fichier a.js peut également être écrit selon la syntaxe d'exportation suivante, mais il n'est pas aussi intuitif que ci-dessus et n'est pas recommandé.

// a.js
export var sex="boy";
export var echo=function(value){
　　console.log(value)
}

//因为function echo(){}等价于 var echo=function(){}所以也可以写成
export function echo(value){
　　　console.log(value)
}

Ce qui précède est l'utilisation de base de l'exportation et du module, puis développez l'étude

Comme le montre le précédent exemple, b.js Lors de l'utilisation de la commande import, l'utilisateur doit connaître l'identifiant de variable exposé par a.js, sinon il ne peut pas être chargé. Vous pouvez utiliser la commande export default pour spécifier la sortie par défaut du module, vous n'avez donc pas besoin de connaître le nom de la variable du module à charger.

//a.js
var sex="boy";
export default sex（sex不能加大括号）
//原本直接export sex外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。

// b.js
本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12) // boy,boy

La différence entre l'exportation, l'importation et l'exportation par défaut dans ES6

Dans Javascript ES6, l'exportation et l'exportation par défaut sont disponibles Pour exporter des constantes , fonctions , fichiers, modules, etc., vous pouvez passer le nom de l'import (constante | fonction | fichier | module) dans autre fichiers ou modules, importez-le pour qu'il puisse être utilisé, mais dans un fichier ou un module, il peut y avoir plusieurs exportations et importations, et il n'y a qu'une seule valeur par défaut d'exportation.

Utilisation spécifique :

1,

//demo1.js
export const str = 'hello world'

export function f(a){
 return a+1
}

méthode d'importation correspondante :

//demo2.js
import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号

2,

//demo1.js
export default const str = 'hello world'

méthode d'importation correspondante :

//demo2.js
import str from 'demo1' //导入的时候没有花括号

Résumé

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!