页面加载时ReferenceError: youtubeBgVideoStyle未定义的原因分析

这个错误其实很直白——你的代码在尝试使用youtubeBgVideoStyle这个变量/函数，但当前执行环境里根本找不到它的定义。常见的原因大概有这几种：

• 压根没定义这个变量/函数：你可能漏写了youtubeBgVideoStyle的声明代码，比如本来应该写const youtubeBgVideoStyle = /* 你的CSS生成逻辑 */或者对应的函数声明，但没写；或者是你以为某个第三方脚本会提供这个变量，但实际上并没有。
• 加载顺序搞反了：如果youtubeBgVideoStyle是在某个脚本文件里定义的，但你在调用它的HTML指令之后才加载这个脚本，页面加载时会先执行指令里的代码，这时候脚本还没跑完，变量自然没初始化。比如你把动态生成CSS的指令放在了<head>里，而定义变量的脚本放在了<body>最底部，就会出现这个问题。
• 作用域不匹配：就算你定义了youtubeBgVideoStyle，但它被限制在了局部作用域里——比如在一个函数内部用let/const声明的，或者是在ES6模块里没导出的变量，全局环境（包括你的HTML指令）根本访问不到它。
• 脚本加载失败：如果这个变量是在外部JS文件里定义的，那可能是这个文件没加载成功——比如路径写错了、网络问题，或者文件本身有语法错误导致脚本中断执行，变量也就没被创建出来。
• 拼写/大小写错误：JS是区分大小写的！比如你定义的时候写的是YoutubeBgVideoStyle（首字母大写），但调用的时候写成了youtubeBgVideoStyle，或者少写了某个字母，这时候JS会认为是两个完全不同的变量，自然找不到。

内容的提问来源于stack exchange，提问作者methuselah