在 HTML 中的 script 标签中,type 属性用于指定脚本的 MIME 类型,也即告诉浏览器该如何解释和处理脚本的内容。常用的 type 值以及它们的含义如下:
1. type=“text/javascript”
- 含义: 指定脚本是 JavaScript 类型。这是早期的标准方式,现代浏览器默认都会将script标签中的内容当作 JavaScript 处理,因此不再需要显式指定。
- 示例
<script type="text/javascript">
console.log("This is a JavaScript script.");
</script>
2. type=“module”
-
含义: 指定脚本是一个 JavaScript 模块。模块可以导入和导出其他模块,并且默认以严格模式(strict mode)执行。使用模块时,浏览器会对每个模块进行独立的处理,可以避免全局命名冲突。
-
特点:
- 可以使用 import 和 export 语法。
- 支持 import.meta 和动态导入 (import())。
- 模块中的代码自动运行在严格模式下
-
示例:
<script type="module">
import { myFunction } from './myModule.js';
myFunction();
</script>
3.type=“application/javascript”
- 含义: 这是 text/javascript 的另一个有效 MIME 类型,同样用于指定 JavaScript 类型。虽然技术上是正确的,但在实践中较少使用。
- 示例
<script type="application/javascript">
console.log("This is a JavaScript script.");
</script>
4. type=“application/json”
- 含义: 用于包含 JSON 数据。浏览器不会执行 script标签中的内容,而是可以通过 JavaScript 代码使用该数据。通常用于嵌入页面内的静态数据。
<script type="application/json" id="myData">
{
"name": "John",
"age": 30
}
</script>
<script>
const dataElement = document.getElementById('myData');
const jsonData = JSON.parse(dataElement.textContent);
console.log(jsonData.name); // 输出 "John"
</script>
5. type=“text/babel”
- 含义: 通常用于 JSX 或 ES6+ 代码,表示这些代码需要使用 Babel 转译器来处理。浏览器本身不会识别此类型的脚本,通常需要在开发过程中通过 Babel 转换成兼容的 JavaScript 代码。
- 示例:
<script type="text/babel">
const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));
</script>
6. type=“text/coffeescript”
- 含义: 用于 CoffeeScript 代码。浏览器不能直接执行 CoffeeScript,通常需要一个预处理器将其转换成 JavaScript。
- 示例
<script type="text/coffeescript">
square = (x) -> x * x
console.log(square(3))
</script>
7. type=“text/plain”
- 含义: 浏览器会将内容作为纯文本处理,而不是脚本。这意味着内容不会被执行或解析。
- 示例:
<script type="text/plain">
console.log("This will not be executed as JavaScript.");
</script>
8. type=“application/ld+json”
- 含义: 用于嵌入 JSON-LD(JavaScript Object Notation for Linked Data)数据,通常用于结构化数据标记(如向搜索引擎提供额外的元数据)
- 示例:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "John Doe",
"jobTitle": "Software Engineer",
"url": "https://www.example.com"
}
</script>
9. type=“text/x-template”
- 含义: 用于定义 JavaScript 模板(如 Vue.js 的模板)。浏览器不会解析和执行内容,通常在 JavaScript 代码中获取并使用模板。
- 示例:
<script type="text/x-template" id="my-template">
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</script>
10. 省略 type 属性
- 含义: 如果省略 type 属性,浏览器默认将其作为 text/javascript 处理。这也是现代 Web 开发中最常用的方式。
- 示例:
<script>
console.log("This is JavaScript by default.");
</script>
总结
不同的 type 值适用于不同的场景和需求。type=“module” 和 type=“text/javascript” 是目前最常用的用于 JavaScript 的类型。而像 application/json 和 application/ld+json 则用于特定类型的数据嵌入,text/x-template 常用于前端模板引擎中。