HTML5如何避免全局变量污染_HTML5作用域优化建议【指南】

HTML5不提供作用域隔离，全局污染由JavaScript组织方式决定；type="module"启用ES模块默认严格模式与顶层作用域隔离，let/const/function不挂window，需export/import显式访问。

HTML5 本身不提供作用域隔离机制，全局变量污染完全取决于你写的 JavaScript 怎么组织——window 对象照单全收，不管是不是 或 。

用 type="module" 自动获得模块作用域

浏览器原生 ES 模块默认是严格模式 + 顶层作用域隔离，脚本内声明的 let、const、function 不会挂到 window 上。

• 必须显式加 type="module"，哪怕只是空文件：

• 模块内 export 的内容需被 import 才能访问，未导出即私有
• 注意：模块脚本默认 defer 行为，不会阻塞 HTML 解析
• 不支持 IE，现代浏览器（Chrome 61+、Firefox 60+、Safari 10.1+）均可用

var 声明在非模块脚本中仍会污染全局

即使写在 标签里，var 在全局上下文声明仍等价于 window.xxx，而 let/const 不会——但前提是没在函数外直接写。

• 错误示范：

• let/const 在非模块脚本的顶层声明属于“脚本作用域”，不是 window 属性，但仍是全局可读（只是不可枚举、不可配置）
• 真正安全的做法是：非模块脚本也包裹立即执行函数（IIFE），或直接切模块

避免隐式全局：禁用 with、慎用 eval、检查 this 绑定

这些语法会让变量意外泄漏到全局，且难以静态分析。

• with 已被严格模式禁止，但若漏写 "use strict"，内部赋值可能创建全局变量
• eval("var x = 1") 在非严格模式下会在当前作用域（可能是全局）创建变量
• 事件回调中 this === window 时，this.xxx = y 就等于 window.xxx = y
• 推荐统一用箭头函数或显式 bind 避免 this 漂移

最省心的方式就是从第一个 开始就用 type="module"，配合 export/import 显式管理依赖。别指望 HTML5 自动帮你管作用域——它只提供载体，JS 才决定变量去哪落脚。