JS模块导入import，导出export

最新推荐文章于 2024-06-24 23:27:48 发布

肖哒哒啊

最新推荐文章于 2024-06-24 23:27:48 发布

阅读量1k

点赞数 1

文章标签： javascript es6

原文链接：https://www.cnblogs.com/WindrunnerMax/p/12674943.html

版权

转载：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中定义新增的。

肖哒哒啊

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS模块导入import，导出export

转载：https://www.cnblogs.com/WindrunnerMax/p/12674943.htmlES6在语言标准的层面上实现了模块的功能，是为了成为浏览器和服务器通用的模块解决方案，ES6标准使用export与export default来导出模块，使用import导入模块。此外在浏览器环境中是可以使用require来导入export、export default导出的模块的，但依然建议使用import标准导入模块。export、export default主要有以下区别：1、expo
复制链接

扫一扫