1、前言

module模块机制是es6新引入的，它解决了作用域的问题，使代码更加规范和结构化。
下面简单的使用一下。

2、基本使用

2.1 模块和脚本的区别

  • 模块代码运行在严格模式下，并且没有任何办法跳出严格模式。
  • 在模块的顶级作用域创建的变量，不会影响到全局作用域，它们只会在模块顶级作用域的内部存在。
  • 模块顶级作用域的this值为undefined。
  • 模块不允许在代码中使用HTML风格的注释。
  • 模块允许到处需要外部引用的方法或变量。
  • 模块可以从其他模块导入绑定。

2.2 几种使用方法

2.2.1 导入单个（JS文件中）

methods.mjs

1
2
3
4
function mul(num1, num2) {
    return num1 * num2
}
export { mul }

test.js

1
2
import { mul } from "./methods.mjs";
console.log(mul(2, 3));

2.2.2 导入单个（浏览器中）

HTML中
方式一：

1
2
//直接通过script标签引用，注意type选择module
<script type="module" src="test.js"></script>

运行结果：
6

方式二：

1
2
3
4
<script type="module">
    import { mul } from "./methods.mjs"
    console.log("两个数的积是：", mul(2,3));
</script>

方式三：

1
2
3
4
<script type="module">
    import { mul as cj } from "./methods.mjs"
    console.log("两个数的积是：", cj(2,3));
</script>

运行结果：
6

2.2.3 导入多个

methods.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export var color = "blue"
export let name = "Jerry"
export const count = 6
export function sum(num1, num2) {
    return num1 + num2
}
function sub(num1, num2) {
    return num1 - num2
}
function mul(num1, num2) {
    return num1 * num2
}
export { sub, mul }

// out 为模块的命名空间
let out = {
    data: { color, name, count },
    foo: sum,
    foo2: sub,
    foo3: mul
}
export { out }

HTML中

1
2
3
4
5
6
<script type="module">
    import { sum, sub, mul} from "./methods.mjs"
    console.log("两个数的和是：", sum(3, 2));
    console.log("两个数的差是：", sub(3, 2));
    console.log("两个数的积是：", mul(3, 2));
</script>

运行结果：
两个数的和是： 5
两个数的差是： 1
两个数的积是： 6

使用命名空间：

1
2
3
4
5
6
7
8
9
<script type="module">
    import { out } from "./methods.mjs"
    console.log("两个数的和是：", out.foo(3, 2));
    console.log("两个数的差是：", out.foo2(3, 2));
    console.log("两个数的积是：", out.foo3(3, 2));
    console.log("颜色是", out.data.color);
    console.log("名字是", out.data.name);
    console.log("数量是", out.data.count);
</script>

运行结果：
两个数的和是： 5
两个数的差是： 1
两个数的积是： 6
颜色是 blue
名字是 Jerry
数量是 6

若要完全导入一个模块，使用 import * as methods from “./methods.mjs”