在前端开发中，模块化是一个非常重要的概念。在 ES6 中，我们可以使用模块化的方式来组织我们的代码，这样可以让代码更加清晰、易于维护。本文将介绍 ES6 中的模块导出与导入技巧，希望能够帮助读者更好地理解和应用模块化。
导出模块
在 ES6 中，我们可以使用 export 关键字来导出模块。有两种导出模块的方式：默认导出和命名导出。
默认导出
默认导出是指模块中只导出一个值。在使用默认导出时，我们可以使用 export default 关键字来导出模块。例如：
// module.js
export default function add(a, b) {
return a + b;
}
// main.js
import add from './module.js';
console.log(add(1, 2)); // 3在上面的例子中，module.js 中只导出了一个函数 add，使用 export default 关键字来导出。在 main.js 中，我们使用 import 关键字来导入模块，并将 add 函数赋值给变量 add。这样我们就可以在 main.js 中使用 add 函数了。
需要注意的是，每个模块只能有一个默认导出。如果我们要导出多个值，就需要使用命名导出。
命名导出
命名导出是指模块中导出多个值。在使用命名导出时，我们可以使用 export 关键字来导出模块。例如：
-- -------------------- ---- ------- -- --------- ------ -------- ------ -- - ------ - - -- - ------ -------- ----------- -- - ------ - - -- - -- ------- ------ - ---- -------- - ---- -------------- ------------------ ---- -- - ----------------------- ---- -- -
在上面的例子中，module.js 中导出了两个函数 add 和 subtract，使用 export 关键字来导出。在 main.js 中，我们使用 import 关键字来导入模块，并使用花括号 {} 来指定要导入的函数。这样我们就可以在 main.js 中使用 add 和 subtract 函数了。
需要注意的是，命名导出的函数和变量名必须与导出时的名称相同。
导入模块
在 ES6 中，我们可以使用 import 关键字来导入模块。在导入模块时，我们可以使用以下语法：
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";其中，import defaultExport from "module-name" 是默认导入模块；import * as name from "module-name" 是导入模块中的所有命名导出；import { export1 } from "module-name" 是导入模块中的一个命名导出；import { export1 as alias1 } from "module-name" 是导入模块中的一个命名导出并使用别名。
下面是一个例子：
-- -------------------- ---- ------- -- --------- ------ -------- ------ -- - ------ - - -- - ------ -------- ----------- -- - ------ - - -- - -- ------- ------ - --- -- -- -------- - ---- -------------- ---------------- ---- -- - ----------------------- ---- -- -
在上面的例子中，我们从 module.js 中导入了 add 和 subtract 函数。在导入 add 函数时，我们使用了别名 a。这样我们就可以在 main.js 中使用 a 来调用 add 函数了。
总结
ES6 中的模块导出与导入技巧可以帮助我们更好地组织和管理代码。在使用模块化时，我们需要注意以下几点：
- 每个模块只能有一个默认导出。
- 命名导出的函数和变量名必须与导出时的名称相同。
- 在导入模块时，我们可以使用多种语法来导入模块中的内容。
希望本文能够对读者有所帮助，让大家更好地理解和应用 ES6 中的模块化技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d0563eadd4f0e0ff9570d8