1、<script>標(biāo)簽打開(kāi)defer或async屬性，腳本就會(huì)異步加載。渲染引擎遇到這一行命令，就會(huì)開(kāi)始下載外部腳本，但不會(huì)等它下載和執(zhí)行，而是直接執(zhí)行后面的命令。

defer與async的區(qū)別是：前者要等到整個(gè)頁(yè)面正常渲染結(jié)束，才會(huì)執(zhí)行；后者一旦下載完，渲染引擎就會(huì)中斷渲染，執(zhí)行這個(gè)腳本以后，再繼續(xù)渲染。一句話，defer是“渲染完再執(zhí)行”，async是“下載完就執(zhí)行”。另外，如果有多個(gè)defer腳本，會(huì)按照它們?cè)陧?yè)面出現(xiàn)的順序加載，而多個(gè)async腳本是不能保證加載順序的。

2、瀏覽器加載 ES6 模塊，也使用<script>標(biāo)簽，但是要加入type="module"屬性。

瀏覽器對(duì)于帶有type="module"的<script>，都是異步加載，不會(huì)造成堵塞瀏覽器，即等到整個(gè)頁(yè)面渲染完，再執(zhí)行模塊腳本，等同于打開(kāi)了<script>標(biāo)簽的defer屬性。

3、對(duì)于外部的模塊腳本，有幾點(diǎn)需要注意。

• 代碼是在模塊作用域之中運(yùn)行，而不是在全局作用域運(yùn)行。模塊內(nèi)部的頂層變量，外部不可見(jiàn)。
• 模塊腳本自動(dòng)采用嚴(yán)格模式，不管有沒(méi)有聲明use strict。
• 模塊之中，可以使用import命令加載其他模塊（.js后綴不可省略，需要提供絕對(duì) URL 或相對(duì) URL），也可以使用export命令輸出對(duì)外接口。
• 模塊之中，頂層的this關(guān)鍵字返回undefined，而不是指向window。也就是說(shuō)，在模塊頂層使用this關(guān)鍵字，是無(wú)意義的。
• 同一個(gè)模塊如果加載多次，將只執(zhí)行一次。

4、利用頂層的this等于undefined這個(gè)語(yǔ)法點(diǎn)，可以偵測(cè)當(dāng)前代碼是否在 ES6 模塊之中。

5、討論 Node 加載 ES6 模塊之前，必須了解 ES6 模塊與 CommonJS 模塊完全不同。

它們有兩個(gè)重大差異。

• CommonJS 模塊輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用。
• CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口。

6、在靜態(tài)分析階段，一個(gè)模塊腳本只要有一行import或export語(yǔ)句，Node 就會(huì)認(rèn)為該腳本為 ES6 模塊，否則就為 CommonJS 模塊。如果不輸出任何接口，但是希望被 Node 認(rèn)為是 ES6 模塊，可以在腳本中加一行語(yǔ)句export {};。

7、ES6 模塊之中，頂層的this指向undefined；CommonJS 模塊的頂層this指向當(dāng)前模塊，這是兩者的一個(gè)重大差異。

8、Node 采用 CommonJS 模塊格式，模塊的輸出都定義在module.exports這個(gè)屬性上面。在 Node 環(huán)境中，使用import命令加載 CommonJS 模塊，Node 會(huì)自動(dòng)將module.exports屬性，當(dāng)作模塊的默認(rèn)輸出，即等同于export default。?

轉(zhuǎn)載于:https://www.cnblogs.com/zczhangcui/p/6574877.html

總結(jié)

以上是生活随笔為你收集整理的js-ES6学习笔记-module（4）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。