使用ES模块的两种方式

无论是内部方式还是外部方式,带有 type="module" 属性的 <script> 标签会告诉浏览器相关代码应该作为模块执行,而不是作为普通的脚本执行。

无论是内部方式还是外部方式,一个 HTML 页面有多少个 type="module" 属性的 <script> 标签没有限制。

无论是内部方式还是外部方式,同一个模块无论在同一个 HTML 页面中被加载(导入)多少次,实际上只会被加载(导入)一次。

<!-- 假设这是index.html页面,模块moduleA在index.html页面只会被加载(导入)一次。 -->
<script type="module">
  import './moduleA.js';
</script>

<script type="module">
  import './moduleA.js';
</script>

<script type="module" src="./moduleA.js"></script>
<script type="module" src="./moduleA.js"></script>

1.内部(Internal)方式

往往用于单个网页。

<script type="module">
  //export语句
  //无法导出,因为<script>标签无为此模块命名的语法。
  export ...;
  export ... from '模块标识符';
  //import语句(静态导入)
  import ... from '模块标识符';
  import '模块标识符';
</script>
<script>
  //import运算符(动态导入)
  //注意:动态导入外围的<script>无需type="module"属性。
  import('模块标识符');
</script>

2.外部(External)方式

往往用于所有网页。

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

3.importmap

<script type="importmap">
  //JSON对象
</script>

type="importmap" 属性的 <script> 元素(只支持内部方式)用于映射其它 <script> 元素(支持内部方式和外部方式)中 import 语句 和 import() 运算符中的模块标识符到对应的值。

注意:deferasync 属性不可以与 type="importmap" 属性同时声明。

注意:映射的时候跟属性名的顺序没有关系,如果有多个属性名可以映射,则使用最具体的属性名。

注意:有 type="importmap" 属性的 <script> 元素必须在有 import 语句 和 import() 运算符的 <script> 元素之前被处理,否则映射不到对应的值。

注意:同一个 HTML 页面中只有第一个有 type="importmap" 属性的 <script> 元素会被处理,任何后续的有 type="importmap" 属性的 <script> 元素都会被忽略。

//index.html(省略部分代码)
<!doctype html>
<html lang="en">
  <head>

    <script type="importmap">
      <!-- JSON对象 -->
      {
        "imports": {
          <!-- 属性值为解析以后实际的模块标识符 -->
          <!-- 情形1:属性名的末尾无正斜杠 -->
          "lodash": "/node_modules/lodash-es/lodash.js",
          "https://example.com/lodash.js": "/node_modules/lodash-es/lodash.js",
          <!-- 情形2:属性名和属性值的末尾都有正斜杠 -->
          "lodash/": "/node_modules/lodash-es/",
          "https://example.com/": "/node_modules/lodash-es/"
        }
      }
    </script>

    <script type="module" src="./main.js"></script>
  </head>
  <body>
  </body>
</html>
//main.js
//以下都映射到/node_modules/lodash-es/lodash.js

//情形1
import ... from "lodash";
import ... from "https://example.com/lodash.js";

//情形2
import ... from "lodash/lodash.js";
import ... from "https://example.com/lodash.js";

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/experience/javascriptexp/33926.html

(0)
huoxiaoqiang的头像huoxiaoqiang
上一篇 2024年1月4日
下一篇 2024年1月25日

相关推荐

  • 使用CSS的三种方式

    1.内联(Inline)方式 内联(Inline)方式,又称为行内方式。往往用于单个元素。 2.内部(Internal)方式 往往用于单个网页。 3.外部(External)方式 往往用于所有网页。 4.优先级 当同时存在多种使用 CSS 的方式时,如果为相同的选择器(元素)定义了相同的 CSS 属性名,则优先级如下:…

    JavaScript经验 2023年10月10日
    0590
  • JavaScript事件处理程序(又称为事件监听器)详解

    1.概念 负责处理或响应事件而调用的函数称为 事件处理程序(又称为 事件监听器)。 概念 示例 事件类型(又称为 事件名称) “click” 事件目标 <button> 事件处理程序属性名 onclick 事件处理程序(又称为 事件监听器) myFunction() 事件对象 event 2.HTML事件处…

    JavaScript经验 2023年5月11日
    02260
  • npm exec和npx的区别

    从以上两者的使用方式上,我们很容易可以看出,npm exec 命令后面的内容与 npx 命令后面的内容相同,npx 就是 npm exec 的简写,但在解决包方面还是有一些区别的,如下所示: npm exec 可以使用双连字符(–)标志(flag)来抑制作为选项的包的解决,以达到与 npx 一样的功能。 npx

    JavaScript经验 2021年7月24日
    01.4K0

发表回复

登录后才能评论