用模塊封裝代碼

（一）模塊（ 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來搭建一個服務器