ES6 | 模块

简介

在 ES6 中，模块是一个优雅的解决方案，用来解决 JavaScript 中依赖管理的问题。模块可以将代码分成小的可重用的部分，使得代码更加可维护和可读性更高。 ES6 模块于 2015 年被正式引入到 ECMAScript 标准中。

导入

在 ES6 中，我们可以使用 import 关键字来导入模块。下面是一个例子：

import { foo, bar } from './myModule';

上面的代码导入了 myModule 模块中的 foo 和 bar 变量。

除了具体的变量之外，也可以将整个模块作为一个对象进行导入：

import * as myModule from './myModule';

导出

ES6 模块可以导出变量、函数、类、对象等等。使用 export 关键字来导出模块：

export const foo = 'foo';
export function bar() {
  console.log('bar');
}

你也可以将多个导出合并到一个 export 语句中：

const foo = 'foo';
function bar() {
  console.log('bar');
}
export { foo, bar };

还可以使用 default 导出，一个模块只能有一个默认导出：

export default function myFunc() {
  console.log('my function');
}

自动执行模块代码

当浏览器或 Node.js 加载模块时，导入和导出的代码都不会自动执行。这意味着，导入模块时，只有对导出变量的访问才会触发代码的执行。例如：

// module.js
console.log('module loaded');
export const foo = 'foo';

// main.js
import { foo } from './module';

console.log(foo);

在上面的例子中，当 main.js 导入 module.js 并访问 foo 变量时，console.log('module loaded'); 才会执行。

如果你希望模块加载后自动执行一些代码，可以使用 export 导出一个函数或类，并在模块中调用它。

兼容性问题

ES6 模块在当前浏览器中仍然有一些兼容性问题，但是目前许多主流浏览器都已经实现了完整的 ES6 模块支持。

在你开始大量使用 ES6 模块语法之前，可能需要用到构建工具，例如 webpack、Rollup 等，以确保你的代码能在所有现代浏览器中正常运行。

结论

ES6 模块是一个优秀的标准，可以让我们更好地管理 JavaScript 代码。模块让代码更易于维护，更容易阅读，更易于测试。无论你是正在编写浏览器端还是服务端的代码，ES6 模块都有很多有用的特性。