在瀏覽器中使用ES6的模塊功能 import 及 export

X1nFLY 發布于2019-08-22 16:16 / 2272人閱讀

摘要：而支持的瀏覽器，它會自動不去執行有關鍵字的。這些瀏覽器有默認加載方式的加載方式默認使用的加載方式。需要在從服務器返回的上顯示的給予有效的聲明不同于傳統的必須向瀏覽器提供有效的。

感謝英文原作者 Jake Archibald 的技術分享

各個瀏覽器對于ES6模塊 import 、 export的支持情況

Safari 10.1.

Chrome 61.

Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config.

Edge 16.

ES6 import 和 export 在瀏覽器當中的使用 1.顯示聲明type="module"

script 里面要加  type="module", 這樣瀏覽器才會把相關的代碼當作ES6的module 來對待

2.不能寫“裸”路徑如：

直接寫 "utils.js" 會報錯
你可以寫絕對路徑和相對路徑，但是不能直接寫文件名，即使是同一層級下面的文件。也要加上 "./name.js"
文件名后綴 .js 必須要有，不然瀏覽器無法識別路徑。

3.如何向下兼容

使用 "nomodule" 關鍵字來實現瀏覽器的向下兼容

我是這樣理解的，老的瀏覽器本身不會識別type="module" js，也就不會去有執行有type="module" 的js代碼（但是還是會下載的哈）。
也不識別 nomodule 關鍵字，所以它會忽略nomodule，即正常執行這個有nomodule標識的js。
而支持type=“module”的瀏覽器，它會自動不去執行有nomodule關鍵字的js。甚至連下都不去下載。
所以向下兼容的功能就走通了（這個大家用不同的瀏覽器試試，立刻可以明白）

唯一的問題，還有一類瀏覽器，它支持 type="module" 的 ES6特性，但是它不支持nomodule關鍵字。也就是說，即使有nomodule標識，它還是會去下載并且執行這個js。即使它已經執行了 type=“module”的 js。
這些瀏覽器有

Firefox doesn"t support nomodule (issue). Fixed in Firefox nightly!

Edge doesn"t support nomodule (issue). Fixed in Edge 16!

Safari 10.1 doesn"t support nomodule. Fixed in Safari 11!

4.默認加載方式

type=“module”的加載方式默認使用 defer的加載方式。

關于defer 和 async ：defer和async 都是異步加載代碼。但是defer要等到整個頁面在內存中正常渲染結束（DOM 結構完全生成，以及其他腳本執行完成），才會執行。 async一旦下載完，渲染引擎就會中斷渲染，執行這個腳本以后，再繼續渲染。一句話，defer是“渲染完再執行”，async是“下載完就執行”。另外，如果有多個defer腳本，會按照它們在頁面出現的順序加載，而多個async腳本是不能保證加載順序的。

內聯的

而如果是傳統的script 內聯js，調用的那個js文件在后面的話，會報錯。

5.支持async的加載方式

type="module" 也可以使用 async 的方式進行加載(包括其內聯的 import)，等同普通 js 采用 async 進行加載的方式

Browser issues
Firefox doesn"t support async on inline module scripts (issue)

6.只執行一次

Browser issues
Edge executes modules multiple times (issue). Fixed, but not yet shipped (expect Edge 17 to ship with the fix).

7.關于CORS

type="module" 默認不支持跨域，這一點兒與傳統js或圖片完全不一樣。傳統js或圖片默認就是支持跨域的。如果你想 type="module" 支持跨域。需要在從服務器返回的header上顯示的給予有效的 CORS聲明

Access-Control-Allow-Origin: *

Browser issues
Firefox fails to load the demo page (issue).
Edge loads module scripts without CORS headers (issue). Fixed in Edge 16!

9.Mime-types

不同于傳統的 ,

Browser issues
Edge executes scripts with invalid MIME types (issue).

最后還想說

沒想到任何一個小功能，仔細去研究都有這么多的知識點。碼文不易，各位給個贊可好。
轉載請注明出處

云服務器 GPU云服務器在瀏覽器中使用webrtc 怎樣在oss中使用帶ip限制的訪問控制單獨使用webrtc中視頻模塊 webrtc可以在哪些瀏覽器使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94197.html

在瀏覽器中使用ES6的模塊功能 import 及 export

摘要：而支持的瀏覽器，它會自動不去執行有關鍵字的。這些瀏覽器有默認加載方式的加載方式默認使用的加載方式。需要在從服務器返回的上顯示的給予有效的聲明不同于傳統的必須向瀏覽器提供有效的。感謝英文原作者 Jake Archibald 的技術分享各個瀏覽器對于ES6模塊 import 、 export的支持情況 Safari 10.1. Chrome 61. Firefox 54 – beh...

roland_reed 2019-08-02 10:12 評論0 收藏0
ES6 學習筆記

摘要：類的屬性和屬性在上一篇面向對象編程中我們已經了解到一個實例化對象會有一個指向構造函數的屬性。子類的屬性，表示構造函數的繼承，總是指向父類。完成構造函數繼承的實質如下第二條對原型鏈完成方法的繼承，實質如下另外還有還有三種特殊情況。介紹 ECMAScript 6 在接下來的一段時間內將成為 ECMAScript的一個標準。這個標準預計在今年的時候就會被簽署，不管在Github,還是在很多...

alogy 2019-08-21 10:33 評論0 收藏0
Nodejs模塊加載與ES6模塊加載實現

摘要：以后需要引用模塊的變量函數類就在這個模塊對象的取出，即使再次進來模塊也不會重新執行，只會從緩存獲取。所以對相同模塊的再次加載都是優先緩存方式，核心模塊的緩存檢查依然優先于文件模塊。內建模塊導出啟動會生成全局變量，提供方法協助加載內建模塊。原始時代作為一門語言的引入代碼方式，相較于其他如PHP的include和require，Ruby的require，Python的import機制，...

陳江龍 2019-08-26 10:38 評論0 收藏0
ES6—class與模塊化（9）

摘要：中的模塊功能主要由兩個命令構成和。命令用于規定模塊的對外接口，命令用于輸入其他模塊提供的功能，二者屬于相輔相成一一對應關系。文件大括號里面的變量名，必須與被導入模塊對外接口的名稱相同。每一個模塊內聲明的變量都是局部變量，不會污染全局作用域。 JavaScript語言自創立之初，一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。很多編程語...

weij 2019-08-26 13:45 評論0 收藏0
javascript中的模塊化

摘要：所謂的模塊也叫元件或者組件，可以理解為可以服用的功能代碼。如遵循規范的和遵循規范的中的模塊化。是在文件中引模塊的。如果引用一個以上的組件，就可以用把這一組組件放在數組中就可以了，如下，，，二中的模塊化。所謂的模塊也叫元件或者組件，可以理解為可以服用的功能代碼。比如說a頁面用功能了，b頁面用到了這功能了，所以我們可以把這個功能抽為組件，便于服用。那么javascript中的組件化如何使...

zzbo 2019-08-22 17:21 評論0 收藏0