当我们的网站越来越大时，便需要把 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 文件，他们之间是相互独立的，没有导出的变量无法被导入，更无法被使用。

$$