javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js script 标签type值

js中<script> 标签中type值及其含义

作者:Code_Geo

在 HTML 中的 script 标签中,type 属性用于指定脚本的 MIME 类型,也即告诉浏览器该如何解释和处理脚本的内容,这篇文章主要介绍了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)执行。使用模块时,浏览器会对每个模块进行独立的处理,可以避免全局命名冲突。

特点:

示例:

<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”

<script type="text/babel">
    const element = <h1>Hello, world!</h1>;
    ReactDOM.render(element, document.getElementById('root'));
</script>

6. type=“text/coffeescript”

<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”

<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”

<script type="text/x-template" id="my-template">
    <div>
        <h1>{{ title }}</h1>
        <p>{{ description }}</p>
    </div>
</script>

10. 省略 type 属性

<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值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文