模块是防治全局变量污染最自然可靠的方式,每个模块拥有独立顶层作用域,声明默认私有、不挂载全局对象,需显式 export 才能暴露,import 建立明确依赖且支持 tree-shaking 和类型推导。

模块是现代 JavaScript 防治全局变量污染最自然、最可靠的方式。它不靠“躲”或“限制”,而是从执行环境层面重定义了作用域规则——每个模块文件默认拥有独立顶层作用域,天然隔绝污染。
ES 模块让顶层声明自动私有
在 <script type="module"></script> 或 .mjs 文件中,所有 const、let、function 声明都只在当前模块内有效,不会挂到 window 或 globalThis 上。
- 写
const API_URL = 'https://api.example.com';→ 它只属于这个模块,其他文件访问不到 - 写
function helper() { }→ 不会变成window.helper,也不影响其他模块同名函数 - 没有
"use strict"也默认启用严格模式,未声明赋值直接报错,杜绝隐式全局
显式导出才是唯一暴露途径
模块不自动共享任何东西,必须用 export 明确声明哪些内容可被外部使用。这强制开发者思考“谁需要这个?为什么?”
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 命名导出:
export const TIMEOUT = 5000;、export function retry() { } - 默认导出:
export default class ApiClient { },一个模块仅一个 - 重命名导出:
export { helper as utilsHelper };,避免命名冲突 - 聚合导出:
export * from './constants.js';,集中管理但不增加全局变量
导入即建立明确依赖关系
用 import 引入时,变量绑定在当前模块作用域,不是全局引用。即使多个模块都 import { STATUS_OK },它们拿到的是各自作用域内的绑定,互不影响。
-
import { STATUS_OK } from './constants.js';→ 只在本文件可用,删掉这行,变量就彻底不可见 - 打包工具能据此做 tree-shaking,未使用的导出不会进入最终代码
- 类型系统(如 TypeScript)能精准推导类型,IDE 自动补全更可靠
兼容旧环境也能平滑过渡
不需要构建工具,浏览器原生支持 ESM。老项目可逐步迁移:先将核心逻辑抽成模块,再通过动态 import() 加载,最后替换传统脚本。
- HTML 中直接引入:
<script type="module" src="main.js"></script> - 动态导入按需加载:
const { render } = await import('./ui.js'); - 与 IIFE 或命名空间共存:模块内仍可安全挂载
window.MyApp,但已非必需
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










