es6模块化两种导出方式|青训营笔记

78 阅读1分钟

在进行大项目的过程中,总结过es6的两种导出方式的详细方法。

es6模块功能主要由两个命令构成:**exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。模块导入导出各种类型的变量,如字符串,数值,函数,类。

主要步骤1:在html代码中引入js文件,script标签中加入 type=“module” ;
步骤2:把需要共享的变量导出——export{ 变量 };

1.named exports(命名导出)
可以批量导出多个,直接在变量、函数等声明的关键字之前添加export 或 使用大括号{变量名或函数名}。

具体实现:将export和函数一起写
image.png
或者将export和函数分开暴露,结果是一样的,并可以选择你想暴露的函数。
image.png

2.default export(默认导出,也称匿名导出)

一次导出一个默认导出就不需要name了,但是一个js文件中只能有一个export default。所以这个是单数,命名导出是复数,默认导出常用某些情况下,一个模块中包含某个功能,我们并不希望给这个功能命名,而可以让导出这可以自己来命名。
直接在变量、函数等声明的关键字之前添加export default 或 直接导出变量名或函数名等。
import命令具有提升效果,会提升到整个模块的头部,首先执行,import命令是编译阶段执行的,在代码运行之前,es6语法需要bable解析为es5才能执行。

image.png

以上就是我对es6模块化两种导出方式的总结,希望对读者们有帮助。