在JavaScript开发中,我们经常需要使用模块化的方式来组织和管理我们的代码。在ES6及更高版本中,引入了import
和export
关键字,使得模块化开发变得更加方便和简洁。本文将介绍JS中各种导入和导出方式,并对标题进行美化。
1. 默认导出与默认导入
默认导出指的是一个模块中只有一个默认的导出项,而默认导入则是对应的导入方式。
1.1 默认导出
在一个模块中,我们可以使用export default
关键字来导出一个默认的项,例如:
// 模块A.js
const name = "John";
export default name;
1.2 默认导入
在另一个模块中,我们可以使用import
关键字加上as
关键字来导入默认项,例如:
// 模块B.js
import name from './模块A.js';
console.log(name); // 输出:John
2. 命名导出与命名导入
命名导出指的是一个模块中可以有多个导出项,并且需要通过名称来指定导入的内容。命名导入则是对应的导入方式。
2.1 命名导出
在一个模块中,我们可以使用export
关键字来导出一个或多个命名的项,例如:
// 模块C.js
export const name = "John";
export const age = 25;
2.2 命名导入
在另一个模块中,我们可以使用import
关键字来导入命名的项,例如:
// 模块D.js
import { name, age } from './模块C.js';
console.log(name); // 输出:John
console.log(age); // 输出:25
3. 混合导入和导出
在一个模块中,我们既可以使用默认导出,也可以使用命名导出。
3.1 混合导出
在一个模块中,我们既可以使用export default
来导出默认项,也可以使用export
来导出命名项,例如:
// 模块E.js
const name = "John";
export default name;
export const age = 25;
export const gender = "Male";
3.2 混合导入
在另一个模块中,我们可以使用混合的方式来导入,默认项使用import
关键字,命名项使用import
关键字加上as
关键字,例如:
// 模块F.js
import name, { age, gender as gen } from './模块E.js';
console.log(name); // 输出:John
console.log(age); // 输出:25
console.log(gen); // 输出:Male
以上就是JS中各种导入和导出方式的介绍。通过使用这些方式,我们可以轻松地进行模块化开发,并提高代码的可维护性和复用性。
参考链接:
本文来自极简博客,作者:心灵画师,转载请注明原文链接:JS中各种导入和导出方式