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

2024-08-29 03:36
文章标签 script js type 标签 含义

本文主要是介绍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 * xconsole.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值及其含义的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1116723

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

javascript中break与continue的区别

在javascript中,break是结束整个循环,break下面的语句不再执行了 for(let i=1;i<=5;i++){if(i===3){break}document.write(i) } 上面的代码中,当i=1时,执行打印输出语句,当i=2时,执行打印输出语句,当i=3时,遇到break了,整个循环就结束了。 执行结果是12 continue语句是停止当前循环,返回从头开始。

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

Oracle type (自定义类型的使用)

oracle - type   type定义: oracle中自定义数据类型 oracle中有基本的数据类型,如number,varchar2,date,numeric,float....但有时候我们需要特殊的格式, 如将name定义为(firstname,lastname)的形式,我们想把这个作为一个表的一列看待,这时候就要我们自己定义一个数据类型 格式 :create or repla

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>