在HTML中,<script>
标签的type="module"
属性用于指定一个JavaScript脚本应该被当作ES6模块(ECMAScript 6模块,也被称为ES Modules或ESM)来处理。
使用type="module"
的<script>
标签有几个重要的特性和行为:
- 默认异步加载:与常规的
<script>
标签(没有type="module"
属性)不同,模块脚本默认是异步加载的,这意味着它们不会阻止HTML解析器解析页面的其余部分。这可以改善页面加载性能,因为浏览器可以在等待模块脚本下载和执行的同时继续解析和渲染页面。 - 支持ES6模块语法:使用
type="module"
的脚本可以使用ES6模块的导入(import
)和导出(export
)语法。这使得你可以更容易地组织和重用代码,以及利用诸如代码分割和按需加载等高级功能。 - 严格模式:模块脚本自动在严格模式下运行,这意味着它们必须遵循更严格的JavaScript语法和语义规则。这有助于减少错误并提高代码质量。
- 作用域隔离:模块脚本有自己的顶级作用域,而不是共享全局作用域。这意味着在模块脚本中声明的变量、函数等不会污染全局作用域,从而减少了命名冲突和意外的副作用。
- 跨域限制:出于安全考虑,模块脚本遵循更严格的跨域加载策略。默认情况下,你不能从一个源加载并执行来自另一个源的模块脚本,除非后者明确允许通过CORS(跨源资源共享)机制进行跨域加载。
下面是一个简单的示例,展示了如何使用type="module"
的<script>
标签加载一个ES6模块:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES6 Module Example</title>
</head>
<body><h1>Hello, World!</h1><script type="module">import { myFunction } from './myModule.js';myFunction();</script>
</body>
</html>
在这个示例中,<script type="module">
标签加载并执行了一个名为myModule.js
的ES6模块,该模块导出了一个名为myFunction
的函数。然后,页面上的脚本调用了这个函数。