前言
ECMAScript 2021 是 JavaScript 的最新标准，其中包括了很多新特性和改进。其中，ES6 模块是一项非常重要的特性，它为 JavaScript 提供了一种标准的模块化机制，使得开发者可以更加方便地组织和管理代码。
本文将介绍 ES6 模块的标准语法，详细讲解其使用方法，并提供示例代码和指导意义，帮助读者更好地学习和使用 ES6 模块。
ES6 模块的基本语法
ES6 模块是一种新的 JavaScript 模块化机制，它采用了类似于 Node.js 的 CommonJS 标准的语法，但与 CommonJS 不同的是，ES6 模块是在编译时静态加载的，而不是在运行时动态加载的。
ES6 模块的基本语法非常简单，它由两个关键字组成：import 和 export。
导入模块
使用 import 关键字可以导入一个或多个模块中的变量、函数或类。其语法如下：
-- ----------- ------ -------- ---- ---------------- -- ----------- ------ - ---- --- - ---- ---------------- -- ------------------ ------ --------- - ---- --- - ---- ----------------
其中，myModule 是模块的名称，可以是相对路径或绝对路径，.js 后缀可以省略。
如果模块导出的是一个默认值，那么可以使用 import myModule from './myModule.js' 的语法来导入。
如果模块导出的是多个命名值，那么可以使用 import { foo, bar } from './myModule.js' 的语法来导入。
如果模块既有默认值又有多个命名值，那么可以使用 import myModule, { foo, bar } from './myModule.js' 的语法来导入。
导出模块
使用 export 关键字可以将一个或多个变量、函数或类导出为模块的公共接口，供其他模块使用。其语法如下：
-- ------- ------ ------- --------- -- ------- ------ ----- --- - ------ ------ -------- ----- - -- --- -- - ------ ----- ------- - -- --- -- -
其中，export default 用于导出一个默认值，其他模块可以使用 import myModule from './myModule.js' 的语法来导入。
export 用于导出多个命名值，其他模块可以使用 import { foo, bar } from './myModule.js' 的语法来导入。
ES6 模块的特性
ES6 模块具有以下几个特性：
- 模块是单例的，每个模块只会被加载一次，之后会被缓存。
- 模块的顶层作用域是模块本身，不会污染全局作用域。
- 模块的导入和导出都是静态的，不支持动态导入和导出。
- 模块的导入和导出都是值的引用，而不是拷贝。
ES6 模块的使用方法
ES6 模块可以用于浏览器端和服务器端的 JavaScript 开发。下面将分别介绍它们的使用方法。
在浏览器端使用 ES6 模块
在浏览器端使用 ES6 模块需要使用 <script type="module"> 标签来加载模块。其语法如下：
--------- ----- ------ ------ ----- ---------------- ---------- -------------- ------- ------ ------- ------------- ------------------------- ------- -------
其中，type="module" 表示这是一个 ES6 模块，src="./main.js" 表示要加载的模块文件。
在模块中，可以使用 import 和 export 关键字来导入和导出模块，如下所示：
-- ------- ------ - ---- --- - ---- ---------------- ----------------- -------------------
-- ----------- ------ ----- --- - ------ ------ -------- ----- - ------ ------ -
在浏览器中打开页面后，可以在控制台中看到输出的结果：
--- ---
在服务器端使用 ES6 模块
在服务器端使用 ES6 模块需要使用 Node.js 的 --experimental-modules 标志来启用 ES6 模块支持。其语法如下：
---- ---------------------- -------
在模块中，可以使用 import 和 export 关键字来导入和导出模块，如下所示：
-- ------- ------ - ---- --- - ---- ---------------- ----------------- -------------------
-- ----------- ------ ----- --- - ------ ------ -------- ----- - ------ ------ -
在命令行中执行 node --experimental-modules main.js 命令后，可以在控制台中看到输出的结果：
--- ---
总结
ES6 模块是 JavaScript 的一项重要特性，它提供了一种标准的模块化机制，使得开发者可以更加方便地组织和管理代码。本文介绍了 ES6 模块的基本语法和特性，以及在浏览器端和服务器端使用 ES6 模块的方法。希望本文对读者有所帮助，让大家更好地学习和使用 ES6 模块。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6511217095b1f8cacd97e678