首页 > 其他分享 >script标签的`type="module"`有什么作用?

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

时间:2024-12-28 10:10:37浏览次数:6  
标签:脚本 ES6 script module 模块 type 加载

在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的函数。然后,页面上的脚本调用了这个函数。

标签:脚本,ES6,script,module,模块,type,加载
From: https://www.cnblogs.com/ai888/p/18637200

相关文章

  • [VUE]CALL_AND_RETRY_LAST分配失败-JavaScript堆内存不足 errno134
    使用vscode开发项目,由于项目较大,在运行npmrundev命令后,在一定的时间范围内,对vscode中的代码进行保存后,会自动编译运行,保存几次后就报错,需要重新运行npmrundev,很耗费时间)后报错报错:CALL_AND_RETRY_LASTAllocationfailed-JavaScriptheapoutofmemory(CALL_AND_RETRY_LAS......
  • coderwhy_Vue3+TypeScript
    【公开课】coderwhy_Vue3+TypeScript.mp4Vue3+TypeScript王红元coderwhyke.qq.com/course/3453141?tuin1635c7de《TypeScript数据结构与算法》《React技术栈权威指南》作者腾讯AI高校训练营多所985、211名牌大学特聘讲师。丰富的软件开发和教学经验,带领团队开发出众多公司大......
  • JavaScript开发中常见问题代码和相关优化Demo参考4.0
    31. 忽略错误处理的幂等性问题代码:functionupdateUser(id,updates){//更新用户信息}解决方案:确保API端点和函数调用是幂等的,即多次调用不会导致不同的结果。asyncfunctionupdateUser(id,updates){try{awaitfetch(`/api/users/${id}`,{meth......
  • Type-C PD诱骗取电芯片在小家电中的应用
    随着电子设备的种类不断增加,对充电的效率要求也在提高,特别是在智能家居和互联网邻域,设备需要频繁充电,高效充电解决方案的需求也在日益增长,此外,节能环保的社会趋势也在促使增效、节能设备的需求怎加,从而带动取电协议芯片的市场需求。取电协议芯片的技术不断进步,整合型产品将外......
  • 如何使用 TypeScript 和 Jest 编写高质量单元测试
    前言在前端开发中,TypeScript和Jest是两款不可或缺的工具。TypeScript提供了强大的静态类型检查和现代JavaScript特性,显著提高了代码的可靠性和可维护性。而Jest作为一个功能丰富的测试框架,能够方便地编写和运行各种测试,从单元测试到集成测试。本文将详细介绍如何......
  • anime.js-强大的Javascript动画库插件
    anime.js是一款功能强大的Javascript动画库插件。anime.js可以和CSS3属性,SVG,DOM元素和JS对象一起工作,制作出各种高性能,平滑过渡的动画效果。在线预览  下载               使用方法在页面中引入anime.min.js文件。<scripttype="te......
  • 【Pandas】pandas Series convert_dtypes
    Pandas2.2SeriesConversion方法描述Series.astype用于将Series对象的数据类型转换为指定类型的方法Series.convert_dtypes用于将Series对象的数据类型智能地转换为最佳可能的数据类型的方法pandas.Series.convert_dtypespandas.Series.convert_dtypes方法是Pandas......
  • 前端面试题合集(一)——HTML/CSS/Javascript/ES6
    前端经典面试题总结前端开发领域涵盖了大量的知识点,面试中的经典问题通常集中在HTML、CSS、JavaScript及ES6等基础技能上。以下是针对这些知识点的一些总结:1.HTMLHTML是Web页面结构的基础,它定义了网页的内容和结构。面试中的HTML问题常常涉及到常见标签的使用......
  • 你学习javascript的路线是怎样的?
    学习JavaScript(特别是针对前端开发)的路线可以因人而异,但以下是一个建议的学习路径,帮助你从基础到进阶,再到深入掌握JavaScript和前端开发技术:阶段一:基础学习JavaScript基础语法:变量、数据类型(Number,String,Boolean,Object,Null,Undefined等)运算符(算术、比较、逻辑、位......
  • 说说你对JavaScript与有限状态机的理解
    JavaScript:JavaScript是一种轻量级、解释型或即时编译型的编程语言,被广泛用于Web前端开发。它可以控制网页的行为,实现各种动态效果,与用户进行交互等。JavaScript的核心语法包括变量、数据类型、运算符、控制结构、函数等,同时它还支持面向对象编程。在前端开发中,JavaScript通常......