zoukankan      html  css  js  c++  java

  • 在浏览器中高效使用JavaScript module(模块)

    在浏览器中也可以使用JavaScript modules(模块功能)了。目前支持这一特性的浏览器包括：

    • Safari 10.1.
    • 谷歌浏览器(Canary 60) – 需要在chrome:flags里开启”实验性网络平台功能(Experimental Web Platform)”
    • Firefox 54 – 需要在about:config里开启dom.moduleScripts.enabled选项。
    • Edge 15 – 需要在about:flags里开启 Experimental JavaScript Features 选项
    <script type="module">
  import {addTextToBody} from './utils.js';

  addTextToBody('Modules are pretty cool.');
</script>

    // utils.js
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}
    观看演示

    我们需要做的只是在script标签元素上声明type=module就可以了，这样，浏览器就能解析代码中的module语法了。

    网上已经有很多关于modules的好文章了，但我在这里想单独分享一下专门针对浏览器里的ECMAScript modules的知识，这些都是我在阅读和测试ECMAScript规范时学到的。

    目前并不支持”裸” import 语法

    // 可以这样使用:
import {foo} from 'https://jakearchibald.com/utils/bar.js';
import {foo} from '/utils/bar.js';
import {foo} from './bar.js';
import {foo} from '../bar.js';

// 这些写法不支持：
import {foo} from 'bar.js';
import {foo} from 'utils/bar.js';

    下面几种 module 语法是有效的：

    • 绝对路径的URL。也就是说，使用 new URL(模块地址) 也不会报错。
    • 地址开头是 /。
    • 地址开头是 ./。
    • 地址开头是 ../。

    另外一些语法是保留为将来使用的，比如，导入内部的(built-in) modules。

    用来保持向后兼容的nomodule

    <script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

    能够认识type=module语法的浏览器会忽略具有nomodule属性的scripts。也就是说，我们可以使用一些脚本服务于支持module语法的浏览器，同时提供一个nomodule的脚本用于哪些不支持module语法的浏览器，作为补救。

    浏览器问题

    • Firefox并不支持nomodule属性 (issue)。但在Firefox nightly版里已经修复了这个问题。
    • Edge并不支持nomodule属性。 (issue).
    • Safari 10.1 并不支持nomodule属性，但在最新的技术预览版中修复了这个问题。对于10.1版, 有一个很聪明的变通技巧。

    缺省设置为Defer

    <!-- 这个脚本的执行将会晚于… -->
<script type="module" src="1.js"></script>

<!-- …这个脚本… -->
<script src="2.js"></script>

<!-- …但是会先于这个脚本. -->
<script defer src="3.js"></script>

    执行的顺序将会是2.js, 1.js, 3.js.

    如果script代码块阻止HTML分析器下载其他代码，这是非常糟糕的事情，通常我们会使用 defer 属性来防止这种解析阻塞，但同时这样也会延迟script脚本的执行——直到真个文档解析完成。而且还要参考其它deferred script脚本的执行顺序。Module scripts缺省行为状态很像 defer 属性的作用 – 一个 module script 不会妨碍HTML分析器下载其它资源。

    Module scripts队列的执行顺序跟使用了defer属性的普通脚本队列的执行顺序一样。

    Inline scripts同样是deferred

    <!-- 这个脚本的执行将会晚于… -->
<script type="module">
  addTextToBody("Inline module executed");
</script>

<!-- …这个脚本… -->
<script src="1.js"></script>

<!-- …和这个脚本… -->
<script defer>
  addTextToBody("Inline script executed");
</script>

<!-- …但会先于这个脚本。-->
<script defer src="2.js"></script>

    执行的顺序是 1.js, inline script, inline module, 2.js.

    普通的inline scripts会忽略defer属性，而 inline module scripts 永远是deferred的，不管它是否有 import 行为。

    外部 & inline modules script脚本上的 Async 属性

    <!-- 这个脚本将会在imports完成后立即执行 -->
<script async type="module">
  import {addTextToBody} from './utils.js';

  addTextToBody('Inline module executed.');
</script>

<!-- 这个脚本将会在脚本加载和imports完成后立即执行 -->
<script async type="module" src="1.js"></script>

    这个快速下载script会率先执行。

    跟普通的scripts一样, async 属性能让script加载的同时并不阻碍HTML解析器的工作，而且在加载完成后立即执行。跟普通的scripts不同的是, async 属性在inline modules脚本上也有效。

    因为永远都是async, 所以这些scripts的执行顺序也许并不会像它们出现在DOM里的顺序。

    浏览器问题

    • Firefox并不支持inline module scripts上的 async 特性。(issue).

    Modules只执行一次

    <!-- 1.js 只执行一次 -->
<script type="module" src="1.js"></script>
<script type="module" src="1.js"></script>
<script type="module">
  import "./1.js";
</script>

<!-- 而普通的脚本会执行多次 -->
<script src="2.js"></script>
<script src="2.js"></script>

    如果你知道 ES modules，你就应该知道，modules可以import多次，但只会执行一次。这种原则同样适用于HTML里的script modules – 一个确定的URL上的module script在一个页面上只会执行一次。

    浏览器问题

    • Edge浏览器会多次执行 modules (issue).

    CORS 跨域资源共享限制

    <!-- 这个脚本不会执行，因为跨域资源共享限制 -->
<script type="module" src="https://….now.sh/no-cors"></script>

<!-- 这个脚本不会执行，因为跨域资源共享限制-->
<script type="module">
  import 'https://….now.sh/no-cors';

  addTextToBody("This will not execute.");
</script>

<!-- 这个没问题 -->
<script type="module" src="https://….now.sh/cors"></script>
    观看演示

    跟普通的scripts不同, module scripts (以及它们的 imports 行为) 受 CORS 跨域资源共享限制。也就是说，跨域的 module scripts 必须返回带有有效 Access-Control-Allow-Origin: * 的CORS头信息。

    浏览器问题

    • Firefox没有成功的加载演示页面 (issue).
    • Edge浏览器加载了没有 CORS headers 的 module scripts (issue)。

    没有凭证信息(credentials)

    <!-- 有凭证信息 (cookies等) -->
<script src="1.js"></script>

<!-- 没有凭证信息 -->
<script type="module" src="1.js"></script>

<!-- 有凭证信息 -->
<script type="module" crossorigin src="1.js?"></script>

<!-- 没有凭证信息 -->
<script type="module" crossorigin src="https://other-origin/1.js"></script>

<!-- 有凭证信息-->
<script type="module" crossorigin="use-credentials" src="https://other-origin/1.js?"></script>
    观看演示

    当请求在同一安全域下，大多数的CORS-based APIs都会发送凭证信息 (cookies 等)，但 fetch() 和 module scripts 例外 – 它们并不发送凭证信息，除非我们要求它们。

    我们可以通过添加crossorigin属性来让同源module脚本携带凭证信息，如果你也想让非同源module脚本也携带凭证信息，使用 crossorigin="use-credentials" 属性。需要注意的是，非同源脚本需要具有 Access-Control-Allow-Credentials: true 头信息。

    同样，“Modules只执行一次”的规则也会影响到这一特征。URL是Modules的唯一标志，如果你先请求的Modules没有携带凭证信息，然后你第二次请求希望携带凭证信息，你仍然会得到一个没有凭证信息的module。这就是为什么上面的有个URL上我使用了一个?号，是让URL变的不同。

    浏览器问题

    • 谷歌浏览器在请求同源 modules 时带有 credentials (issue).
    • Safari 请求同源 modules 时不带有 credentials，即使你使用了 crossorigin 属性标志。 (issue).
    • Edge浏览器完全相反。它缺省状态下对同源请求 modules 时带有 credentials 而当你指定了 crossorigin 属性后反倒没了。 (issue).

    火狐浏览器是唯一做的正确的浏览器，干的漂亮！

    Mime-types 文档类型

    跟普通的scripts不一样，modules scripts 必须指定一个有效的 JavaScript MIME 类型，否则将不会执行。

    观看演示

    浏览器问题

    • Edge浏览器在无效MIME types下也执行 (issue).

    这些就是目前我学到的。毋庸置疑，ES modules能够登陆浏览器，已经让我兴奋不已了。你呢？
  • 相关阅读:
    firewall-cmd常用命令
    centos7添加硬盘扩展根分区
    win11拖动窗口造成崩溃的问题
    JedisCluster支持pipeline管道
    Docker
    Nginx入门
    【ElasticSearch】精确匹配text字段 用match加.keyword 或 term
    Enum<E extends Enum<E>>
    【配置】jdk8和jdk11切换
    【ElasticSearch】script中进行比较，date类型转为long型
  • 原文地址：https://www.cnblogs.com/sunshq/p/10076569.html
Copyright © 2011-2022 走看看