ES6 | ES6 export,import,export default,import()

ES6 | ES6 export,import,export default,import()

一月 02, 2022
该文章更新于 2022.01.02

先说一个注意点:

如果代码运行报错:

1
Uncaught SyntaxError: Cannot use import statement outside a module

这是因为:虽然谷歌浏览器(chrome 61之后)已经支持es6的Module了,但是不能简单的直接使用,我们需要在script标签上加一个:type="module",或者我们可以使用babel 转成es5,这样也能愉快的使用import和export 。

1
2
3
<script type="module">
improt ...
</script>

export:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// data.js
const obj = {
first: {
name: "张三"
}
}
const haha = "哈哈哈哈哈";
export {obj,haha};

/*
使用export导出,那么导入的时候就需要指定变量名或者函数名
*/

// test.js
import {obj,haha} from "./data.js";

/*
或者使用import * 来导入,使用 as 取别名
*/
import * as all from "./data.js";

export default:

从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。这时就可以使用export default。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// data.js
const obj = {
first: {
name: "张三"
}
}
const haha = "哈哈哈哈哈";
export default {obj,haha};

/*
使用default导出,在导入的时候就可以不需要知道具体变量名或函数名,
直接导入就可以了,这里的object是我给的变量名
*/

// test.js
import object from "./data.js";
console.log(object.obj);

import 和 import():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//import是静态加载的,而import()支持动态加载,并且是异步加载,CommonJS的require方法是同步加载

// data.js 用setTimeout模拟网络请求
function fn() {
console.log("这是一个异步");
}
export {fn};

// test.js import()是一个异步操作,会异步加载模块
import("./data.js").then(d => {
console.log("模块加载完成")
}).catch(err => {
console.log(err)
})
console.log("这是在import后面的输出语句");

// 输出结果:可以看到程序没有等待加载,而是先走了之后的打印操作,在加载模块完成后才执行了上面的打印操作
// 这是在import后面的输出语句
// 这是一个异步