每日见闻之<script type="module"> 的含义与作用

<script type="module"> 是 HTML 中用来加载 JavaScript ES Module（ESM） 的一种方式。它与传统的 <script> 标签不同，具有模块化、作用域隔离、支持 import/export 等特性。

JavaScript ES Module（ESM） 指的是 ECMAScript 6.0（ES6）引入的官方模块系统，它为 JavaScript 提供了标准化的模块导入 / 导出语法，解决了早期模块规范（如 CommonJS、AMD）的局限性。

一、基本用法

js 复制代码

<script type="module">
  import { sayHi } from './greetings.js';
  sayHi('world');
</script>

或者

js 复制代码

<script type="module" src="./main.js"></script>

ES Module 语法天生支持模块化，使用 import 引入模块，export 导出内容。

js 复制代码

// greetings.js
export function sayHi(name) {
  console.log(`Hi, ${name}!`);
}

// main.js
import { sayHi } from './greetings.js';
sayHi('ChatGPT');

所有模块文件自动以 use strict 模式执行，不需要显式声明。

不像普通 <script>，模块不会污染全局变量：

js 复制代码

<script>
  var foo = 123; // 全局变量
</script>

<script type="module">
  var foo = 456; // 局部模块作用域，互不影响
</script>

普通 <script> ：✅ 每次遇到 <script> 标签（或动态插入脚本），都会重新执行脚本内容，可能重复初始化逻辑。
<script type="module"> ：✅ 模块脚本只执行一次，后续无论多少次引用（如重复 import 同一模块），都复用首次执行的结果，避免重复初始化。

js 复制代码

// a.js
console.log('Module A loaded');
export const a = 1;

即使多次 import './a.js'，只执行一次。

模块默认使用 CORS（跨源资源共享）策略。跨域模块必须正确设置 Access-Control-Allow-Origin，否则加载失败。

普通 <script> ：❌ 默认同步加载，会阻塞 HTML 解析渲染；需手动加 defer（按顺序异步执行）或 async（完全异步，不保证顺序）控制。
<script type="module"> ：✅ 天生异步加载，不阻塞页面渲染，且多个模块脚本按在 HTML 中的顺序执行，兼顾性能与依赖顺序。

js 复制代码

<script type="module" src="./main.js"></script>

注意路径需要以 ./ 或 / 开头，不能省略（不能直接写 main.js）。