用模块封装代码

（一）模块（ Modules ）是使用不同方式加载的 JS 文件

1. 模块代码自动运行在严格模式下，并且没有任何办法跳出严格模式

2. 在模块的顶级作用域创建的变量，不会被自动添加到共享的全局作用域，它们只会在模块顶级作用域的内部存在；

3. 模块顶级作用域的 this 值为 undefined ；

4. 模块不允许在代码中使用 HTML 风格的注释（这是 JS 来自于早期浏览器的历史遗留特性）；

5. 对于需要让模块外部代码访问的内容，模块必须导出它们；

6. 允许模块从其他模块导入绑定。

（二）基本的导出 export

// 导出变量
export var color = 'red'
// 导出函数
export function getName () {
  return 'zhou'
}
// 导出类
export class Person {
  constructor() {
    super()
  }
}
// 先定义再导出
function getName(firstname, lastname) {
  return firstname + lastname
}
export { getName }

（三）导入 import

import 语句有两个部分，一是需要导入的标识符，二是需导入的标识符的来源模块

import { getName } from './index.js'
console.log('zhou','fb')

当从模块导入了一个绑定时，该绑定表现得就像使用了 const 的定义。这意味着你不能再定义另一个同名变量（包括导入另一个同名绑定），也不能在对应的 import 语句之前使用此标识符（也就是要受暂时性死区限制），更不能修改它的值。

（四）无论你对同一个模块使用了多少次 import 语句，该模块都只会被执行一次。在导出模块的代码执行之后，已被实例化的模块就被保留在内存中，并随时都能被其他import 所引用。

import { sum } from "./example.js";
import { multiply } from "./example.js";
import { magicNumber } from "./example.js

该模块只执行1次

（五）导入、导出重命名，使用as

导出重命名：

// 先定义再导出
function getName() {
  return 'zhou'
}
export { getName as getAllName}

导入重命名：

import { getName as getAllName } from './index.js'
console.log(getAllName)

（六）无绑定的导入

（七）script标签引入模块

 <script> 元素能够执行内联脚本，也能加载在 src 中指定的文件。为了支持模块，添加了 "module" 值作为type 的选项。将 type 设置为 "module" ，就告诉浏览器要将内联代码或是指定文件中的代码当作模块，而不是当作脚本。

<script src='./test.js' type='module'></script>
  <script type='module'>
    import { getName as getAllName } from './index.js'
    console.log(getAllName)
  </script>

不过直接在浏览器运行会显示跨域，需使用http-server来搭建一个服务器