資訊專欄INFORMATION COLUMN
摘要：瀏覽器問題執(zhí)行多次模塊。瀏覽器問題加載頁面失敗加載沒有的模塊腳本。您可以通過添加屬性來向同源模塊添加憑據(jù)這對我來說似乎有點奇怪，我在規(guī)范中對此提出質(zhì)疑。瀏覽器問題使用憑據(jù)請求同源模塊。已在中修復(fù)默認請求同源模塊的時候攜帶了憑據(jù)。
原文鏈接：ECMAScript modules in browsers作者：Jake Archibald
瀏覽器現(xiàn)在可以使用 ES 模塊（module）了！它們是：
Safari 10.1
Chrome 61
Firefox 60
Microsoft Edge 16
// utils.mjs
export function addTextToBody(text) {
const div = document.createElement("div");
div.textContent = text;
document.body.appendChild(div);
}
在線演示
您只需要在 script 元素上添加 type=module，瀏覽器就會將內(nèi)聯(lián)腳本或外部腳本作為 ECMAScript module 處理。
關(guān)于模塊（module）已經(jīng)有一些很棒的文章，但是我想分享一些在我測試和閱讀規(guī)范的時候?qū)W到的瀏覽器特有的內(nèi)容。
目前還不支持的某些 import 用法// 已支持:
import {foo} from "https://jakearchibald.com/utils/bar.mjs";
import {foo} from "/utils/bar.mjs";
import {foo} from "./bar.mjs";
import {foo} from "../bar.mjs";
// 不支持:
import {foo} from "bar.mjs";
import {foo} from "utils/bar.mjs";
有效的模塊路徑說明符必須符合下列條件之一：
一個完整的非相對URL，這樣在將其傳給 new URL(moduleSpecifier) 的時候才不會報錯。
以 / 開頭的。
以 ./ 開頭的。
以 ../ 開頭的。
其他形式的說明符保留供將來使用，例如導(dǎo)入內(nèi)置模塊。
使用 nomodule 來向后兼容在線演示
支持 type=module 的瀏覽器會忽略屬性為 nomodule 的腳本。這意味著您可以給支持模塊的瀏覽器提供模塊樹，同時給其他瀏覽器提供一個降級版本。
瀏覽器問題
Firefox 瀏覽器不支持 nomodule (issue)。已在 Firefox nightly 中修復(fù)！
Edge 瀏覽器不支持 nomodule (issue)。已在 Edge 16 中修復(fù)！
Safari 瀏覽器不支持 nomodule。已在 Safari 11 中修復(fù)！對于 10.1，這里有一個非常聰明的替代辦法。
在線演示
執(zhí)行的順序是：2.js，1.mjs，3.js。
script 在獲取期間會阻塞 HTML 解析器，簡直太糟糕了。對于常規(guī)腳本，您可以使用 defer 來避免阻塞，當(dāng)然這也會推遲腳本的執(zhí)行，直到文檔完成解析，并與其他延遲腳本一起維護執(zhí)行順序。模塊腳本的默認表現(xiàn)行為就像 defer ——當(dāng)它正在獲取時，沒有辦法讓一個模塊腳本阻塞 HTML 解析器。
模塊腳本使用和添加了 defer 的常規(guī)腳本相同的執(zhí)行隊列。
內(nèi)聯(lián)腳本也是延時的在線演示
執(zhí)行順序是1.js ，內(nèi)聯(lián)腳本，內(nèi)聯(lián)腳本，2.js 。
常規(guī)的內(nèi)聯(lián)腳本會忽略 defer ，然而內(nèi)聯(lián)模塊腳本卻總是被延遲，無論它們有沒有導(dǎo)入任何東西。
Async 對內(nèi)聯(lián)、外部模塊同樣適用在線演示
快速下載的腳本會在慢速下載的腳本之前執(zhí)行。
與常規(guī)腳本一樣，async 會讓腳本在下載過程中不會阻塞 HTML 解析器，并且盡快地執(zhí)行。與常規(guī)腳本不同，async 也適用于內(nèi)聯(lián)模塊。
與往常的 async 一樣，腳本不會按照它們出現(xiàn)在 DOM 中的順序執(zhí)行。
瀏覽器問題
Firefox 瀏覽器不支持內(nèi)聯(lián)模塊腳本上的 async (issue)。已在 Firefox 59 中修復(fù)！
在線演示
如果您理解 ES 模塊，您就會知道您雖然可以引入它們很多次，但是它們卻僅僅會執(zhí)行一次。當(dāng)然，這同樣適用于HTML中的腳本模塊 - 特定URL的模塊腳本每頁只執(zhí)行一次。
瀏覽器問題Edge 執(zhí)行多次模塊 (issue)。已修復(fù)，但是還沒發(fā)布（希望 Edge 17 會帶上這個修復(fù)內(nèi)容）。
總是使用 CORS在線演示
與常規(guī)腳本不同，模塊腳本（及其引入的內(nèi)容）是通過 CORS 獲取的。這就意味著跨域的模塊腳本必須返回有效的 CORS 響應(yīng)頭 ，比如 Access-Control-Allow-Origin: *。
瀏覽器問題
Firefox 加載 Demo 頁面失敗 (issue)
Edge 加載沒有 CORS header 的模塊腳本 (issue)。 已在 Edge 16 中修復(fù)！
在線演示
如果請求來自相同的源，大多數(shù)基于 CORS 的 API 會發(fā)送憑據(jù)（cookie 等），但是 fetch() 和模塊腳本卻是例外的——非您要求它們，否則它們不會發(fā)送憑據(jù)除。
您可以通過添加 crossorigin 屬性來向同源模塊添加憑據(jù)（這對我來說似乎有點奇怪，我在規(guī)范中對此提出質(zhì)疑）。如果您打算向其他的源也發(fā)送憑據(jù)，使用 crossorigin="use-credentials"。注意其他源必須使用 Access-Control-Allow-Credentials：true 的響應(yīng)頭來響應(yīng)。
此外，還有一個與“模塊只執(zhí)行一次”規(guī)則相關(guān)的問題。模塊由其URL標(biāo)記，因此如果首次請求了一個模塊而不攜帶憑據(jù)，然后再次攜帶憑據(jù)請求該模塊，那么第二次獲得的依然是不攜帶憑證的模塊。 這就是為啥我在上面的URL中使用 問號 ? 的原因，使它們成為唯一的。
更新： 上面的情況可能很快就會發(fā)生改變。fetch() 和模塊腳本默認都會向同源的 URL 發(fā)送憑據(jù)。Issue
瀏覽器問題
Chrome 使用憑據(jù)請求同源模塊（issue）。已在 Chrome 61 中修復(fù)！
Safari 即使添加了 crossorigin 屬性，也不使用憑據(jù)請求同源模塊（issue）。
Edge 即使添加了 crossorigin 屬性，也不使用憑據(jù)請求同源模塊（issue）。已在 Edge 16 中修復(fù)！
Edge 默認請求同源模塊的時候攜帶了憑據(jù)（issue）。
MIME 類型不同于常規(guī)腳本，模塊腳本必須是有效的 JavaScript MIME 類型中的一種類型，否則模塊就不會執(zhí)行。HTML 標(biāo)準(zhǔn)建議使用 text/javascript。
瀏覽器問題Edge 執(zhí)行無效的 MIME 類型腳本（issue）
這就是我目前學(xué)到的內(nèi)容啦。毋庸置疑，我對 ES 模塊登陸瀏覽器感到非常興奮！
性能建議，動態(tài)導(dǎo)入等等！請查閱有關(guān) Web Fundamentals 的文章，深入了解模塊使用情況。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100764.html
摘要：文章的第二部分涵蓋了內(nèi)存管理的概念，不久后將發(fā)布。的標(biāo)準(zhǔn)化工作是由國際組織負責(zé)的，相關(guān)規(guī)范被稱為或者。隨著分析器和編譯器不斷地更改字節(jié)碼，的執(zhí)行性能逐漸提高。 原文地址：How Does JavaScript Really Work? (Part 1) 原文作者：Priyesh Patel 譯者：Chor showImg(https://segmentfault.com/img...
摘要：隨后，它出現(xiàn)在公司之后的瀏覽器，以及從微軟從起發(fā)布的所有瀏覽器上。標(biāo)準(zhǔn)的第版在年月的大會上被表決接受。第版在年月底大會上被采納。 前言 ??本系列譯文的初衷旨在希望更多人能夠了解關(guān)于JS的一些基本概念，遇到原理性的問題時多去翻翻文檔，而不是在社區(qū)無休止的重復(fù)提出某些在文檔中能夠非常方便快捷就能找到的東西。 ??精力和水平有限，所以暫時只打算嘗試翻譯前面幾章概括性的介紹，同時后面的章節(jié)大...
摘要：將轉(zhuǎn)換成常見的使用實現(xiàn)的基于迭代器的迭代。處停止迭代器基于鴨子模型接口這里使用語法僅僅為了說明問題使用支持為了使用迭代器屬性需要引入。生成器是迭代器的子類，包含了附加的與。 原文地址：http://babeljs.io/docs/learn-...本文基于Luke Hoban精妙的文章《es6features》，請把star獻給他，你可以在此嘗試這些特性REPL。 概述 ECMAScr...
摘要：有哪些新特性有哪些改進學(xué)著使用這個新版本，來構(gòu)建更快的應(yīng)用吧。繼版本之后，花了將近八個月的時間來發(fā)布。的創(chuàng)始人之一，，建議用戶使用，以便使用最優(yōu)的性能，是因為源代碼使用了新特性。全新的插件系統(tǒng)配備了全新整改的插件系統(tǒng)。 本文原文地址：https://auth0.com/blog/webpac...第一次翻譯，不當(dāng)之處，歡迎指正 官方已經(jīng)發(fā)布了Webpack 4.0。有哪些新特性？有哪些...
摘要：技術(shù)上來說這個機制被稱為動態(tài)分配或代理。定義類一個類是一個正式的抽象集，它規(guī)定了對象的初始狀態(tài)和行為。技術(shù)上來說一個類表示構(gòu)造函數(shù)原型的組合。因此構(gòu)造函數(shù)創(chuàng)建對象并自動設(shè)置新創(chuàng)建實例的原型。第二次調(diào)用時，相同的上下文再次被壓入棧并恢復(fù)。 原文：JavaScript. The Core: 2nd Edition作者：Dmitry Soshnikov 文章其他語言版本：俄語 這篇文章是 ...
閱讀 2881·2021-10-14 09:43
閱讀 1679·2021-09-29 09:34
閱讀 1759·2021-07-28 00:16
閱讀 2974·2019-08-30 15:53
閱讀 2919·2019-08-30 13:59
閱讀 2974·2019-08-30 13:57
閱讀 1105·2019-08-26 13:38
閱讀 1906·2019-08-26 13:25
