JavaScript基础知识：模块（Module）

一、模块核心功能

1. 始终默认使用 “use strict”

<script type="module">
  a = 5; // 报错 error
</script>

2.模块级作用域

一个模块中的顶级作用域变量和函数在其他脚本中是不可见的

<script type="module">
  // 变量仅在这个 module script 内可见
  let user = "John";
</script>

<script type="module">
  alert(user); // Error: user is not defined
</script>

3.模块代码仅在第一次导入时被解析

如果同一个模块被导入到多个其他位置，那么它的代码仅会在第一次导入时执行，然后将导出（export）的内容提供给所有的导入
例子如图：

注：
模块只被执行一次。生成导出，然后它被分享给所有对其的导入，所以如果某个地方修改了 admin 对象，其他的模块也能看到这个修改。

4.在一个模块中，“this” 是 undefined

<script>
  alert(this); // window
</script>

<script type="module">
  alert(this); // undefined
</script>

5.浏览器特定功能

在浏览器中，模块脚本是延迟的

• 下载外部模块脚本

二、导入和导出

1. 导出（ export ）

1）声明前导出

//导出数组
export let Arr = [1,2,3];

//导出 const 声明的变量
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 导出类
export class User{
	constructor(name){
		this.name = name;
	}
}

注： 导出 class/function 后没有分号

2）导出与声明分开

// say.js
function sayHi(user){
	alert(`Hello, ${user}!`);
}
function sayBye(user){
	alert(`Bye, ${user}!`);
}

export {sayHi, sayBye};  // 导出变量列表

3）Export default

在实际中，主要有两种模块。

• 包含库或函数包的模块，像上面的 say.js。
• 声明单个实体的模块，例如模块 user.js 仅导出 class User

// user.js
export default class User { // 只需要添加 "default" 即可
  constructor(name) {
    this.name = name;
  }
}

注：

• 每个文件可能只有一个 export default

2. 导入（ import ）

导入的两种写法：

第一种： 把导入的东西列在花括号中 == import {…}==

//main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); //  Hello,John!
sayBye('John'); //  Bye,John!

第二种： 若需要导入的过多，则使用 import * as

//main.js
import * as say from './say.js';

say.sayHi('John'); //  Hello,John!
say.sayBye('John'); //  Bye,John!

我们也可以使用 as 让导入具有不同的名字：

// main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

注：

1） 在导入时，默认的导出不需要花括号；而命名的导出则需要花括号；

// main.js
import User from './user.js'; // 不需要花括号 {User}，只需要写成 User 即可

new User('John');

2）命名的导出会强制我们使用正确的名称进行导入

import {User} from './user.js';
// 导入 {MyUser} 不起作用，导入名字必须为 {User}

3）对于默认的导出，我们总是在导入时选择名称：

import User from './user.js'; // 有效
import MyUser from './user.js'; // 也有效
// 使用任何名称导入都没有问题

以上内容参考于 https://zh.javascript.info/import-export ，在此学习记录！！！