1. JavaScript 基础

  2. 函数进阶

  3. 深入数据和类型

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 错误处理

  10. 异步编程

  11. 网络请求

  12. 模块

  13. 练习

  14. 实例

  15. 工具与规范

模块的导出(export)与导入(import)有许多种语法。

导出

声明时同时导出

// 导出变量
export const MINUTE = 60

// 导出函数
export function sum(a, b) {
    return a + b
}

声明后导出

const MINUTE = 60

function sum(a, b) {
    return a + b
}

export { MINUTE, sum }

$$tip

如果一个变量没有导出,那么在其他模块中将会无法导入,也就无法访问。

$$

重命名导出

在导出的同时可以换一个名字。

const MINUTE = 60

function sum(a, b) {
    return a + b
}

export { MINUTE as fenzhong, sum as qiuhe }

默认导出

添加 default 关键字可以设置当前的默认导出。

function sum(a, b) {
    return a + b
}

// export { sum } // 正常导出

export default sum // 默认导出

默认导出的变量可以被直接导入使用而不用加大括号。、

// import { sum } from "./math.js" // 正常导入
import sum from "./math.js" // 默认导入

console.log(sum(5, 6)) // 11

$$tip

一个模块只能存在一个默认导出。

$$

导入

选择导入

将要导入的东西列在大括号中则可以使用, 没有导入的无法使用。

export function sum(a, b) {
    return a + b
}

export function sub(a, b) {
    return a - b
}
import { sum } from "./math.js"

console.log(sum(5, 6)) // 11
console.log(sub(5, 6)) // sub 未导入,报错

重命名导入

导入过程中可以对变量进行重命名。

export function sum(a, b) {
    return a + b
}
import { sum as qiuhe } from "./math.js"

console.log(qiuhe(5, 6)) // 11

默认导入

默认导出的模块可以使用默认导入。

export default function (a, b) {
    return a + b
}
import qiuhe from "./math.js"

console.log(qiuhe(5, 6)) // 11

总结

导出和导入的语法主体实在太多的,通常只使用最简单的导出导入语法即可,如有特殊需求再回顾此章节。