📅  最后修改于: 2023-12-03 15:00:37.180000             🧑  作者: Mango
在 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 模块都有很多有用的特性。