通过给 script 标签添加 type = module 的属性,就可以以 ES Modules 的标准执行其中的 JS 代码了。

    1. <script type="module"></script>

    ES Module 标准有一下特性:
    1. ESM 自动采用严格模式,忽略 ‘use strict’。

    1. <script type="module">
    2. console.log(this) // 输出 undefined
    3. </script>
    1. 每个 ES Modules 都是运行在单独的私有作用域中.

      1. <script type="module">
      2. var foo = 100
      3. console.log(foo)
      4. </script>
      5. <script type="module">
      6. console.log(foo) // 报错
      7. </script>
    2. ESM 是通过 CORS 的方式请求外部 JS 模块的。如果需要请求外部模块的话,服务端必须支持 CORS。

      1. <script type="module" src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    3. ESM 的 script 标签会延迟执行脚本。该特性等同于 defer。

      1. <script defer>
      2. alert('hello') // 先渲染p元素,执行脚本。
      3. </script>
      4. <p>需要显示的内容</p>