在 JavaScript 中，模块化一直是一个重要的问题。在过去，我们通常使用全局变量或者命名空间来组织代码，但是这种方式存在很多问题，比如命名冲突、代码耦合等。为了解决这些问题，ECMAScript 2015（ES6）标准引入了 import/export 语法，使得 JavaScript 也可以像其他语言一样使用模块化。
import/export 的基本用法
在 ES6 之前，我们可以使用 <script> 标签来加载 JavaScript 文件。但是这种方式存在很多问题，比如无法控制加载顺序、无法处理依赖关系等。而使用 import/export 语法，我们可以将 JavaScript 文件分割成多个模块，每个模块只负责自己的功能，从而提高代码的可维护性和可复用性。
在使用 import/export 语法之前，我们需要在 HTML 文件中添加 type="module" 属性，告诉浏览器这是一个模块化的 JavaScript 文件。
<script type="module" src="main.js"></script>
在 JavaScript 文件中，我们可以使用 import 关键字来引入其他模块的内容，使用 export 关键字来导出当前模块的内容。
// 导入其他模块的内容
import { foo } from './foo.js';
// 导出当前模块的内容
export const bar = () => {
console.log('bar');
};在上面的代码中，我们使用 import 关键字来引入 ./foo.js 模块中的 foo 变量，使用 export 关键字来导出当前模块中的 bar 函数。注意，使用 import 引入的变量是只读的，不能直接修改。
import/export 的高级用法
除了基本用法之外，import/export 语法还提供了一些高级用法，可以进一步优化代码的结构和性能。
导入和导出默认值
除了导入和导出具体的变量和函数之外，我们还可以使用 default 关键字来导入和导出默认值。默认值可以是任何值，包括对象、函数、类等。
// 导入默认值
import foo from './foo.js';
// 导出默认值
export default () => {
console.log('bar');
};在上面的代码中，我们使用 import 关键字来导入 ./foo.js 模块的默认值，使用 export default 关键字来导出当前模块的默认值。
导出多个值
除了导出单个值之外，我们还可以使用 export 关键字来导出多个值，这些值可以使用对象、数组等方式组织起来。
// 导出多个值
export const foo = () => {
console.log('foo');
};
export const bar = () => {
console.log('bar');
};在上面的代码中，我们使用 export 关键字来导出 foo 和 bar 两个函数。
动态导入
除了静态导入之外，我们还可以使用 import() 函数来动态导入模块。动态导入可以在代码运行时根据需要加载模块，从而提高性能和用户体验。
// 动态导入模块
const module = await import('./foo.js');
// 调用模块中的函数
module.foo();在上面的代码中，我们使用 import() 函数来动态导入 ./foo.js 模块，使用 await 关键字等待模块加载完成，然后调用模块中的 foo 函数。
总结
使用 import/export 语法，我们可以将 JavaScript 文件分割成多个模块，每个模块只负责自己的功能，从而提高代码的可维护性和可复用性。除了基本用法之外，import/export 语法还提供了一些高级用法，可以进一步优化代码的结构和性能。在实际开发中，我们应该根据项目的需求和特点，选择合适的模块化方案，从而提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661745e8d10417a222715a08