在前端开发中，模块化是一个非常重要的概念。在 ES6 中，新增了一种模块化规范，即 import 和 export，相比于以往的模块化规范，它更加简洁、易用，同时也支持异步加载。
ES6 中的模块化规范采用了 import 和 export 两个关键字。其中，import 用于引入模块，export 用于导出模块。这两个关键字都是基于静态解析的，因此可以在编译时就确定模块的依赖关系。
导出模块
ES6 中的模块可以导出变量、函数、类等。导出的方式有两种：默认导出和命名导出。
默认导出
默认导出使用关键字 export default。一个模块只能有一个默认导出，因此在导入时可以省略花括号。
// javascriptcn.com 代码示例
// 导出一个函数
export default function add(a, b) {
return a + b;
}
// 导出一个类
export default class Person {
constructor(name) {
this.name = name;
}
}
// 导出一个对象
const obj = { name: '张三', age: 18 };
export default obj;命名导出
命名导出使用关键字 export，可以导出多个变量、函数、类等。在导入时需要使用花括号。
// javascriptcn.com 代码示例
// 导出一个变量
export const name = '张三';
// 导出一个函数
export function add(a, b) {
return a + b;
}
// 导出一个类
export class Person {
constructor(name) {
this.name = name;
}
}引入模块
ES6 中的模块可以使用 import 关键字引入。在引入时可以使用命名导入和默认导入两种方式。
命名导入
命名导入使用花括号，可以引入多个变量、函数、类等。
// 引入一个变量
import { name } from './module';
// 引入一个函数
import { add } from './module';
// 引入一个类
import { Person } from './module';默认导入
默认导入不需要使用花括号，只能引入一个默认导出的模块。
// 引入一个默认导出的函数 import add from './module'; // 引入一个默认导出的类 import Person from './module'; // 引入一个默认导出的对象 import obj from './module';
模块的循环依赖
ES6 中的模块化规范支持循环依赖，但是需要注意避免出现死循环。以下是一个循环依赖的示例代码：
// javascriptcn.com 代码示例
// moduleA.js
import { foo } from './moduleB';
export function bar() {
console.log(foo);
}
// moduleB.js
import { bar } from './moduleA';
export const foo = 'hello';
bar();在上述代码中，moduleA 和 moduleB 互相依赖，但是如果直接运行会出现死循环，因此需要将 bar 函数的调用放到 moduleA 中的函数内部。
// javascriptcn.com 代码示例
// moduleA.js
import { foo } from './moduleB';
export function bar() {
console.log(foo);
}
bar();
// moduleB.js
import { bar } from './moduleA';
export const foo = 'hello';动态导入
ES6 中的模块化规范支持动态导入，即在运行时才加载模块。动态导入使用 import() 函数，返回一个 Promise 对象。
// 动态导入一个模块
import('./module').then((module) => {
console.log(module);
});总结
ES6 中的模块化规范是前端开发中重要的一部分，它可以帮助我们更好地组织代码、提高代码的可维护性和可扩展性。在使用模块化规范时，我们需要注意循环依赖和动态导入等问题，同时也需要注意代码的兼容性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d92bed2f5e1655d5d1aec