0%

ES6的模块化导入导出

ES6的模块化导入导出

  • export导出的变量/常量,在import导入的时候需要知道导出时候的名称(必须指定)
  • export default导出的变量/常量,在import导入的时候不需要指定导出时候的名称(可以自定义),但是一个js文件中只能存在一个default

aaa.js文件:

  • 导出数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var flag = true

function sum(num1,num2){
return num1 + num2;
}

// 1.导出方式一(一次性导出多个)
export {
flag, sum
}

// 2.导出方式二(一次导出单个)
// 2.1导出变量
export var num = 1000

// 2.2导出函数
export function mul(num1,num2){
return num1 + num2;
}

// 2.3导出类
export class Person {
run() {
console.log("person")
}
}

// 3.导出方式三(导出default,注意:一个js文件中只有一个default)
//export default var test = "default测试" (这样写是错误的,去掉default是可以的)

var test = "default测试"
export default test

bbb.js文件:

  • 导入数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 1.导入的{}中定义的变量
import {flag,sum} from './aaa.js';
if (flag) {
console.log('输出')
console.log(sum(20,30))
}

// 2.直接导入export定义的变量
import {num} from './aaa.js';
console.log(num)

// 3.导入export的function
import {mul} from './aaa.js';
console.log(mul(10,10))

// 4.导入export的class
import {Person} from './aaa.js';
new Person().run()

// 5.导入export的default(可以自己指定命名)
import c from './aaa.js';
console.log(c)

// 6.统一全部导入(将所有的导入数据存储到aaa对象中)
import * as aaa from './aaa.js';
console.log(aaa.flag)

ccc.html文件:

  • 使用js文件
1
2
3
4
5
6
7
8
9
10
11
<!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="./bbb.js" type="module"></script>
</body>
</html>

可以看到ccc.html文件中正常输出:

没办法,要恰饭的嘛!