ES6模块化导出与导入详解：函数、常量与模块规则

ES6模块化是JavaScript语言的一项重要新特性，它引入了`import`和`export`语句，实现了模块化编程，使得代码组织更加清晰，提高了代码复用性和维护性。本文将详细介绍ES6模块化的三种导出方式，并探讨其基本规则和特点。 首先，我们来了解第三种导出方式，即直接在`export`位置定义函数或变量。例如，在`lib.js`文件中： 1. **导出常量**：通过`export const`关键字，如`export const sqrt = Math.sqrt;`，将`Math.sqrt`这个常量导出，外部可以使用`import`语句直接引用。 2. **导出函数**：通过`export function`，如`export function square(x) { return x * x; }` 和 `export function diag(x, y) { return sqrt(square(x) + square(y)); }`，导出可调用的函数，这些函数可以在其他模块中被导入并使用。 在`main.js`中，通过`import`语句导入所需模块，如`import { square, diag } from './lib';`，然后可以直接调用导出的`square`和`diag`函数。 ES6模块化的主要规则和特点包括： - **模块加载和执行**：每个模块仅加载一次，执行一次，避免重复加载和节省资源。模块内的变量和函数具有局部作用域，不会污染全局命名空间。 - **单例与模块对象**：每个模块就像一个单例，或一个对象，同一目录下同一文件的模块在后续加载时，会从内存中复用。 - **模块隔离**：模块内部声明的变量和函数是私有的，只能通过`export`导出供外部访问。 - **模块间交互**：模块之间可以相互导入，实现代码的复用和功能划分。 - **浏览器兼容性**：由于现代浏览器对ES6模块的支持有限，通常需要借助Babel或Traceur等工具将ES6代码转换为ES5版本，以便在所有浏览器上运行。 在ES6出现之前，前端开发者已通过RequireJS（基于AMD规范）或SeaJS（基于CMD规范）实现模块化。然而，这些第三方库相比ES6自带的模块化功能，可能在使用体验和性能上有差异。了解这些工具和规范的区别有助于更好地理解和选择适合项目的模块化方案。 总结起来，ES6的模块化提供了强大的功能，使代码更加模块化、可维护和高效。熟练掌握`import`和`export`语法以及模块化的特点，对于提升前端开发的生产力和代码质量至关重要。