成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

X1nFLY / 2281人閱讀

摘要:而支持的瀏覽器,它會自動不去執(zhí)行有關(guān)鍵字的。這些瀏覽器有默認(rèn)加載方式的加載方式默認(rèn)使用的加載方式。需要在從服務(wù)器返回的上顯示的給予有效的聲明不同于傳統(tǒng)的必須向瀏覽器提供有效的。

感謝英文原作者 Jake Archibald 的技術(shù)分享

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

Safari 10.1.

Chrome 61.

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

Edge 16.

ES6 import 和 export 在瀏覽器當(dāng)中的使用 1.顯示聲明type="module"
script 里面要加  type="module", 這樣瀏覽器才會把相關(guān)的代碼當(dāng)作ES6的module 來對待
2.不能寫“裸”路徑如:

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

3.如何向下兼容
使用 "nomodule" 關(guān)鍵字來實(shí)現(xiàn)瀏覽器的向下兼容

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

唯一的問題,還有一類瀏覽器,它支持 type="module" 的 ES6特性,但是它不支持nomodule關(guān)鍵字。也就是說,即使有nomodule標(biāo)識,它還是會去下載并且執(zhí)行這個js。即使它已經(jīng)執(zhí)行了 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.默認(rèn)加載方式
type=“module”的加載方式默認(rèn)使用 defer的加載方式。

關(guān)于defer 和 async :defer和async 都是異步加載代碼。但是defer要等到整個頁面在內(nèi)存中正常渲染結(jié)束(DOM 結(jié)構(gòu)完全生成,以及其他腳本執(zhí)行完成),才會執(zhí)行。 async一旦下載完,渲染引擎就會中斷渲染,執(zhí)行這個腳本以后,再繼續(xù)渲染。 一句話,defer是“渲染完再執(zhí)行”,async是“下載完就執(zhí)行”。另外,如果有多個defer腳本,會按照它們在頁面出現(xiàn)的順序加載,而多個async腳本是不能保證加載順序的。








內(nèi)聯(lián)的 








而如果是傳統(tǒng)的script 內(nèi)聯(lián)js,調(diào)用的那個js文件在后面的話,會報錯。





5.支持async的加載方式
type="module" 也可以使用 async 的方式進(jìn)行加載(包括其內(nèi)聯(lián)的 import),等同普通 js 采用 async 進(jìn)行加載的方式

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

6.只執(zhí)行一次






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

7.關(guān)于CORS
type="module" 默認(rèn)不支持跨域,這一點(diǎn)兒與傳統(tǒng)js或圖片完全不一樣。傳統(tǒng)js或圖片默認(rèn)就是支持跨域的。如果你想 type="module" 支持跨域。需要在從服務(wù)器返回的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

不同于傳統(tǒng)的 ,

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

最后還想說
沒想到任何一個小功能,仔細(xì)去研究都有這么多的知識點(diǎn)。碼文不易,各位給個贊可好。
轉(zhuǎn)載請注明出處

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/94197.html

相關(guān)文章

  • 覽器使用ES6模塊功能 import export

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

    roland_reed 評論0 收藏0
  • ES6 學(xué)習(xí)筆記

    摘要:類的屬性和屬性在上一篇面向?qū)ο缶幊讨形覀円呀?jīng)了解到一個實(shí)例化對象會有一個指向構(gòu)造函數(shù)的屬性。子類的屬性,表示構(gòu)造函數(shù)的繼承,總是指向父類。完成構(gòu)造函數(shù)繼承的實(shí)質(zhì)如下第二條對原型鏈完成方法的繼承,實(shí)質(zhì)如下另外還有還有三種特殊情況。 介紹 ECMAScript 6 在接下來的一段時間內(nèi)將成為 ECMAScript的一個標(biāo)準(zhǔn)。這個標(biāo)準(zhǔn)預(yù)計在今年的時候就會被簽署,不管在Github,還是在很多...

    alogy 評論0 收藏0
  • Nodejs模塊加載與ES6模塊加載實(shí)現(xiàn)

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

    陳江龍 評論0 收藏0
  • ES6—class與模塊化(9)

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

    weij 評論0 收藏0
  • javascript模塊

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

    zzbo 評論0 收藏0

發(fā)表評論

0條評論

X1nFLY

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<