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

資訊專欄INFORMATION COLUMN

[譯] 瀏覽器中的 ECMAScript 模塊

canger / 3133人閱讀

摘要：瀏覽器問題執(zhí)行多次模塊。瀏覽器問題加載頁面失敗加載沒有的模塊腳本。您可以通過添加屬性來向同源模塊添加憑據這對我來說似乎有點奇怪，我在規(guī)范中對此提出質疑。瀏覽器問題使用憑據請求同源模塊。已在中修復默認請求同源模塊的時候攜帶了憑據。

原文鏈接：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，瀏覽器就會將內聯(lián)腳本或外部腳本作為 ECMAScript module 處理。

關于模塊（module）已經有一些很棒的文章，但是我想分享一些在我測試和閱讀規(guī)范的時候學到的瀏覽器特有的內容。

目前還不支持的某些 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) 的時候才不會報錯。

以 / 開頭的。

以 ./ 開頭的。

以 ../ 開頭的。

其他形式的說明符保留供將來使用，例如導入內置模塊。

使用 nomodule 來向后兼容

在線演示

支持 type=module 的瀏覽器會忽略屬性為 nomodule 的腳本。這意味著您可以給支持模塊的瀏覽器提供模塊樹，同時給其他瀏覽器提供一個降級版本。

瀏覽器問題

Firefox 瀏覽器不支持 nomodule (issue)。已在 Firefox nightly 中修復！

Edge 瀏覽器不支持 nomodule (issue)。已在 Edge 16 中修復！

Safari 瀏覽器不支持 nomodule。已在 Safari 11 中修復！對于 10.1，這里有一個非常聰明的替代辦法。

默認情況下延遲執(zhí)行

在線演示

執(zhí)行的順序是：2.js，1.mjs，3.js。

script 在獲取期間會阻塞 HTML 解析器，簡直太糟糕了。對于常規(guī)腳本，您可以使用 defer 來避免阻塞，當然這也會推遲腳本的執(zhí)行，直到文檔完成解析，并與其他延遲腳本一起維護執(zhí)行順序。模塊腳本的默認表現(xiàn)行為就像 defer ——當它正在獲取時，沒有辦法讓一個模塊腳本阻塞 HTML 解析器。

模塊腳本使用和添加了 defer 的常規(guī)腳本相同的執(zhí)行隊列。

內聯(lián)腳本也是延時的

在線演示

執(zhí)行順序是1.js ，內聯(lián)腳本，內聯(lián)腳本，2.js 。

常規(guī)的內聯(lián)腳本會忽略 defer ，然而內聯(lián)模塊腳本卻總是被延遲，無論它們有沒有導入任何東西。

Async 對內聯(lián)、外部模塊同樣適用

在線演示

快速下載的腳本會在慢速下載的腳本之前執(zhí)行。

與常規(guī)腳本一樣，async 會讓腳本在下載過程中不會阻塞 HTML 解析器，并且盡快地執(zhí)行。與常規(guī)腳本不同，async 也適用于內聯(lián)模塊。

與往常的 async 一樣，腳本不會按照它們出現(xiàn)在 DOM 中的順序執(zhí)行。

瀏覽器問題

Firefox 瀏覽器不支持內聯(lián)模塊腳本上的 async (issue)。已在 Firefox 59 中修復！

模塊僅執(zhí)行一次

在線演示

如果您理解 ES 模塊，您就會知道您雖然可以引入它們很多次，但是它們卻僅僅會執(zhí)行一次。當然，這同樣適用于HTML中的腳本模塊 - 特定URL的模塊腳本每頁只執(zhí)行一次。

瀏覽器問題

Edge 執(zhí)行多次模塊 (issue)。已修復，但是還沒發(fā)布（希望 Edge 17 會帶上這個修復內容）。

總是使用 CORS

在線演示

與常規(guī)腳本不同，模塊腳本（及其引入的內容）是通過 CORS 獲取的。這就意味著跨域的模塊腳本必須返回有效的 CORS 響應頭 ，比如 Access-Control-Allow-Origin: *。

瀏覽器問題

Firefox 加載 Demo 頁面失敗 (issue)

Edge 加載沒有 CORS header 的模塊腳本 (issue)。 已在 Edge 16 中修復！

不攜帶憑據

在線演示

如果請求來自相同的源，大多數基于 CORS 的 API 會發(fā)送憑據（cookie 等），但是 fetch() 和模塊腳本卻是例外的——非您要求它們，否則它們不會發(fā)送憑據除。

您可以通過添加 crossorigin 屬性來向同源模塊添加憑據（這對我來說似乎有點奇怪，我在規(guī)范中對此提出質疑）。如果您打算向其他的源也發(fā)送憑據，使用 crossorigin="use-credentials"。注意其他源必須使用 Access-Control-Allow-Credentials：true 的響應頭來響應。

此外，還有一個與“模塊只執(zhí)行一次”規(guī)則相關的問題。模塊由其URL標記，因此如果首次請求了一個模塊而不攜帶憑據，然后再次攜帶憑據請求該模塊，那么第二次獲得的依然是不攜帶憑證的模塊。 這就是為啥我在上面的URL中使用 問號 ? 的原因，使它們成為唯一的。

更新： 上面的情況可能很快就會發(fā)生改變。fetch() 和模塊腳本默認都會向同源的 URL 發(fā)送憑據。Issue

瀏覽器問題

Chrome 使用憑據請求同源模塊（issue）。已在 Chrome 61 中修復！

Safari 即使添加了 crossorigin 屬性，也不使用憑據請求同源模塊（issue）。

Edge 即使添加了 crossorigin 屬性，也不使用憑據請求同源模塊（issue）。已在 Edge 16 中修復！

Edge 默認請求同源模塊的時候攜帶了憑據（issue）。

MIME 類型

不同于常規(guī)腳本，模塊腳本必須是有效的 JavaScript MIME 類型中的一種類型，否則模塊就不會執(zhí)行。HTML 標準建議使用 text/javascript。

瀏覽器問題

Edge 執(zhí)行無效的 MIME 類型腳本（issue）

這就是我目前學到的內容啦。毋庸置疑，我對 ES 模塊登陸瀏覽器感到非常興奮！

性能建議，動態(tài)導入等等！

請查閱有關 Web Fundamentals 的文章，深入了解模塊使用情況。

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

轉載請注明本文地址：http://systransis.cn/yun/100764.html

相關文章

  • 「譯」JavaScript 究竟是如何工作的？（第一部分）

    摘要：文章的第二部分涵蓋了內存管理的概念，不久后將發(fā)布。的標準化工作是由國際組織負責的，相關規(guī)范被稱為或者。隨著分析器和編譯器不斷地更改字節(jié)碼，的執(zhí)行性能逐漸提高。 原文地址：How Does JavaScript Really Work? (Part 1) 原文作者：Priyesh Patel 譯者：Chor showImg(https://segmentfault.com/img...

    Youngdze 評論0 收藏0

  • 【譯】ECMAScript文檔---序言及1-6章（上）

    摘要：隨后，它出現(xiàn)在公司之后的瀏覽器，以及從微軟從起發(fā)布的所有瀏覽器上。標準的第版在年月的大會上被表決接受。第版在年月底大會上被采納。 前言 ??本系列譯文的初衷旨在希望更多人能夠了解關于JS的一些基本概念，遇到原理性的問題時多去翻翻文檔，而不是在社區(qū)無休止的重復提出某些在文檔中能夠非常方便快捷就能找到的東西。 ??精力和水平有限，所以暫時只打算嘗試翻譯前面幾章概括性的介紹，同時后面的章節(jié)大...

    wind3110991 評論0 收藏0

  • [譯] ES6 學習筆記：關于 ES2015 特性的詳細概述

    摘要：將轉換成常見的使用實現(xiàn)的基于迭代器的迭代。處停止迭代器基于鴨子模型接口這里使用語法僅僅為了說明問題使用支持為了使用迭代器屬性需要引入。生成器是迭代器的子類，包含了附加的與。 原文地址：http://babeljs.io/docs/learn-...本文基于Luke Hoban精妙的文章《es6features》，請把star獻給他，你可以在此嘗試這些特性REPL。 概述 ECMAScr...

    leoperfect 評論0 收藏0

  • Webpack 4.0 發(fā)布:有哪些新特性？（譯）

    摘要：有哪些新特性有哪些改進學著使用這個新版本，來構建更快的應用吧。繼版本之后，花了將近八個月的時間來發(fā)布。的創(chuàng)始人之一，，建議用戶使用，以便使用最優(yōu)的性能，是因為源代碼使用了新特性。全新的插件系統(tǒng)配備了全新整改的插件系統(tǒng)。 本文原文地址：https://auth0.com/blog/webpac...第一次翻譯，不當之處，歡迎指正 官方已經發(fā)布了Webpack 4.0。有哪些新特性？有哪些...

    HitenDev 評論0 收藏0

  • 【譯】JavaScript 核心（第二版）

    摘要：技術上來說這個機制被稱為動態(tài)分配或代理。定義類一個類是一個正式的抽象集，它規(guī)定了對象的初始狀態(tài)和行為。技術上來說一個類表示構造函數原型的組合。因此構造函數創(chuàng)建對象并自動設置新創(chuàng)建實例的原型。第二次調用時，相同的上下文再次被壓入棧并恢復。 原文：JavaScript. The Core: 2nd Edition作者：Dmitry Soshnikov 文章其他語言版本：俄語 這篇文章是 ...

    dingding199389 評論0 收藏0

發(fā)表評論

0條評論

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