1. JavaScript 基础

  2. 函数进阶

  3. 深入数据和类型

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 错误处理

  10. 异步编程

  11. 网络请求

  12. 模块

  13. 练习

  14. 实例

  15. 工具与规范

当我们的网站越来越大时,便需要把 JavaScript 代码拆分到多个文件中进行管理,拆分后的代码便是一个模块。

在以前已经有一些社区开发的组织代码到模块的方式:

  • AMD
  • CommonJS
  • UMD

这些方式仍然出现在以前的老项目中,如果需要维护相关的老项目可以尝试了解一下,不然的话没必要再学习了。

认识模块

假设我们有一个文件 math.js 里面定义了一个求和的函数。

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

此时另一个文件就可以导入并使用这个函数。

import { sum } from "./math.js"
console.log(sum(5, 6)) // 11

如果我们的代码写在 <script> 标签中,那么 <script> 标签必须加上 type="module" 属性。

<script type="module">
    import { sum } from "./math.js"
    console.log(sum(5, 6)) // 11
</script>

模块引入与 JavaScript 文件引入的区别

之前学过,使用 script 标签也可以引入一个 JS 文件。

<script src="./math.js"></script>

它与模块引入的方式有以下区别。

区别点 module 一般引入
最外层 this undefined window
作用域 独立的作用域 共用全局作用域
多次导入 解析一次 解析多次
严格模块 默认开启 默认关闭
部分引入 可以部分引入 只能完全引入

$$tip

使用 script 标签引入 JS 文件的行为其实等同于把多个 JS 文件的代码复制粘贴在一起。

而使用 模块化 管理的 JS 文件,他们之间是相互独立的,没有导出的变量无法被导入,更无法被使用。

$$