模块执行上下文重构核心是“隔离+注入”，将全局变量、函数、事件监听器按功能收束进es模块作用域，通过显式导出导入建立可控依赖，切断隐式耦合。
用模块执行上下文（Module Execution Context）重构全局代码，核心不是“重写”，而是“隔离+注入”。它把散落在 window 上的变量、函数、事件监听器等，按功能边界收束进 ES 模块作用域，并通过显式导出与可控导入建立依赖关系，从而切断隐式耦合。
识别并剥离全局污染点
先扫描代码中所有直接挂载到 window 或未声明就使用的标识符：比如 window.initMap、jQuery.fn.extend、裸露的 var config = {...}、document.addEventListener('DOMContentLoaded', ...)。这些是重构入口。
- 把全局变量转为模块顶层常量或默认配置，用
export const或export default暴露 - 将全局函数封装为具名导出函数，删掉
window.xxx = xxx这类赋值语句 - 把 DOM 就绪逻辑移入模块默认导出函数（如
export function mount() { ... }），由调用方统一触发
用动态导入替代 script 标签硬依赖
旧项目常靠 <script src="utils.js"></script> 顺序加载，导致执行时机不可控、依赖隐式传递。改为 ES 模块后，用 import 显式声明依赖。
- 把原来多个 script 标签合并为一个入口模块（如
main.js），在里面按需import功能模块 - 对异步加载场景（如按需地图 SDK），改用
const { initMap } = await import('./map.js')，避免阻塞主流程 - 第三方库若无 ESM 版本，可用
import * as $ from 'jquery'配合打包工具自动处理 CommonJS 转换
模拟模块作用域下的“全局”行为
有些逻辑看似需要全局状态（如用户登录态、主题切换），其实只需在模块内部维护单例对象，再通过导出的 getter/setter 控制访问。
- 创建
store.js，用闭包保存状态：let currentUser = null; export const setUser = (u) => currentUser = u; export const getCurrentUser = () => currentUser; - 避免
export let可变导出，优先用函数封装读写，防止外部意外篡改 - 事件总线也可模块化：
export const eventBus = new EventEmitter()，各模块import { eventBus }订阅/发布，不再依赖window.dispatchEvent
渐进迁移：保留旧入口，逐步替换子模块
不强求一次性全量重构。让 HTML 中仍保留旧的 <script></script>，但把其中某一块逻辑（如表单校验）抽成独立模块，在旧脚本里 import('./validator.js').then(m => m.validate()) 调用。
- 打包时启用
experiments.outputModule: true（Webpack 5+）或type: "module"（Vite），确保输出 ESM - 浏览器环境加
type="module"属性：<script type="module" src="main.js"></script>，旧脚本保持nomodule兜底 - 用
console.trace()定位仍在使用window.xxx的残留调用，逐个替换
不复杂但容易忽略。关键在于每次移动一段逻辑时，同步更新它的依赖声明和调用方式，让模块边界清晰起来。
