转载:https://www.cnblogs.com/WindrunnerMax/p/12674943.html
ES6在语言标准的层面上实现了模块的功能,是为了成为浏览器和服务器通用的模块解决方案,ES6标准使用export与export default来导出模块,使用import导入模块。此外在浏览器环境中是可以使用require来导入export、export default导出的模块的,但依然建议使用import标准导入模块。
export、export default主要有以下区别:
export
1、export能按需导入,export default不行。
2、export可以有多个,export default仅有一个。
export能直接导出变量表达式,export default不行。
export方式导出,在导入时要加{},export default则不需要。
import&require
import是ES6标准中的模块化解决方案,require是node中遵循CommonJS规范的模块化解决方案
1、后者支持动态引入,也就是require(${path}/xx.js),前者目前不支持,但是已有提案
2、前者是关键词,后者不是
3、前者是编译时加载,必须放在模块顶部,在性能上会比后者好一些,后者是运行时加载,理论上来说放在哪里都可以
4、前者采用的是实时绑定方式,即导入和导出的值都指向同一个内存地址,所以导入值会随着导出值变化。而后者在导出时是指拷贝,就算导出的值变化了,导入的值也不会变化,如果想要更新值就要重新导入
5、前者会编译成require/exports来执行
6、import导入不用加文件后缀,require需要添加文件后缀(在小程序中require需要写相对路径)
// 1.js
var a = 1;
var b = function(){
console.log(a);
}
var c = 3;
var d = a + c;
var obj = { a,b,c }
export {a,b};
export {c,d};
export default obj;
<!-- 2.html 由于浏览器限制,需要启动一个server服务 -->
<!DOCTYPE html>
<html>
<head>
<title>ES6</title>
</head>
<body>
</body>
<script type="module">
import {a,b} from "./1.js"; // 导入export
// 不加{}即导入export default,data是导入 export default 时候给的命名
import data from "./1.js";
import {c} from "./1.js"; // 导入export 按需导入
console.log(a); // 1
console.log(b); // ƒ (){ console.log(a); }
console.log(data); // {a: 1, c: 3, b: ƒ}
console.log(c); // 3
</script>
</html>
补充:
AMD、CMD、CommonJs、ES6的对比
他们都是用于在模块化定义中使用的,AMD、CMD、CommonJs是ES5中提供的模块化编程的方案,import/export是ES6中定义新增的。