如何使JS文件中的ES6类在HTML中被识别？Chrome调试报错类未定义

嗨，我来帮你搞定这个类未定义的问题！你遇到的情况其实很常见——把传统IIFE封装的代码改成ES6类后，没跟上模块加载的规则，导致浏览器找不到你的UsherSchedule类。咱们一步步来解决：

第一步：把IIFE改成标准ES6类并正确导出 #

原来的IIFE是用闭包封装逻辑，现在改成ES6类后，要显式导出才能让其他脚本访问到。比如把你的类文件（比如usher-schedule.js）改成这样：

// usher-schedule.js
export default class UsherSchedule {
  constructor() {
    // 把原来的mssArrDays移到类的实例属性里
    this.mssArrDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    // 其他初始化逻辑放在这里
  }

  // 你的类方法，比如原来IIFE里的函数，直接写成类的方法
  getScheduleForDay(day) {
    // 具体逻辑实现
  }
}

这里的export default表示把这个类作为模块的默认导出，方便其他脚本导入。

第二步：在HTML中用模块方式引入脚本 #

传统的<script>标签是在全局作用域执行，但ES6模块有自己的作用域，必须给标签加上type="module"属性，浏览器才会按模块规则加载：

<!-- 先引入你的类模块 -->
<script type="module" src="./usher-schedule.js"></script>
<!-- 你的主脚本也要改成模块，因为要导入类 -->
<script type="module" src="./main.js"></script>

注意：如果你的主脚本依赖jQuery，要确保jQuery已经加载完成。如果是用CDN引入jQuery，模块里可以通过window.$来访问全局的jQuery对象。

第三步：在主脚本中导入类并使用 #

在你的主模块（比如main.js）里，先导入UsherSchedule类，再在jQuery的ready函数里实例化：

// main.js
// 如果jQuery是全局引入的，直接用window.$
import $ from './jquery.js'; // 要是用本地jQuery文件，就这么导入

import UsherSchedule from './usher-schedule.js';

$(document).ready(function() {
  // 现在就能正常实例化类了！
  const mySchedule = new UsherSchedule();
  console.log(mySchedule.mssArrDays); // 测试一下能不能访问属性
});

几个容易踩的坑要注意 #

• 本地开发必须用HTTP服务器：直接用file://协议打开HTML文件的话，ES6模块会因为同源策略报错，建议用VS Code的Live Server插件或者其他本地服务器运行。
• 不要在普通脚本里访问模块变量：模块内的变量默认不会挂载到全局，所以如果你的主脚本没加type="module"，是访问不到导出的类的。
• 路径要写对：模块导入的路径是相对当前脚本的路径，比如主脚本在根目录，类文件在js/文件夹里，就要写成import UsherSchedule from './js/usher-schedule.js';

如果实在不想用ES6模块（不推荐），也可以临时把类挂载到全局对象上：

// 不推荐的临时方案
class UsherSchedule {
  // ...类逻辑
}
// 把类挂载到window上，让全局能访问
window.UsherSchedule = UsherSchedule;

然后用普通<script>标签引入，这样jQuery的ready函数里就能找到这个类了，但这种方式不符合现代JS的模块化规范，还是推荐用前面的模块方案。

内容的提问来源于stack exchange，提问作者Seth D. Fulmer