深刻理解ES6之《用模塊封裝代碼》

什麼是模塊

模塊是自動運行在嚴格模式下而且沒有辦法退出運行的Javascript代碼

1. 在模塊的頂部this的值是undefined
2. 其模塊不支持html風格的代碼註釋
   除非用default關鍵字，不然不能用這個語法導出匿名函數或類

任何未顯示導出的變量、函數或類都是模塊私有的，沒法從模塊外部訪問

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

import大括號表示給定模塊導入的綁定，文件必須把文件擴展名也加上擴展名
導入綁定的列表看起來與解構對象很類似，但它不是
當從模塊中導入一個綁定時，它就好像使用const定義的同樣
無論是在import語句中把一個模塊寫了多少次，該模塊將只招待一次。導入模塊的代碼執行後，實例化過的模塊被保存在內存中，只要另外一個import語句引用它就能夠重複使用它
export和import的一個重要的限制是它們必須在其它語句和函數以外使用，也就是說不容許出如今if語句中，不能有條件導出或以任何方式動態導出。模塊語法存在的一個緣由是讓js引擎靜態肯定哪些能夠導出，所以只能在模塊頂部使用export
export、import均可以用as來重命名導出的函數名
爲默認導出值指定標識符指定重命名語法：

function sum(num1, num2) {
  return num1 + num2
}
//export default sum
export { sum as default }

看下面這個例子：

export let color = 'red'
export default function (num1, num2) {
  return num1 + num2
}


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

import 和export 組合使用

export {sum as add } from './example.js'

<script type="module"執行時自動應用defer屬性，模塊文件開始下載，直到文檔被徹底解析模塊纔會執行，模塊按照它們出如今html文件中的順序執行
async屬性也能夠應用在模塊上，async屬性會讓模塊以相似於腳本的方式執行，惟一的區別是在模塊執行前，模塊中全部的導入資源必須下載下來，這能夠確保只有當模塊招待所需的全部資源都下載完成後才執行模塊，但不能保證是模塊的招待時機

瀏覽器模塊說明符解析

1. 以/開頭的解析爲以根目錄開始
2. 以./開頭的解析爲以當前目錄開始
3. 以../開頭的解析爲從父目錄開始