JS `Module Declarations` (提案)：在 `HTML` 中声明 `ES Modules` 的依赖

各位观众，晚上好！我是你们的老朋友，今天咱们聊点新鲜玩意儿——JS Module Declarations，也就是在HTML里直接声明ES Modules依赖这事儿。听起来是不是有点绕？别怕，咱们慢慢来，保证你听完之后，能跟隔壁老王吹牛皮。

开场白：模块化，爱的魔力转圈圈

话说，咱们写JavaScript，代码量稍微一上来，就得面临一个问题：代码组织。要是把所有代码都塞到一个文件里，那简直就是灾难现场，改一行代码，整个世界都崩溃。所以，模块化就应运而生了。

模块化，简单来说，就是把代码拆分成一个个独立的模块，每个模块负责一部分功能，然后通过某种方式把这些模块组合起来。就像搭积木一样，每个积木块都有自己的形状和功能，最后拼成一个完整的城堡。

在JavaScript的世界里，模块化的方案层出不穷，从最初的CommonJS、AMD，到现在的ES Modules，可谓是百花齐放。而ES Modules，凭借着其原生支持和简洁的语法，成为了事实上的标准。

ES Modules：未来的希望，但也有点小麻烦

ES Modules好是好，但也有个小小的麻烦：在HTML里引入ES Modules，通常需要用<script type="module">标签。这个标签告诉浏览器，这是一个ES Module，需要按照ES Module的规则来解析。

<!DOCTYPE html>
<html>
<head>
  <title>ES Modules Example</title>
</head>
<body>
  <script type="module">
    import { add } from './math.js';

    console.log(add(1, 2)); // 输出：3
  </script>
</body>
</html>

这个例子很简单，引入了一个math.js模块，然后调用了其中的add函数。但是，如果我们的项目依赖的模块很多，那就要写一堆的<script type="module">标签，看起来就很臃肿，而且容易出错。

更麻烦的是，如果我们需要控制模块的加载顺序，或者需要为不同的模块设置不同的属性（比如integrity），那就更加困难了。

Module Declarations：优雅的解决方案，让HTML更清晰

为了解决这些问题，就有人提出了Module Declarations这个提案。这个提案的核心思想是：在HTML里声明ES Modules的依赖，而不是直接使用<script type="module">标签。

具体来说，就是引入一个新的HTML元素，比如<module-declaration>（名字可以随便取，这里只是举个例子），用来声明ES Modules的依赖。

<!DOCTYPE html>
<html>
<head>
  <title>Module Declarations Example</title>
  <module-declaration src="./math.js" type="module"></module-declaration>
  <module-declaration src="./utils.js" type="module" integrity="sha384-xxxxxxxxxxxxxxxxxxxxxxxx"></module-declaration>
</head>
<body>
  <script type="module">
    import { add } from './math.js';
    import { formatNumber } from './utils.js';

    console.log(add(1, 2));
    console.log(formatNumber(1000));
  </script>
</body>
</html>

在这个例子中，我们使用<module-declaration>标签声明了math.js和utils.js这两个模块的依赖。然后在<script type="module">标签中，就可以直接使用import语句来引入这些模块了。

Module Declarations的优势：

更清晰的HTML结构： 将模块依赖声明和模块使用分离，使HTML结构更清晰，易于维护。
更好的控制力： 可以更方便地控制模块的加载顺序和属性，比如integrity、crossorigin等。
更灵活的加载策略： 可以根据不同的场景选择不同的加载策略，比如prefetch、preload等。

深入剖析：Module Declarations的语法和属性

<module-declaration>标签可以包含以下属性：

属性	描述
`src`	模块的URL。
`type`	模块的类型，必须是`"module"`。
`integrity`	模块的完整性校验值，用于防止CDN篡改。
`crossorigin`	跨域请求的配置，可以是`"anonymous"`、`"use-credentials"`或`null`。
`referrerpolicy`	定义了在获取资源时要发送的HTTP引用头部。可以是`"no-referrer"`， `"no-referrer-when-downgrade"`， `"origin"`， `"origin-when-cross-origin"`， `"same-origin"`， `"strict-origin"`， `"strict-origin-when-cross-origin"`，或 `"unsafe-url"`。
`importmap`	关联一个 `<importmap>` 元素，用于定义模块说明符的重映射。允许你将模块说明符（例如 `'lodash'`）映射到特定的URL。
`fetchpriority`	允许指定资源加载的优先级。可以是 `"high"`， `"low"`，或 `"auto"` (浏览器决定)。

示例：使用integrity属性进行完整性校验

<!DOCTYPE html>
<html>
<head>
  <title>Integrity Check Example</title>
  <module-declaration src="https://cdn.example.com/math.js" type="module" integrity="sha384-xxxxxxxxxxxxxxxxxxxxxxxx"></module-declaration>
</head>
<body>
  <script type="module">
    import { add } from 'https://cdn.example.com/math.js';

    console.log(add(1, 2));
  </script>
</body>
</html>

在这个例子中，我们使用了integrity属性来校验从CDN加载的math.js模块的完整性。如果CDN上的math.js模块被篡改了，浏览器就会拒绝执行该模块，从而保证了安全性。

示例：使用crossorigin属性进行跨域请求

<!DOCTYPE html>
<html>
<head>
  <title>Cross-Origin Example</title>
  <module-declaration src="https://cdn.example.com/math.js" type="module" crossorigin="anonymous"></module-declaration>
</head>
<body>
  <script type="module">
    import { add } from 'https://cdn.example.com/math.js';

    console.log(add(1, 2));
  </script>
</body>
</html>

在这个例子中，我们使用了crossorigin属性来配置跨域请求。如果我们的模块是从不同的域名加载的，就需要设置crossorigin属性，否则浏览器可能会阻止跨域请求。

示例：使用 importmap 属性

<!DOCTYPE html>
<html>
<head>
  <title>Importmap Example</title>
  <importmap>
    {
      "imports": {
        "lodash": "https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
      }
    }
  </importmap>
  <module-declaration src="./app.js" type="module"></module-declaration>
</head>
<body>
  <script type="module" src="./app.js"></script>
</body>
</html>

// app.js
import _ from 'lodash';

console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); // Outputs: [ [ 'a', 'b' ], [ 'c', 'd' ] ]

在这个例子中，importmap 定义了 'lodash' 应该从 https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js 加载。然后在 app.js 中，你可以直接使用 import _ from 'lodash'; 而无需指定完整的 URL。 <module-declaration> 只是确保 app.js 被当作 module 处理，并应用 importmap。注意这里的 <script type="module" src="./app.js"></script> 仍然是必须的。 <module-declaration> 只是声明依赖和配置，并不负责实际加载。

加载顺序和优先级

浏览器会按照<module-declaration>标签在HTML中的顺序来加载模块。如果我们需要控制模块的加载优先级，可以使用fetchpriority属性。

fetchpriority="high"：表示高优先级加载，浏览器会优先加载该模块。
fetchpriority="low"：表示低优先级加载，浏览器会在其他资源加载完成后再加载该模块。
fetchpriority="auto"：表示浏览器自行决定加载优先级。

兼容性：理想很丰满，现实很骨感

虽然Module Declarations这个提案很美好，但是目前还没有被所有的浏览器完全支持。因此，在使用Module Declarations的时候，需要考虑到兼容性问题。

Polyfill：曲线救国，让老浏览器也能玩转Module Declarations

为了解决兼容性问题，我们可以使用polyfill。Polyfill是一种代码，它可以模拟新特性在老浏览器中的行为。

目前，还没有专门针对Module Declarations的polyfill，但是我们可以通过一些技巧来实现类似的功能。比如，我们可以使用JavaScript代码来解析HTML中的<module-declaration>标签，然后动态地创建<script type="module">标签来加载模块。

代码示例：简单的polyfill

(function() {
  const moduleDeclarations = document.querySelectorAll('module-declaration');

  moduleDeclarations.forEach(declaration => {
    const src = declaration.getAttribute('src');
    const type = declaration.getAttribute('type');
    const integrity = declaration.getAttribute('integrity');
    const crossorigin = declaration.getAttribute('crossorigin');

    if (type === 'module' && src) {
      const script = document.createElement('script');
      script.type = 'module';
      script.src = src;

      if (integrity) {
        script.integrity = integrity;
      }

      if (crossorigin) {
        script.crossOrigin = crossorigin;
      }

      document.head.appendChild(script);
      declaration.remove(); // Clean up the custom element
    }
  });
})();

这段代码会在页面加载完成后，查找所有的<module-declaration>标签，然后根据标签的属性创建一个<script type="module">标签，并将其添加到head中。最后，移除<module-declaration>标签，以避免重复加载。

未来展望：Module Declarations的潜力无限

虽然Module Declarations目前还处于提案阶段，但是它的潜力是无限的。随着浏览器的不断更新和完善，Module Declarations有望成为未来Web开发的标准之一。

它可以让我们的HTML结构更清晰，更易于维护，同时也可以提供更好的控制力和更灵活的加载策略。相信在不久的将来，我们就可以在所有的浏览器中，轻松地使用Module Declarations来管理ES Modules的依赖了。

总结：

特性	描述
语法	使用自定义HTML元素，如 `<module-declaration src="module.js" type="module"></module-declaration>`
优点	更清晰的HTML结构；更好的控制力（加载顺序、属性）；更灵活的加载策略。
缺点	兼容性问题；需要polyfill。
浏览器支持	尚未完全支持，处于提案阶段。
适用场景	大型项目，需要管理大量ES Modules依赖；需要对模块加载进行更精细的控制。
替代方案	直接使用 `<script type="module">` 标签，但代码会比较冗余。
与 `<link rel="modulepreload">`	`<link rel="modulepreload">` 用于预加载模块，优化加载速度。 `Module Declarations` 用于声明依赖和配置模块属性，两者可以结合使用，进一步提升性能和可维护性。

最后：

希望今天的讲座对你有所帮助。记住，技术的世界日新月异，我们要保持学习的热情，不断探索新的知识。下次有机会，咱们再聊点别的有趣的东西！感谢大家的收听!

发表回复 取消回复

发表回复取消回复