Bien comprendre l'importation et l'exportation de modules Javascript

Quand j'ai commencé à apprendre Javascript, je ne connaissais pas grand-chose aux modules. Je ne savais pas comment importer et exporter des modules, alors je l'ai juste essayé au hasard.

Par exemple , si import xx from 'test.js' cela ne fonctionne pas, ajoutez des parenthèses import {xx} from 'test.js'

De toute façon, je m'appuie toujours sur l'ignorance, il y a toujours une manière d'écrire qui est correcte, mais en fait je ne comprends toujours pas, je ne comprends toujours pas

Surtout lorsque j'ai écrit www.helloworld.net le site Web pour la première fois, j'étais confus lorsque je rencontrais ce genre de problème, surtout lors de l'introduction de bibliothèques tierces.

Il y a plus de cas comme celui-ci. Cet article est également destiné à l'auto-examen de peur d'oublier à l'avenir. J'espère également aider plus d'amis. Cet article est uniquement destiné aux connaissances liées au module ES6.

Tout d’abord, il faut savoir ce que sont l’exportation et l’importation

Nous savons que le module JS importe et exporte, utilise import ces export deux mots-clés

export permet d'exporter ce module en externe
import est utilisé pour importer des modules

C'est-à-dire qu'après avoir utilisé export pour exporter un module, d'autres fichiers peuvent utiliser import pour importer le module correspondant.

Regardons de plus près comment utiliser l'importation et l'exportation ? Comment exporter des modules (tels que des variables, des fonctions, des classes, des objets, etc.)

1 Exporter une seule variable

//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"

//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site)	//输出： www.helloworld.net

2 Exporter plusieurs variables

L'exemple ci-dessus consiste à exporter une seule variable, alors comment exporter plusieurs variables

 //a.js 中定义两个变量，并导出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld开发者社区"
 
 //将上面的变量导出
 export { siteUrl ,siteName }  
 
 
 
 // b.js 中使用这两个变量
 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写

 console.log(siteUrl)	//输出： www.helloworld.net
 console.log(siteName)	//输出： helloworld开发者社区

3 Fonctions d'exportation

L'exportation de fonctions est la même chose que l'exportation de variables, vous devez ajouter { }

//a.js 中定义并导出一个函数
function sum(a, b) {
    return a + b
}
//将函数sum导出
export { sum } 


//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出： 10

4 Exporter des objets

Tout en js est un objet, donc l'objet doit être exportable, et il existe deux façons de l'écrire

4.1 La première façon d'écrire

Utilisez export default des mots-clés à exporter, comme suit

//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
export default {
    siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}


//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出：www.helloworld.net
console.log(obj.siteName)	//输出：helloworld开发者社区

4.2 La deuxième façon d'écrire

Utilisez également export default des mots-clés, comme suit

//a.js 中定义对象，并在最后导出
var obj = {
   	siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}

export default obj	//导出对象obj


//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出：www.helloworld.net
console.log(obj.siteName)	//输出：helloworld开发者社区

5 classe d'exportation

La classe d'exportation est similaire à l'objet d'exportation ci-dessus, elle utilise également export default des mots-clés et il existe également deux façons d'écrire

5.1 La première façon d'écrire

//a.js 中定义一个类并直接导出
export default class Person {
    //类的属性
    site = "www.helloworld.net"

    //类的方法
    show(){
        console.log(this.site)
    }
}


//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出：www.helloworld.net

5.2 La deuxième façon d'écrire

//a.js 中定义一个类，最后导出
class Person {
    //类的属性
    site = "www.helloworld.net"

    //类的方法
    show(){
        console.log(this.site)
    }
}

//导出这个类
export default Person 



//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出：www.helloworld.net

résumé

Résumons brièvement

exportexport default différence avec

L'exportation et l'exportation par défaut peuvent être utilisées pour exporter des constantes, des fonctions, des fichiers, des modules, etc.
Il peut être importé dans d'autres fichiers ou modules par le nom import+(constant | function | file | module) afin de pouvoir être utilisé
l'exportation par défaut ne peut pas être suivie par des mots-clés const ou let
Il peut y avoir plusieurs exportations et importations, mais une seule exportation par défaut.
Pour exporter par exportation, vous devez ajouter { } lors de l'importation, mais vous n'avez pas besoin d'exporter par défaut
export nommé export xxx, export anonyme par défaut. La différence est que lors de l'import, l'export a besoin du même nom pour correspondre, et ce dernier peut être nommé quel qu'il soit.
Dans la gestion modulaire, un fichier est un module, l'export peut exporter plusieurs méthodes et variables, l'export par défaut ne peut exporter que le module actuel, et un seul fichier js peut apparaître

Pour import , export , export default , leur utilisation a été répertoriée en détail dans les exemples ci-dessus, lorsque vous oubliez, vous pouvez l'utiliser comme référence

Le plus important est de comprendre pourquoi vous voulez l’écrire de cette façon, si vous ne le comprenez vraiment pas, souvenez-vous-en.