报ReferenceError: XXX is not defined，90%因脚本执行顺序与变量声明时机不匹配：每个<script>块作用域独立，变量提升不跨块，let/const存在TDZ，defer不共享变量，模块需统一type="module"，动态插入脚本也无上下文继承。
直接结论：报 ReferenceError: XXX is not defined，90% 是因为脚本执行顺序和变量声明时机不匹配，不是路径错、也不是语法错，而是 HTML 中 <script> 的加载与执行被浏览器按规则“切开”了。
为什么第二个 <script> 读不到第一个里 var a = 1
变量提升（hoisting）只发生在单个 <script> 块的创建阶段，块之间不共享上下文。也就是说：var a 的声明会被提升，但 a = 1 的赋值仍发生在该脚本块的执行阶段；下一个 <script> 块启动时，它面对的是一个全新的执行环境，看不到前一个块里还没执行到的赋值语句。
- 如果第一个脚本是
<script>var a = 1;</script>，第二个是<script>console.log(a);</script>，且顺序正确 → 输出1 - 如果顺序颠倒 → 第二个脚本执行时，
a确实未声明，报ReferenceError - 若第一个脚本用
let a = 1，哪怕位置在前，第二个脚本仍会报错 ——let不提升，且存在暂时性死区（TDZ）
用 defer 能解决顺序问题，但要注意它不等于“同步执行”
defer 确保脚本按 HTML 中书写顺序执行，且等到 DOM 解析完成才运行，但它**不会让变量跨块自动可见**——每个 <script defer> 仍是独立作用域，除非你显式挂到 window 上。
-
<script defer src="utils.js"></script>定义了const format = () => {}→ 后续内联脚本无法直接访问format - 想让其他脚本用，得在
utils.js末尾加一句：window.format = format; -
defer只对同域外部脚本有效；动态插入的document.createElement('script')不继承defer行为，需手动控制
ES 模块（type="module"）彻底绕过全局变量依赖
模块默认隔离作用域，import/export 显式声明依赖，不再靠 window 拼凑变量链。但必须注意：HTML 中所有相关脚本都要统一走模块路径，不能混用。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<script src="lib.js"></script>（传统脚本） +<script type="module" src="main.js"></script>→main.js里import不会从lib.js拿东西 - 正确做法：把
lib.js也改成模块，然后main.js写import { helper } from './lib.js'; - 浏览器兼容性：Chrome 61+、Firefox 60+、Safari 10.1+ 支持；IE 完全不支持，需打包降级
动态插入脚本时，别指望“接续上一个块的变量”
用 document.createElement('script') 插入的脚本，会开启全新执行上下文——它有自己的提升阶段，不继承前序脚本中 let/const 的值，也不感知尚未执行的 var 赋值。
- 常见坑：
script.innerHTML = 'console.log(a)'→ 不会重新执行，只是字符串替换，变量状态不变 - 想确保变量可用，要么提前挂到
window，要么用Promise链控制加载顺序：loadScript('a.js').then(() => loadScript('b.js')) -
script.async = false可强制同步，但会阻塞解析，慎用；script.defer = true对动态插入无效
最易被忽略的一点：即使所有脚本都按顺序加载完毕，如果某个脚本内部依赖 DOM 节点（比如 document.getElementById），而调用发生在 <body> 解析完成前，依然会失败——这时变量存在，但操作目标不存在。不要只盯 ReferenceError，也得看 TypeError: Cannot read property 'xxx' of null。
