js中＜script＞ 标签中type值及其含义

在 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 常用于前端模板引擎中。