国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

X1nFLY / 2280人閱讀

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

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

各個(gè)瀏覽器對于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", 這樣瀏覽器才會(huì)把相關(guān)的代碼當(dāng)作ES6的module 來對待
2.不能寫“裸”路徑如：

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

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

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

唯一的問題，還有一類瀏覽器，它支持 type="module" 的 ES6特性，但是它不支持nomodule關(guān)鍵字。也就是說，即使有nomodule標(biāo)識(shí)，它還是會(huì)去下載并且執(zhí)行這個(gè)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要等到整個(gè)頁面在內(nèi)存中正常渲染結(jié)束（DOM 結(jié)構(gòu)完全生成，以及其他腳本執(zhí)行完成），才會(huì)執(zhí)行。 async一旦下載完，渲染引擎就會(huì)中斷渲染，執(zhí)行這個(gè)腳本以后，再繼續(xù)渲染。 一句話，defer是“渲染完再執(zhí)行”，async是“下載完就執(zhí)行”。另外，如果有多個(gè)defer腳本，會(huì)按照它們在頁面出現(xiàn)的順序加載，而多個(gè)async腳本是不能保證加載順序的。









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

而如果是傳統(tǒng)的script 內(nèi)聯(lián)js，調(diào)用的那個(gè)js文件在后面的話，會(huì)報(bào)錯(cuò)。
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).

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94197.html

相關(guān)文章

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

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

    roland_reed 評(píng)論0 收藏0

  • ES6 學(xué)習(xí)筆記

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

    alogy 評(píng)論0 收藏0

  • Nodejs模塊加載與ES6模塊加載實(shí)現(xiàn)

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

    陳江龍 評(píng)論0 收藏0

  • ES6—class與模塊化（9）

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

    weij 評(píng)論0 收藏0

  • javascript中的模塊化

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

    zzbo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

X1nFLY

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<