JavaScript 中的经典脚本与模块脚本答案

【问题标题】：Classic scripts vs. module scripts in JavaScriptJavaScript 中的经典脚本与模块脚本
【发布时间】：2023-04-10 11:31:03
【问题描述】：

当我看到以下语句时，我正在查看 async 和 defer 属性的 WHATWG 规范 <script> 标记：

Classic scripts 可以指定defer 或async； module scripts 可以指定async。

我浏览了 classic 和 module 脚本的 WHATWG 定义，但并没有真正弄清楚。简单来说，JavaScript中的classic和module脚本有什么区别？

【问题讨论】：

标签： javascript module es6-modules

【解决方案1】：

以下是我从各种文章中注意到的差异。如果您想了解更多详细信息，请阅读网络上的完整文章：

模块是单例的。它们只会被加载和执行一次。
模块可以使用导入和导出。
模块始终以严格模式执行。
除非明确导出，否则所有对象（类、const、函数、let 或 var）都是私有的。
“this”的值在外部范围（不是窗口）未定义。
模块是异步加载的。
使用 CORS 加载模块。请参阅访问控制允许来源：*。
默认情况下，模块不发送 cookie 和身份验证信息。请参阅 crossorigin="use-credentials"。
导入在加载时静态解析，而不是在运行时动态解析。
不允许使用 html cmets。

【讨论】：

【解决方案2】：

经典脚本 就是您所知道的标准 JavaScript 脚本。 模块脚本是包含ES6 module的脚本，即它使用（或：可以使用）import和export声明。

来自§8.1.3.8 Integration with the JavaScript module system：

JavaScript 规范定义了模块的语法，以及他们的处理模型的一些与主机无关的部分。本规范定义其处理模型的其余部分：模块系统如何引导，通过 script 元素将 type 属性设置为 "module"，以及如何获取、解析和执行模块。 [JAVASCRIPT]

注意： 尽管 JavaScript 规范是用“脚本”与“模块”来表述的，但总的来说，这个规范是用“脚本”和“模块”来表述的 classic scripts 的条款与module scripts 相比，因为它们都使用脚本元素。

也可以看看https://blog.whatwg.org/js-modules。

【讨论】：

这显然是正确的，但它提供的信息太少，我仍然感到不满意。 OP 提供的 classic scripts 链接是无用的文档（这可能是造成混乱的原因）。这个答案“简单地”给出了基本的机制。但我的问题——可能还有其他人的问题——是如何使用它？例如，在其他语言中，模块是您（可以）导入的任何内容，脚本是您（可以）执行的任何内容。但是这个定义通常有点“模糊”。在新的 JS 中，他们似乎想要更严格。但最佳做法是什么？？
实际上，假设this documentation 仍然准确，它的帮助要大得多。
@MikeWilliamson JS 确实以非常模糊的含义使用了术语“模块”（“创建对象以使公众可以使用的一些代码”），但在问题和因此这个答案我们专门参考 ES6 模块语法。
@MikeWilliamson 我只是假设现在每个人都知道“ES6 模块”，这就是我没有包含链接的原因。已编辑。