📜  ES6 |模块(1)

📅  最后修改于: 2023-12-03 15:00:37.180000             🧑  作者: Mango

ES6 | 模块

简介

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

导入

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

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

上面的代码导入了 myModule 模块中的 foobar 变量。

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

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 模块都有很多有用的特性。