通过给 script 标签添加 type = module 的属性,就可以以 ES Modules 的标准执行其中的 JS 代码了。
<script type="module"></script>
ES Module 标准有一下特性:
1. ESM 自动采用严格模式,忽略 ‘use strict’。
<script type="module">
console.log(this) // 输出 undefined
</script>
每个 ES Modules 都是运行在单独的私有作用域中.
<script type="module">
var foo = 100
console.log(foo)
</script>
<script type="module">
console.log(foo) // 报错
</script>
ESM 是通过 CORS 的方式请求外部 JS 模块的。如果需要请求外部模块的话,服务端必须支持 CORS。
<script type="module" src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
ESM 的 script 标签会延迟执行脚本。该特性等同于 defer。
<script defer>
alert('hello') // 先渲染p元素,执行脚本。
</script>
<p>需要显示的内容</p>