ES6 模块的名称绑定和默认导出-JavaScript中文网-JavaScript教程资源分享门户

ES6 模块是 JavaScript 中一种新的模块化方式，它提供了一种更加优雅和简洁的方式来组织和管理代码。在 ES6 模块中，我们可以通过名称绑定和默认导出来实现模块的导入和导出。

名称绑定

在 ES6 模块中，我们可以通过 import 关键字来导入其他模块中的内容。在导入的过程中，我们可以通过名称绑定来指定需要导入的内容。例如：

// 导入模块中的 foo 和 bar 变量
import { foo, bar } from './module.js';

在上面的代码中，我们使用了名称绑定来导入了模块中的 foo 和 bar 变量。这样，我们就可以在当前模块中使用这些变量了。

除了导入单个变量外，我们还可以使用名称绑定来导入整个模块。例如：

// 导入整个模块
import * as module from './module.js';

// 使用模块中的变量
console.log(module.foo);
console.log(module.bar);

在上面的代码中，我们使用了名称绑定来导入了整个模块，并将其命名为 module。这样，我们就可以使用 module 对象来访问模块中的所有变量了。

默认导出

除了名称绑定外，ES6 模块还支持默认导出。默认导出是指在一个模块中，只有一个默认的导出项。在导入时，我们可以省略导出项的名称，直接使用默认导出的内容。例如：

// 导出默认的变量
export default foo;

// 导入默认的变量
import myFoo from './module.js';

在上面的代码中，我们使用 export default 关键字来导出了一个默认的变量 foo。在导入时，我们使用 import 关键字并将其命名为 myFoo。这样，我们就可以直接使用 myFoo 变量来访问默认导出的内容了。

需要注意的是，每个模块只能有一个默认导出项。如果一个模块中同时存在名称绑定和默认导出，我们可以通过以下方式来导入：

// 导入默认的变量和名称绑定
import myFoo, { bar } from './module.js';

在上面的代码中，我们同时导入了默认的变量和名称绑定。这样，我们就可以在当前模块中使用 myFoo 和 bar 变量了。

总结

ES6 模块提供了一种更加优雅和简洁的方式来组织和管理代码。通过名称绑定和默认导出，我们可以轻松地导入和导出模块中的内容。在实际开发中，我们应该根据实际需求来选择使用名称绑定还是默认导出，以便更好地组织和管理代码。

示例代码

下面是一个使用 ES6 模块的示例代码：

// javascriptcn.com 代码示例
// module.js
export const foo = 'foo';
export const bar = 'bar';
export default 'default';

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

console.log(foo); // 输出：foo
console.log(bar); // 输出：bar
console.log(myDefault); // 输出：default

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656bfce5d2f5e1655d454917