1、export与export default均可用于导出常量、函数、文件、模块等
2、在一个文件或模块中,export、import可以有多个,export default仅有一个
3、通过export方式导出,在导入时要加{ },export default则不需要
4、
(1) 输出单个值,使用export default
(2) 输出多个值,使用export
(3) export default与普通的export不要同时使用
案例:
//html代码块——通用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./a.js" type="module"></script>
</body>
</html>
第一种暴露:export——import 相对应的暴露跟接收。
b.js代码块
// 第一种暴露案例:暴露常量:
export let name = 'wangjie';
export let age = 20;
// 第一种暴露案例:暴露方法:
export function rende (a,b) {
console.log(a+b);
}
a.js代码块
import {name,age} from './b.js' // 导入
console.log(name,age)
import {rende} from "./b.js";
rende(1,2)
控制台输出结果
第二种暴露(默认暴露1)export default——import[暴露一个对象或者常量]
b.js代码块
// 第二种 默认暴露 只能有一个[暴露一个常量]
export default {
name: 'App'
}
a.js代码块
// 第二种暴露(默认暴露,单个暴露)
import obj from './b.js' // 导入
console.log(obj);
第三种暴露(默认暴露2)export default——import[暴露函数]
b.js代码块
// // 暴露函数
export default function abc(a,b){
console.log(a+b);
}
// // 暴露函数
export default function abc(a,b){
console.log(a+b);
}
a.js代码块
import fun from './b.js' // 导入
fun(5,6);
控制台结果
第四种(伪3):利用通配符*批量接受暴露出来的值。
b.js代码块
// 批量暴露元素
export let name = 'zhangsan';
export let age = '24';
export let gender = '男';
a.js代码块
// 批量导入
import * as obj from './b.js'
console.log(obj.name);
console.log(obj.age);
console.log(obj.gender);
控制台结果