ES6知識點整理之----Module----加載實現

瀏覽器加載

傳統方法

<!-- 頁面內嵌的腳本 -->
<script type="application/javascript">
  // module code
</script>

<!-- 外部腳本 -->
<script type="application/javascript" src="path/to/myModule.js">
</script>

//瀏覽器腳本的默認語言是 JavaScript，type="application/javascript"能夠省略。

<script>標籤打開defer或async屬性，腳本就會異步加載。

• defer：渲染完再執行，有多個defer腳本時，按頁面出現的順序加載
• async：下載完就執行，哪一個加載完成了就執行哪一個模塊

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

ES6模塊加載

也使用<script>標籤，可是要加入type="module"屬性。

<script type="module" src="./foo.js"></script>

瀏覽器對於帶有type="module"的<script>，都是異步加載。等到整個頁面渲染完，再執行模塊腳本，等同於打開了<script>標籤的defer屬性。

<script type="module" src="./foo.js"></script>
<!-- 等同於 -->
<script type="module" src="./foo.js" defer></script>

ES6 模塊也容許內嵌在網頁中，語法行爲與加載外部腳本徹底一致。

<script type="module">
  import utils from "./utils.js";

  // other code
</script>

ES6 模塊與 CommonJS 模塊的差別

• CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
• CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。除非寫成一個函數，才能獲得內部變更後的值。

ES6 模塊遇到模塊加載命令import，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被加載的那個模塊裏面去取值。

因爲 ES6 輸入的模塊變量，只是一個「符號鏈接」，因此這個變量是隻讀的，對它進行從新賦值會報錯。

Node 加載（略）