如果默认为text/javascript,脚本元素的HTML"nomodule"属性的目的是什么?

dma*_*man 34 html javascript html5 ecmascript-6 es6-modules

我不清楚为什么在nomodule支持ES6模块的新浏览器中存在该属性.

在HTML 5中,该type属性是可选的,默认为text/javascript:

type属性提供脚本的语言或数据的格式.如果该属性存在,则其值必须是有效的MIME类型.不得指定charset参数.如果属性不存在,则使用默认值"text/javascript".

它不默认<script type="module" src="module.js"></script>.此默认值已更改?如果没有,为什么nomodule有必要?我可以<script src="bundle.js"></script>不用nomodule吗?

sid*_*ker 69

属性目的nomodule是使支持模块脚本的较新浏览器忽略特定script元素:

nomodule属性是一个布尔属性,用于阻止脚本在支持模块脚本的用户代理中执行.

该规范有一个很好的例子:

此示例显示如何为现代用户代理包含模块脚本,以及为旧用户代理包含经典脚本:

<script type="module" src="app.js"></script>
<script nomodule src="classic-app-bundle.js"></script>
Run Code Online (Sandbox Code Playgroud)

在支持模块脚本的现代用户代理中,将忽略script具有该nomodule属性的script元素,并且module将获取和评估具有类型" " 的元素(作为模块脚本).相反,较旧的用户代理将忽略script具有类型" module" 的元素,因为它是一种未知的脚本类型 - 但是它们在获取和评估其他script元素(作为经典脚本)时没有问题,因为它们没有实现的nomodule属性.

这就是它的工作原理.

在HTML 5中,该type属性是可选的,默认为text/javascript...此默认值是否已更改?

默认值没有改变 - 它仍然是text/javascript.但是该type属性现在也可以具有该值module,这意味着浏览器仍然会解析并执行它text/javascript- 但也特别是作为模块脚本.

如果没有,为什么nomodule有必要?

为了防止支持模块脚本的新浏览器执行仅适用于不支持模块脚本的旧浏览器的脚本,这是必要的,如上例所示.

我可以<script src="bundle.js"></script>不用nomodule吗?

是 - 如果bundle.js不使用模块.如果它使用模块,你想要加上type=module它(在这种情况下,旧的浏览器会忽略它,因为它们不能识别它的moduletype).

  • @IrfandyJip 在哪里使用新功能,是的。它可以帮助您针对较新的浏览器进行优化,因为它们不必处理大量仅用于与旧浏览器兼容的代码。Angular 8 做到了这一点,并将其称为“差异加载”。在我正在进行的一个项目中,它使我们能够将现代浏览器的代码大小几乎减少一半。 (2认同)

Wil*_*een 10

无模块属性

该nomodule属性是用来指示浏览器中的布尔属性,它不支持模块,某脚本标签并不需要加载

nomodule 属性的目的是为不支持的旧浏览器提供备份脚本<script type="module">,因此将忽略它​​们。由于旧版浏览器既不支持<script type="module">也不支持nomodule 属性,可能会出现以下情况:


较新的浏览器,支持<script type="module">& <script nomodule type="text/javascript">

  • 浏览器可以加载并执行<script type="module">脚本
  • 浏览器识别 nomodule 属性并且不加载<script nomodule type="text/javascript">.

较旧的浏览器支持<script type="module">& <script nomodule type="text/javascript">

  • 浏览器将忽略 ,<script type="module">因为它的实现无法处理它。不会下载和执行任何脚本。
  • 浏览器将忽略 nomodule 属性,并将继续下载和执行 <script nomodule type="text/javascript">脚本。