ES6模块化用法详解

_Glorious

已于 2022-09-09 14:30:07 修改

阅读量444

点赞数

文章标签： javascript es6 前端

于 2022-09-09 11:06:55 首次发布

本文链接：https://blog.csdn.net/weixin_57875982/article/details/126778627

版权

本文详细介绍了ES6的模块化机制，包括export用于导出模块成员，import用于导入模块成员。通过示例展示了在一个js文件（export.js）导出模块，在另一个js文件（import.js）导入并使用这些模块的过程。同时，提供了index.html文件如何引用模块化的代码，以帮助理解运行效果。文章旨在帮助读者掌握ES6模块化的实际应用。

摘要由CSDN通过智能技术生成

所谓模块，一个js文件就是一个独立的模块，该模块(js文件)内的所有变量或函数，外部模块都无法直接获取。若想一个模块能够读取另一个模块的某个变量或函数，需要用export关键字暴露(导出）模块成员，用import关键字导入模块成员。

现在一个文件夹下准备有两个不同的js文件，分别用作导出模块(export.js)及导入模块(import.js)，以及准备了一个html文件(index.html)，来共同演示ES6模块化的使用。

导出模块的代码和在导入模块中如何使用的方式是一一对应的。

export.js模块里的内容：

let firstName = 'Tom';
let obj = {
    a: 1,
    b: 2
}
let arr = [3,2,1];
function fun(){
    console.log('I am a function from export');
}
// 🔺export导出模块成员
// 其实导出的关键字就相当于【接口】供外部的导入模块使用
export