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

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使用表達式、變量等操做；由於 這些都是在運行時執行，並非編譯時(靜態)執行