用模組封裝程式碼

在模組頂部建立的變數不會自動被新增到全域性共享作用域（模組頂部this的值為undefined），必須匯出後，外部程式碼才可訪問。

瀏覽器中使用模組

<script>的type屬性缺失或者包含一個javascript內容型別（如，text/javascript）時作為指令碼載入；type屬性值為“module”時支援模組載入（如果瀏覽器不支援，會自動向後相容）。

<script type="text/javascript">
  var a = 'a';
</script>
<script type="module"
 
>
  var b = 'b';
</script>

<script>
    console.log(window.a);  // a
    console.log(window.b);  // undefined
</script>

注意：type="module"會自動應用defer屬性。
也可將模組作為Worker載入，let worker = new Worker("module.js", {type: "module"})。Worker指令碼只能從引用的網頁相同的源載入；Worker模組不會完全受限（可以載入並訪問具有適當的跨域資源共享頭的檔案）

匯出

• 匯出的函式和類宣告需要有一個名稱，除非用default關鍵詞，否則不能匯出匿名函式或類。同時需要注意匯出變數名或者函式名稱需要增加{}

const foo = 'bar';
export foo;   // Error Unexpected token, expected { 
export {foo}; // Correct

• 匯入、匯出時可以進行重新命名

export { sum as add }
import { add as sum }

• 一個模組只能設定一個預設匯出值

匯入

• import必須包含匯入的識別符號和從哪個模組匯入。注意，匯入繫結的列表看起來與解構物件很相似，但其作用不一樣，其更像是使用const定義一樣。

import { identifier1, identifier2} from './example.js'
identifier1 = 1; // Error

為了相容更多瀏覽器和Node環境，匯入模組路徑之前要包含/、./、../來表示匯入的檔案

• 匯入整個模組，然後所有匯出都可以作為物件（名稱空間）的屬性使用

import * as example from './example.js'
example.identifier1;

• 不管在import語句中把一個模組寫了多少次，該模組只執行一次。匯入模組的程式碼執行後，例項化過的模組被儲存在記憶體中，其他import語句可以重複使用它。如果一個應用程式中的其他模組也對同一模組匯入，那麼這些模組使用相同的匯入例項，這就是util.js中new Vue()全域性通用的原因（在Vue專案中文名經常會藉助此實現兄弟元件傳值）！

import { identifier1 } from './example.js'
import { identifier2 } from './example.js'

上述example只被載入一次！

/*person.js*/
var name = 'ligang'
function setName(newName) {
  name = newName;
}
export {setName, name};

<!--person1.vue-->
<template>
  <div>
    <p>{{name}}</p>
    <button @click="setName">設定名稱</button>
  </div>
</template>
<script>
  import {name, setName} from './person.js'
  export default {
    data() {
      return {
        name: name
      }
    },
    methods: {
      setName() {
        // name = 'lg';
        setName('lg')
      }
    }
  }
</script>

<!--person2.vue-->
<template>
  <div>
    <p>{{name}}</p>
  </div>
</template>
<script>
  import {name} from './person.js'
  export default {
    data() {
      return {
        name: name
      }
    }
  }
</script>

在person1.vue中點選“設定名稱”按鈕，切換到person2.vue，name名稱會變為‘lg’！注意，不能在person1.vue中直接修改name，因為import語句為變數、函式和類建立的是隻讀繫結，而不是像正常變數一樣簡單地引用原始繫結！

• import語句中預設值必須放到非預設值前面

import sum, {color} from './example.js'

上述，sum為預設值，color為非預設值

• 無繫結匯入，只執行程式碼，常用於建立polyfill和shim

import './example.js'