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

到此这篇关于js中＜script＞ 标签中type值及其含义的文章就介绍到这了,更多相关js ＜script＞ 标签type值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论