ES6学习笔记（十四）module的简单使用
2023-06-13 09:15:30 时间
本文最后更新于 128 天前，其中的信息可能已经有所发展或是发生改变。
1、前言
module模块机制是es6新引入的，它解决了作用域的问题，使代码更加规范和结构化。 下面简单的使用一下。
2、基本使用
2.1 模块和脚本的区别
模块代码运行在严格模式下，并且没有任何办法跳出严格模式。
在模块的顶级作用域创建的变量，不会影响到全局作用域，它们只会在模块顶级作用域的内部存在。
模块顶级作用域的this值为undefined。
模块不允许在代码中使用HTML风格的注释。
模块允许到处需要外部引用的方法或变量。
模块可以从其他模块导入绑定。
2.2 几种使用方法
2.2.1 导入单个（JS文件中）
methods.mjs
function mul(num1, num2) {
return num1 * num2
}
export { mul }test.js
import { mul } from "./methods.mjs";
console.log(mul(2, 3));2.2.2 导入单个（浏览器中）
HTML中 方式一：
//直接通过script标签引用，注意type选择module
<script type="module" src="test.js"></script>运行结果： 6
方式二：
<script type="module">
import { mul } from "./methods.mjs"
console.log("两个数的积是：", mul(2,3));
</script>方式三：
<script type="module">
import { mul as cj } from "./methods.mjs"
console.log("两个数的积是：", cj(2,3));
</script>运行结果： 6
2.2.3 导入多个
methods.mjs
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中
<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
使用命名空间：
<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"