ES6的模块化规范之导入与导出

ES6的模块化系统支持使用import和export关键字导入和导出模块。

使用export关键字可以将变量、函数、类等导出为一个模块。
使用export default关键字可以导出一个默认的内容，每个模块只能有一个默认导出。
使用import关键字可以从其他模块中导入所需的内容。
使用花括号 {} 导入命名导出的内容，使用任意名称导入默认导出的内容。

默认导入和导出

默认导入：export default 默认导出的成员

javascript 复制代码

let name='张三'
let age=18
const sex='男'
const info='人物信息'
function clog(){
    console.log(name,age,sex)
}

export default{ //抛出info变量和clog方法
    info,
    clog
}

在这里导出了一个info变量和一个clog方法，info的值为一个字符串'人物信息',clog的效果是打印出name，age，sex这三个变量的值。

默认导出：import 接收名称 from '文件所处位置'

xml 复制代码

<template>
	<div>
		<text>{{ text.info }}</text>
	</div>
</template>

<script setup>
import text from './api/text';

let show= text.clog();
</script>

导入text.js中所抛出的变量info和方法clog,通过将info的值渲染到浏览器页面上以及调用clog方法来查看效果。

打印效果

渲染效果

注意的是：每个模块中，只允许使用唯一的一次 export default

按需导入和按需导出

按需导出：使用export关键字导出的内容需要被命名，其他模块需要使用相同的名称进行导入。

javascript 复制代码

let name='张三'
let age=18
const sex='男'
function clog(){
    console.log(name,age,sex)
}

export const info='人物信息'
export { 
    name,
    age,
    sex
}

在这里进行了两次导出，第一次导出了info变量，第二次导出了name,age,sex这三个变量

按需导入：使用import关键字导入的内容需要与导出时使用相同的名称匹配。

xml 复制代码

<template>
	<div>
		<text>{{ name }}</text>
		<text>{{ age }}</text>
		<text>{{ sex }}</text>
	</div>
</template>

<script setup>
import {name,age,sex,info} from './api/text';

console.log(info);

</script>

在这里导入了text.js中的name,age,sex,info这四个变量，同时将name,age,sex这三个变量渲染到浏览器页面上，将info变量打印处理。

如果我们引入未被导出的clog时浏览器会报出以下错误

渲染效果为

打印效果为

值得注意的是在按需导入中，每个模块中可以多次按需导出且按需导入的成员名称必须和按需导出的名称保持一致

总结

ES6模块化规范是ES6中引入的一种模块化系统，用于在JavaScript应用程序中组织、导入和导出代码。它提供了一种更简单、更可靠的方式来处理模块之间的依赖关系。每个模块都应该有一个独立的文件，文件名通常与导出的内容相关，模块中的代码可以使用其他模块导出的内容。