html的script type全解教程

一、默认行为（不写type属性）

• 等效于 type="text/javascript"，浏览器会直接解析并执行其中的JavaScript代码。
• 是最常用的场景，无需额外声明，兼容所有浏览器。

二、常用type取值全解析

1. type="text/javascript"（标准执行型）

• 明确指定脚本为JavaScript，与默认行为一致。
• 用途：编写常规可执行JS代码，支持传统脚本语法（无模块作用域）。
• 示例：<script type="text/javascript">console.log('常规JS')</script>

2. type="module"（ES模块型）

• 核心用途：启用ES6模块功能，支持import导入、export导出。
• 关键特性：
  1. 脚本拥有独立模块作用域，变量不会泄露到全局。
  2. 自动启用strict mode（严格模式），不支持未声明变量。
  3. 加载时会阻塞HTML解析，但可配合async/defer异步加载。
  4. 模块内导入的文件需满足跨域要求（本地开发需启动服务器）。
• 示例：<script type="module">import { func } from './module.js';</script>

3. type="importmap"（模块映射型）

• 用途：定义模块导入的"路径映射规则"，简化import语法。
• 核心价值：无需写完整相对路径/绝对路径，直接用别名导入模块。
• 示例：

<script type="importmap">
  { "imports": { "lodash": "https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js" } }
</script>
<script type="module">import _ from 'lodash';</script> <!-- 直接用别名 -->

4. type="text/template"（模板型）

• 用途：存储非执行脚本，通常作为HTML模板（需配合框架/自定义解析）。
• 特性：浏览器不会执行该脚本，仅作为文本节点存储，可通过DOM获取内容。
• 示例：

<script type="text/template" id="tpl">
  <div class="card">{{content}}</div>
</script>
<script>const tpl = document.getElementById('tpl').innerHTML;</script> <!-- 后续解析模板 -->

5. 其他特殊取值

• type="text/ecmascript"：早期ES规范取值，已废弃，等同于text/javascript。
• type="application/javascript"：MIME类型标准写法，功能与text/javascript一致，兼容性略逊。
• type="text/vbscript"：指定VBScript脚本，仅IE浏览器支持，现已淘汰。

三、关键使用区别与注意事项

1. 模块脚本（module）与常规脚本的核心差异：
   • 作用域：模块内变量私有，常规脚本变量默认挂载到window。
   • 导入导出：仅模块支持import/export，常规脚本不支持。
   • 执行顺序：模块脚本按导入顺序执行，常规脚本按加载顺序执行。
2. 兼容性：importmap目前仅支持现代浏览器（Chrome 89+、Firefox 108+），需谨慎使用。
3. 非执行类型（如text/template）需自定义解析逻辑，不能直接运行