随机名言生成器中const变量localQuotes未定义是什么原因？

• 核心问题是HTML中quotes.js的引入标签存在语法错误：你误将src属性写在了<script>标签的内部，而非标签属性位置，浏览器会将这行内容当作普通脚本执行，不会加载quotes.js文件。这就导致quotes.js中定义的localQuotes变量根本没有被注入到页面全局作用域，script.js执行时找不到该变量，因此抛出引用错误。
• 次要排查点：即使引入语法正确，也要保证quotes.js的引入顺序在script.js之前，否则后者执行时前者的变量还未完成定义，也会报相同错误。

基础修复（适用于普通脚本引入场景） #

1. 先修正HTML的脚本引入代码，保证语法正确、顺序正确：

<!-- Script -->
<script src="quotes.js"></script>
<script src="script.js"></script>

2. 如果修复引入后仍报错，可以调整quotes.js的变量定义方式，将变量明确挂载到全局window对象，避免作用域隔离问题：

window.localQuotes = [
 {
    text: '愤怒最好的解药是等待。',
    author: '塞涅卡',
  },
  {
    text: '成长本身就蕴含着幸福的胚芽。',
    author: '赛珍珠',
  },
  {
    text: "你可以选择做合理的事，也可以选择去开拓可能性的边界。",
    author: null,
  },
  // 剩余的名言数据
];

模块化场景适配（如果后续给脚本加了type="module"属性） #

如果使用ES模块化规范，每个JS文件是独立作用域，需要用导出导入语法传递变量：

1. quotes.js中导出变量：

export const localQuotes = [/* 名言数据 */]

2. script.js开头导入变量：

import { localQuotes } from './quotes.js'

3. HTML中引入script.js时添加模块化标识：

<script type="module" src="script.js"></script>

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