script标签的`type=module`有什么作用?

news/2024/12/28 10:02:53/文章来源:https://www.cnblogs.com/ai888/p/18637200

在HTML中,<script>标签的type="module"属性用于指定一个JavaScript脚本应该被当作ES6模块(ECMAScript 6模块,也被称为ES Modules或ESM)来处理。

使用type="module"<script>标签有几个重要的特性和行为:

  1. 默认异步加载:与常规的<script>标签(没有type="module"属性)不同,模块脚本默认是异步加载的,这意味着它们不会阻止HTML解析器解析页面的其余部分。这可以改善页面加载性能,因为浏览器可以在等待模块脚本下载和执行的同时继续解析和渲染页面。
  2. 支持ES6模块语法:使用type="module"的脚本可以使用ES6模块的导入(import)和导出(export)语法。这使得你可以更容易地组织和重用代码,以及利用诸如代码分割和按需加载等高级功能。
  3. 严格模式:模块脚本自动在严格模式下运行,这意味着它们必须遵循更严格的JavaScript语法和语义规则。这有助于减少错误并提高代码质量。
  4. 作用域隔离:模块脚本有自己的顶级作用域,而不是共享全局作用域。这意味着在模块脚本中声明的变量、函数等不会污染全局作用域,从而减少了命名冲突和意外的副作用。
  5. 跨域限制:出于安全考虑,模块脚本遵循更严格的跨域加载策略。默认情况下,你不能从一个源加载并执行来自另一个源的模块脚本,除非后者明确允许通过CORS(跨源资源共享)机制进行跨域加载。

下面是一个简单的示例,展示了如何使用type="module"<script>标签加载一个ES6模块:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES6 Module Example</title>
</head>
<body><h1>Hello, World!</h1><script type="module">import { myFunction } from './myModule.js';myFunction();</script>
</body>
</html>

在这个示例中,<script type="module">标签加载并执行了一个名为myModule.js的ES6模块,该模块导出了一个名为myFunction的函数。然后,页面上的脚本调用了这个函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/860292.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用html5实现图片随手机重力感应而移动

在前端开发中,实现图片随手机重力感应而移动的功能,通常需要结合HTML5、CSS以及JavaScript,并利用设备的重力感应API。然而,直接通过HTML5和JavaScript访问设备的重力感应数据是有限的,因为这通常涉及到设备的底层硬件功能。在大多数情况下,这种功能是通过移动应用的原生…

【安全工具】Cobalt Strike使用教程:内网渗透之信息收集篇

一、前言二、内网信息收集篇2.1 判断是否存在域2.2 域内存活主机探测2.3 域内基础信息收集2.4 域内控制器的查找2.5 定位域管理员工具2.5.1 通过psloggedon.exe2.5.2 通过PVEFindADUser.exe2.5.3 通过PowerSploit的PowerView2.5.4 通过NetSess工具2.6 查找域管理进程2.6.1 本地…

pip安装包时报错 unable to get local issuer certificate

解决:pip install openpyxl -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com

【安全运营】新一代安全运营

为什么企业投入了很高成本做安全建设后,安全事件还是层出不穷? 主要有以下四个原因: 1、资产管理、脆弱性修复等工作难开展 2、威胁看不清、防不住、难溯源 3、安全能力碎片化,难以在统一策略下完成协同响应 4、高阶人才稀缺,运营难有效持续为更好解决以上中问题的根因,安…

【甲方安全】电力行业+方案分享:新一代集控站设备监控系统网络安全建设

随着信息技术的快速发展,现代工业和生产环境对自动化和智能化的需求不断增加,新一代集控站设备监控系统(以下简称“集控系统”)满足了管辖范围内无人值班变电站一、二次设备和辅助设备远程集中监视、操作及控制等任务,同时满足现场运维检修、设备管理和应急处置等业务需求…

java8--方法--Date--格式化

System.out.printf("%tc",new Date()); 效果图:ps: t二十四小时制,c自然语言描述的月日星期、同时还有数字的时钟和时区信息。 pss: r是十二小时制

创建用于预测序列的人工智能模型,用Keras Tuner探索模型的超参数。

上一篇:《创建用于预测序列的人工智能模型(五),调整模型的超参数》 序言:在完成初步的模型研发后,接下来的重点是探索和优化超参数。通过合理调整超参数(如学习率、动量参数、神经元数量等),可以进一步提高模型的性能和准确性。这一过程需要结合工具(如 Keras Tuner)…

开源GTKSystem.Windows.Forms框架让C# Winform支持跨平台运行

前言 在咱们的印象中C# WinForm一直只支持Windows系统运行,无法支持跨平台运行。今天大姚给大家分享一个开源框架:GTKSystem.Windows.Forms,它能够让C# Winform支持跨平台运行。 项目介绍 GTKSystem.Windows.Forms是一个C#桌面应用程序跨平台(Windows、Linux、macOS)开发框…

SPIR-V的开源编译器生态系统API分层

API分层 SPIR-V的开源编译器生态系统越来越强大。 1.行分层 无需额外的内核级驱动程序即可实现内容,从而使平台受益。 OpenCL接口分层,如图1-30所示。图1-30 OpenCL接口分层 2.列分层 即使没有本机驱动程序,也可以跨多个平台提供API,以便提供应用程序部署灵活性并消除碎片,…

分层OpenCL实现

分层OpenCL实现 OpenCL接口分层实现,如图1-31所示。图1-31 OpenCL接口分层实现人工智能芯片与自动驾驶

《智能汽车传感器:原理设计应用》《AI芯片开发核心技术详解》新书推荐

两本书推荐《AI芯片开发核心技术详解》、《智能汽车传感器:原理设计应用》由清华大学出版社资深编辑赵佳霓老师策划编辑的新书《AI芯片开发核心技术详解》已经出版,京东、淘宝天猫、当当等网上,相应陆陆续续可以购买。该书强力解析AI芯片的核心技术开发,内容翔实、知识点新…

Excel+Python 飞速搞定数据分析与处理(图灵出品)PDF免费下载

零基础Python编程数据分析,Excel办公自动化处理,告别烦琐公式,办公人士也能轻松学习Python数据处理自动化,让你的Excel快得飞起来!适读人群 :本书既适合Excel用户,也适合Python用户阅读。电子版仅供预览,下载后24小时内务必删除,支持正版,喜欢的请购买正版书籍:http…