在 es6 中引入了 import 语句和 export 语句，使得我们可以利用它们进行模块化编程。
目录
一. export 语句
| m.js
var a = 1;
var b = 2;
var c = 3;
// 可以单个导出, 不要忘记加 {}
export {a};
// 可以多个导出
export {
b,
c
};
export var d = 4;
/* 相当于
var d = 4;
export {d};
*/
| index.js
import {a, b, c, d} from "./m.js"
console.log(a);
console.log(b);
console.log(c);
console.log(d);
输出：
1
2
3
4
注意: 对于 export 语句, 在导入时 impot 的后面必须有{}
(一) 使用别名
为了防止变量名重复，可以利用别名为导出或导入的变量起一个新的名字。
1、在 export 语句中使用别名
| m.js
var aaa = 1;
var bbb = 2;
var ccc = 3;
export {
aaa as a,
bbb as b,
ccc as c
};
| index.js
import {a, b, c, d} from "./m.js"
console.log(a);
console.log(b);
console.log(c);
输出：
1
2
3
2、在 import 语句中使用别名
| m.js
var aaa = 1;
var bbb = 2;
var ccc = 3;
export {
aaa,
bbb,
ccc
};
| index.js
import {
aaa as a,
bbb as b,
ccc as c
} from "./m.js"
console.log(a);
console.log(b);
console.log(c);
输出：
1
2
3
(二) 全部导入
| m.js
var a = 1;
var b = 2;
var c = 3;
export {
a,
b,
c
}
| index.js
// 这里的 mod 是一个别名，可以自定义
import * as mod from "./m.js"
console.log(mod.a);
console.log(mod.b);
console.log(mod.c);
输出：
1
2
3
二. export default 语句
-
export default语句后面接的是一个表达式 -
export default语句在一个js文件中只能使用一次
var a = "Hello";
export default a;
// 或者
export default "Hello";
// "mod" 是自定义的别名,可以随便取
import mod from "./m.js"
console.log(mod)
输出：
Hello
三. 同时使用 export default 和 export
| m.js
var a = "Hello ";
export default a;
var b = "云先生B";
export {b};
| index.js
import a, {b} from "./m.js"
console.log(a + b);
输出：
Hello World
四. 在实际中使用模块化编程
(一) 在前端中使用
在前端中使用模块化编程，必须为 <script> 标签添加 type="module" 属性。
| lib.js
export var a = 666;
| index.html
<!DOCTYPE html>
<html>
<head>
<script type="module">
import {a} from './lib.js';
alert(a); // 弹出窗口，内容为“666”
</script>
</head>
</html>
(二) 在nodejs中使用
在 nodejs 中使用es6的模块化编程时，必须将文件后缀名改为 .mjs
// m.mjs
export var a = 1;
export var b = 2;
// index.mjs
import {a, b} from "./m.js"
console.log(a); // 输出 1
4375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
