使用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日

相关推荐

  • HTML文件路径

    绝对路径 描述 <img src=”https://www.example.com/picture.jpg”> 在 https://www.example.com/ 绝对路径下 相对路径 描述 <img src=”picture.jpg”> 在包含<img>元素的 HTML 文件的所在目录下 <…

    JavaScript经验 2023年10月11日
    02640
  • Node.js风格的CommonJS模块

    CommonJS 模块用于在服务器环境中使用,而 Node.js 使用了 CommonJS 模块的轻微修改版本,本文介绍 Node.js 风格的 CommonJS 模块。 模块就是以 .js 为扩展名的 JavaScript 文件。 普通脚本文件内的顶级的成员对其它脚本文件来说是公开(public)的全局上下文,而模块…

    JavaScript经验 2023年3月7日
    03660
  • 开启JavaScript语言的严格模式

    要对一个脚本文件内的所有内容开启严格模式,只需要在脚本文件内的顶部添加 “use strict” 或 ‘use strict’ 即可。 要单独对一个函数体内的所有内容开启严格模式,只需要在函数体内的顶部添加 “use strict” 或 ‘use strict’ 即可。 注意:JavaScript 模块内的所有内容自动…

    JavaScript经验 2023年12月12日
    04440

发表回复

登录后才能评论