導入 運行時 發現 let 腳本文件 推薦 必須 哪些 書寫

es6之前，社區模塊加載方案，主要是CommonJS(用於服務器)和AMD(用於瀏覽器) 而es6實現的模塊解決方案完全可以替代CommonJS和AMD ES6模塊設計思想：盡量靜態化，在編譯時就能確定模塊的依賴關系，以及輸入輸出的變量 而CommonJS和AMD模塊，都只能在運行時確定這些東西 同時：模塊中使用的是嚴格模式

<script type="module" src="es7-1.js" ></script>
  <script type="module" src="es7-2.js" ></script>
  <!-- 頁面渲染完成再去加載，相當於設置了defer，不會造成瀏覽器阻塞 -->

用script引入模塊文件時，需要加上type="module"

這裏補充一下defer和async屬性：

1 <script src="a.js" async></script>

設置了async屬性後，瀏覽器加載頁面的過程是：渲染引擎開始渲染，發現設置async屬性的腳本，繼續渲染，同時下載腳本，當腳本下載完成，渲染引擎將瀏覽器控制權腳本JS引擎，執行腳本。因為可能會遇見多個腳本，同時腳本的下載時間有長有短，所以腳本執行順序可能不是腳本書寫的順序！

設置defer屬性，瀏覽器的工作情況：前面與上面類似，不過當發現腳本，渲染引擎會繼續渲染頁面，直到頁面渲染完成，再將瀏覽器控制權交給JS引擎

，執行腳本；所以腳本執行順序與腳本書寫的順序一致。這種與在頁面底部引入的腳本文件作用類似！

如果均未設置以上屬性，瀏覽器工作情況：渲染引擎開始渲染，發現腳本，將瀏覽器控制權腳本js引擎，下載腳本，執行腳本，結束後JS引擎再將瀏覽器控制權交給渲染引擎，渲染引擎繼續渲染。。。

export：導出變量，函數，類等

第一種寫法：

1 export let name=‘apple‘
2 export let age=100
3 export let year=2017

第二種寫法：更推薦（在最下面使用export導出，能看出究竟哪些變量或其他類型被導出，更直觀）

1 let name1=‘apple‘
2
 
 let age1=100
3 let year1=2017
4 export {name1,age1,year1}

還可以用as重命名，類似sql語句

1 export {name1 as a,age1 as b}

註意下面這種情況：

1 let a1=function (){}
2 // export a1//錯誤的寫法
3 export {a1}

也就是說export時要提供對外的接口

1 export function f(){}//正確寫法
2 function f1(){}
3 // export f1//錯誤寫法

同時註意：export必須放在模塊頂層，不得放入塊級作用域內(報錯),因為無法做靜態優化; export default可以用在匿名函數之前；當然也可以放在不是匿名函數之前

1 export default function(){}
2 // 而導入時，可以import abc from ‘./es7-2‘ 註意此時的abc沒有用大括號括起來，abc可以為任意有效變量名
3 // 總體來說export default後， import後面可以加上任意變量名，比較方便

import：當export導出了模塊的對外接口，此時就可以用import導入接口(加載導出的模塊)

1 import {name1,age1,year1} from ‘./es7-1.js‘
2 console.log(name1,age1,year1)//apple 100 2017
3 // form後面路徑可以是相對路徑也可以是絕對路徑，.js後綴可以省略
4 // 但是我開apache時，省略js報錯了，同時如果script是行內引用的話，必須加.js後綴，所以建議任何時候都加上後綴

同理import導入時也可以用as重命名:

1 import {name1 as a1}

同時由於import是靜態執行,所以不得對import使用表達式、變量等操作；因為這些都是在運行時執行，並不是編譯時(靜態)執行

es6（六）：module模塊（export，import）