每日见闻之<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>

二、 核心特性详解

1. 支持 import / export

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

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

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

2. 模块是默认严格模式(strict mode)

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

3. 模块代码是作用域隔离的

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

js 复制代码
<script>
  var foo = 123; // 全局变量
</script>

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

4. 模块只加载一次(即使被多次引用)

  • 普通 <script> :✅ 每次遇到 <script> 标签(或动态插入脚本),都会重新执行脚本内容,可能重复初始化逻辑。
  • <script type="module"> :✅ 模块脚本只执行一次,后续无论多少次引用(如重复 import 同一模块),都复用首次执行的结果,避免重复初始化。
js 复制代码
// a.js
console.log('Module A loaded');
export const a = 1;

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

5. 模块通过 CORS 加载

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

6. 模块加载是异步的

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

三、与默认 script 不同点对比

特性 <script> (普通脚本) <script type="module"> (ES模块)
模块系统支持 ❌ 不支持 import/export ✅ 原生支持 ES6 模块语法
严格模式 ❌ 默认非严格模式 ✅ 自动启用严格模式 ('use strict')
作用域 ❌ 变量挂载到全局作用域 (window) ✅ 独立作用域,不污染全局
加载顺序 ❌ 同步加载,阻塞 HTML 解析 ✅ 异步加载,不阻塞页面渲染
执行顺序 ❌ 按加载完成顺序执行 ✅ 按在 HTML 中出现的顺序执行
重复执行 ✅ 每次加载都会重新执行 ✅ 模块只执行一次,后续复用结果
路径要求 ❌ 相对路径可省略扩展名 ✅ 必须使用完整路径(如 ./module.js
兼容性 ✅ 所有浏览器支持 ✅ 现代浏览器支持(IE 不支持)

四、注意点

1 本地模块加载

js 复制代码
<script type="module" src="./main.js"></script>

注意路径需要以 .// 开头,不能省略(不能直接写 main.js)。

2 文件必须是 .js.mjs,不能用 CommonJS 风格(如 require())。

相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8506 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的7 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀7 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce9 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L9 小时前
Vue 电影导航组件
前端·javascript·vue.js
xptwop11 小时前
05-ES6
前端·javascript·es6
Heo11 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端