浏览器中的ECMAScript模块(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载

原文:https://jakearchibald.com/2017/es-modules-in-browsers/

各浏览器开始支持ES模块,我们可以使用以下浏览器版来体验:

  • Safari 10.1.
  • Chrome Canary 60 – 在 chrome:flags 中开启实验模式.
  • Firefox 54 – 在 about:config 中设置dom.moduleScripts.enabled.
  • Edge 15 – 在 about:flags 中开启实验模式.
// utils.js
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}
<script type="module">
  import {addTextToBody} from './utils.js';

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

你只需要给script标签加上type=module属性,浏览器会把内联脚本或外联脚本当作ECMAScript模块来处理。 尽管已经有一些不错的文章来介绍JS模块,但我想分享一些关于浏览器端的模块功能:

简写import路径将不会被支持

// Supported:
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';

// Not supported:
import {foo} from 'bar.js';
import {foo} from 'utils/bar.js';

合法的模块路径必须满足以下其中一项条件:

  • 完整的URL地址(非相对URL)
  • 以 /. 开头
  • 以 ./. 开头
  • 以 ../. 开头 其它说明符被保留供将来使用,如import一个浏览器的内置模块。

nomodule 可以做降级处理

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

如果浏览器支持type=module,那么将会忽略带有nomodule的script标签,这意味着你可以对不支持ECMA模块的浏览器做降级处理。

默认Defer

<!-- This script will execute after… -->
<script type="module" src="1.js"></script>

<!-- …this script… -->
<script src="2.js"></script>

<!-- …but before this script. -->
<script defer src="3.js"></script>

加载顺序是2.js, 1.js, 3.js 通常脚本在加载的过程中会阻塞页面的渲染,对于普通脚本你可以使用defer去避免页面的渲染阻塞,但这也会推迟脚本的执行直到文档完成解析,并且与其他延迟脚本保持执行顺序。但模块脚本默认是defer的,这意味着不会对HTML的解析造成阻塞。

内联模块脚本也会被推迟执行

<!-- This script will execute after… -->
<script type="module">
  addTextToBody("Inline module executed");
</script>

<!-- …this script… -->
<script src="1.js"></script>

<!-- …and this script… -->
<script defer>
  addTextToBody("Inline script executed");
</script>

<!-- …but before this script. -->
<script defer src="2.js"></script>

执行顺序将会是:1.js, 内联脚本, 内联模块, 2.js

常规内联脚本会忽略延迟,而内联模块脚本总是被推迟,不管它们是否导入任何东西。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

Winform文件下载之WinINet

在C#中,除了webclient我们还可以使用一组WindowsAPI来完成下载任务。这就是Windows Internet,简称 WinINet。本文通过一个...

2218
来自专栏黑泽君的专栏

Tomcat的Start可以启动起来,但是Debug启动突然启动不起来,一直停在 Class<T>.getDeclaredConstructors0(boolean) line: not availa

Tomcat的Start模式可以启动起来,但是Debug模式启动突然启动不起来,一直停在 Class<T>.getDeclaredConstructors0(b...

972
来自专栏崔庆才的专栏

一看就懂,Python 日志模块详解及应用

Windows网络操作系统都设计有各种各样的日志文件,如应用程序日志,安全日志、系统日志、Scheduler服务日志、FTP日志、WWW日志、DNS服务器日志等...

1514
来自专栏邹立巍的专栏

Linux 的进程间通信:消息队列

Linux 环境提供了 XSI 和 POSIX 两套消息队列,本文将帮助您掌握以下内容:如何使用 XSI 消息队列,如何使用 POSIX 消息队列,它们的底层实...

7650
来自专栏草根专栏

用ASP.NET Core 2.0 建立规范的 REST API -- 预备知识 (2) + 准备项目

3110
来自专栏CSDN技术头条

一组 Redis 实际应用中的异常场景及其根因分析和解决方案

在上一场 Chat《基于 Redis 的分布式缓存实现方案及可靠性加固策略》中,我已经较为全面的介绍了 Redis 的原理和分布式缓存方案。如果只是从“会用”的...

3613
来自专栏名山丶深处

springboot集成schedule(深度理解)

6455
来自专栏Ken的杂谈

基于GitLab的Code Review教程

也就是说,使用GitLab进行Code Review就是在分支合并环节发起Merge Request,然后Code Review完成后将代码合并到目标分支。

1.3K3
来自专栏FreeBuf

无招胜有招: 看我如何通过劫持COM服务器绕过AMSI

? 在Windows 10中,Microsoft的反恶意软件扫描接口(AMSI)被作为新功能被引入,作为标准接口,该功能可以让反病毒引擎将特征规则应用于机器的...

3157
来自专栏名山丶深处

springboot集成schedule(深度理解)

2375

扫码关注云+社区

领取腾讯云代金券