Module的加載實現

本系列屬於阮一峯老師所著的ECMAScript 6 入門學習筆記

---

瀏覽器加載

在HTML網頁中，瀏覽器經過script標籤加載JavaScript腳本。

瀏覽器加載外部腳本時，若是腳本體積很大，下載和執行的時間很長會形成瀏覽器堵塞，形成很很差的用戶體驗，因此瀏覽器容許腳本異步加載。

<script src="module.js" defer></script>
<script src="module.js" async></script>

<script>標籤打開defer或async屬性，腳本就會異步加載。渲染引擎遇到這一行命令，就會開始下載外部腳本，但不會等它下載和執行，而是直接執行後面的命令。

defer是"渲染完再執行"：等到整個頁面正常渲染結束，纔會執行。

async是"下載完就執行"：下載完腳本，中斷渲染，執行完腳本以後再繼續渲染。

加載規則

瀏覽器加載ES6模塊，也使用<script>標籤，可是要加入type="module"屬性。

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

瀏覽器對於帶有type="module"的<script>，都是異步加載，不會形成堵塞瀏覽器，即等到整個頁面渲染完，再執行模塊腳本，等同於defer屬性。

這時，也能夠加上async屬性，只要加載完成，渲染引擎就會中斷渲染當即執行，執行結束以後再回復渲染。

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

對於外部的模塊腳本（上例是foo.js），有幾點須要注意。

• 代碼是在模塊做用域之中運行，而不是在全局做用域運行。模塊內部的頂層變量，外部不可見。
• 模塊腳本自動採用嚴格模式，無論有沒有聲明use strict。
• 模塊之中，能夠使用import命令加載其餘模塊（.js後綴不可省略，須要提供絕對 URL 或相對 URL），也能夠使用export命令輸出對外接口。
• 模塊之中，頂層的this關鍵字返回undefined，而不是指向window。也就是說，在模塊頂層使用this關鍵字，是無心義的。
• 同一個模塊若是加載屢次，將只執行一次。

import utils from './utils'

const x = 1

console.log(x === window.x) // fasle
console.log(this === undefined) // true

delete x // 句法錯誤，嚴格模式禁止刪除變量