模块化开发通过ES模块默认私有作用域隔离全局变量,未export变量不可见;旧脚本可用IIFE+严格模式兜底;命名空间仅作临时过渡;ESLint、Webpack、TS等工具强化边界控制。

模块化开发中,全局变量的隔离不是靠“禁止使用”,而是通过作用域边界和显式导出机制,让变量自然待在该待的地方。核心是切断变量与 window(或 globalThis)的自动绑定关系。
用 ES 模块默认私有作用域
现代浏览器和构建工具默认启用 ES 模块(.js 文件加 type="module" 或打包后生成的代码),它的顶层作用域就是模块作用域:
-
const、let、function声明的变量不会挂到window上,哪怕没写"use strict",模块也自动启用严格模式 - 未
export的变量完全不可见,连同模块内部的状态、缓存、配置项都默认被封装 - 想暴露功能?必须显式
export;想使用?必须显式import,没有隐式路径
老脚本或第三方库用 IIFE + 严格模式兜底
遇到无法修改源码的旧脚本(比如直接引入的 <script src="legacy.js"></script>),可手动包裹隔离:
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式,或要求按照代码注释规范处理 Java 文件时,使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则,并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括:补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 在加载前插入:
(function() { "use strict"; /* legacy.js 内容 */ })(); - 这样所有
var声明变成函数局部变量,未声明赋值会立即报ReferenceError - 若库主动往
window挂东西(如window.$ = ...),可在包裹后补一句delete window.$;,再改用import $ from 'jquery'替代
命名空间仅作为过渡手段,不推荐长期依赖
当项目尚未全面模块化,又需临时共用少量接口时,可用单一层级命名空间收敛污染:
立即学习“Java免费学习笔记(深入)”;
- 只定义一个全局对象,例如
var MyApp = MyApp || {};,后续所有功能都挂载为MyApp.api、MyApp.utils - 避免多层泛用名:不用
utils、config、helper等易冲突的名字单独挂全局 - 命名空间只是“把混乱收进一个抽屉”,不是解决根本问题;应尽快迁移到
export/import结构
工具链强化边界意识
光靠语法不够,工程化手段能提前拦截疏漏:
- ESLint 启用
no-implicit-globals和no-unused-vars,编辑器里写count = 10就标红 - Webpack/Vite 默认将每个模块包裹在闭包中,即使你写了
var globalFlag = true,它实际也不在window上 - TypeScript 编译阶段检查重复导出、未使用导出,从源头减少命名冗余和误暴露

















