ES6（ECMAScript 2015）引入了许多新特性，其中最重要的莫过于模块化。模块化使得 JavaScript 代码更易于维护和扩展，同时也提高了代码的可读性和可重用性。在本文中，我们将探讨 ES6 模块化的详细内容。
什么是模块？
在 JavaScript 中，一个模块就是一个 JavaScript 文件。文件中定义的函数、变量和类可以被导出（export）并在其他文件中使用。典型的导出方式包括：export 和 export default。
export
export 用于导出命名变量、函数和类。例如，我们可以将下面的函数导出：
------ -------- ----- - --------------------- -
然后在其他文件中将其导入：
------ - --- - ---- ----------------- ------ -- -------
也可以将变量和类导出：
------ ----- - - -- ------ ----- ------- - -- --- -
export default
export default 用于导出一个默认值，通常用于导出一个类或函数。例如，我们可以将下面的类导出：
------ ------- ----- ------- - -- --- -
然后在其他文件中将其导入：
------ ------- ---- ----------------- ----- ------- - --- ----------
如何导入模块？
使用 import 语句可以导入模块，import 后跟需要导入的模块路径。例如，我们可以导入上面的 foo 函数：
------ - --- - ---- -----------------
还可以使用 import 导入默认值：
------ ------- ---- -----------------
需要注意的是，导入的模块是只读的，其导出的变量、函数和类不能被修改。如果需要改变模块导出的值，可以通过 export 重新导出一个修改后的版本。
模块的加载时机
模块是懒加载的，只有在需要的时候才会被加载。例如，在下面的代码中，my-module.js 只有在 foo 函数被调用时才会被加载。
------ - --- - ---- ----------------- -------- ----- - -- --- - -------- ----- - ------ - ------
总结
ES6 模块化是 JavaScript 中最重要的新特性之一，它使得我们可以将代码更好地组织起来，提高代码的可维护性和可重用性。本文简单介绍了如何导出和导入模块，以及模块的加载时机。希望读者通过本文的介绍，更加深入地了解 ES6 模块化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6458c2c5968c7c53b0b12d0a