Maison > interface Web > Questions et réponses frontales > Comment utiliser l'exportation ES6

Comment utiliser l'exportation ES6

青灯夜游
Libérer: 2022-10-18 14:32:10
original
2268 Les gens l'ont consulté

Dans es6, l'exportation est utilisée pour exporter des fonctions, des valeurs primitives et des objets dans des modules JavaScript afin que d'autres programmes puissent les utiliser via l'instruction d'importation ; le contenu exporté par export sera ajouté à l'objet fichier, ce qui peut être simplement compris. comme copie profonde. La fonction de l'export par défaut est d'ajouter une valeur à l'attribut par défaut de l'objet fichier.

Comment utiliser l'exportation ES6

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

export est utilisé pour exporter des fonctions, des valeurs primitives et des objets dans des modules JavaScript ;

La commande d'export permet de spécifier l'interface externe du module

Un fichier JS indépendant est un module.

Un fichier js peut être compris comme un module. Ce module peut être importé par n'importe quel autre module. Le résultat de l'introduction est l'objet détenu après l'exécution de ce module. Ensuite, il y a un problème. Une fois le module de fichier introduit, tout est dans sa propre portée. Le fichier qui initie activement le comportement d'introduction a obtenu l'objet introduit, mais ne peut pas accéder à la fonction Things dans le domaine, donc l'exportation est fournie. déterminer ce qu'un module expose au monde extérieur.

Si vous souhaitez que le monde extérieur puisse lire une variable/fonction/classe à l'intérieur du module, vous devez utiliser le mot-clé export pour afficher la variable/fonction/classe.

La fonction d'exportation est d'exporter des fonctions, des objets ou des valeurs primitives du module afin que d'autres programmes puissent les utiliser via l'instruction d'importation

Lors de l'importation d'un fichier, l'objet fichier sera obtenu par défaut. objet vide. Quelque chose qui signifie que nous ne pouvons pas accéder au fichier. Utilisez l'exportation pour ajouter du contenu à cet objet

Utilisation :

module1.js :

function f1 (){
    console.log("module - 1 : functino 1")
}
let b = {
    name:"test_obj"
}
let str = "hell绿绿绿"
export {
    f1,b,str
}
Copier après la connexion

Introduit dans main.js

// 先忽略 import 的写法,后面再说明
import * as m1 from "./m1.js"
console.log(m1)
Copier après la connexion

Dans ce fichier, nous exposons une fonction, une variable et un objet. Par conséquent, l'objet fichier importé via import n'est plus un objet vide, mais un objet contenant le contenu de l'export. Par conséquent, nous imprimons l'objet fichier m1.js, qui est m1 :

Comment utiliser lexportation ES6

Donc, nous savons, le. le contenu exporté par export sera ajouté à l'objet fichier, qui peut être simplement compris comme une copie complète.

export par défaut

De nombreux débutants sont confus puisqu'il existe une exportation, pourquoi avons-nous besoin d'une exportation par défaut ? La réponse donnée sur Internet est souvent qu’il s’agit de l’interface d’exportation par défaut des fichiers. Alors, quelle est l’interface d’exportation par défaut pour les fichiers ?

En fait, ce problème est très simple. Laissons d'abord de côté l'importation, ne considérons pas la syntaxe de l'importation, et considérons uniquement ce que fait l'exportation par défaut.
Modifiez module1.js :

function f1 (){
    console.log("module - 1 : functino 1")
}
let b = {
    name:"test_obj"
}
let str = "hell绿绿绿"
export {
    f1,b,str
}
export default{
    name:"default"
}
Copier après la connexion

main.js reste inchangé. Exécutez-le à nouveau et continuez à visualiser l'objet fichier imprimé :

Comment utiliser lexportation ES6

L'avez-vous découvert La fonction de l'export par défaut est d'ajouter un attribut par défaut au fichier ? file object. , la valeur de l'attribut par défaut est également un objet et est exactement la même que le contenu exporté par export default.

Résumé de l'export de fichier

Donc ici, nous comprenons qu'un fichier js est importé en tant que module et sera exposé en tant qu'objet (c'est-à-dire qu'après avoir été importé, il peut être utilisé comme un objet).

La fonction de l'export est d'ajouter des attributs à cet objet fichier. Tout ce qui est exporté sera ajouté à l'objet fichier.

La fonction de l'export par défaut est d'ajouter une valeur à l'attribut par défaut de l'objet fichier.

Trois façons d'exporter l'exposition

1. Exposition séparée

//这是我个人的export.js 文件
export let obj={
    name:"导出"
}

export const fuc=()=>{
    console.log('导出')
}
Copier après la connexion

2. Exposition unifiée

//将需要暴露方法写在export对象内
 let obj={
    name:"导出"
}

 const fuc=()=>{
    console.log('导出')
}
export{
    obj,
    fuc,
}
Copier après la connexion

3.

【 Recommandations associées :

tutoriel vidéo javascript

,

vidéo de programmation

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal