如何基于AMD规范正确定义RequireJS模块？移除jQuery后代码未触发

嘿，刚踩过类似从 jQuery 转原生 JS + RequireJS 的坑，来帮你捋捋可能的问题和解决办法！

1. 先搞定 DOM 加载时机的问题 #

jQuery 里的 $(document).ready() 或者 $(function(){...}) 是自动帮你等 DOM 就绪后执行代码，但原生 JS 里没有这个“自动兜底”。如果你的代码直接在模块里执行，很可能 DOM 还没加载完，找不到目标元素，代码自然没反应。

把原来的 jQuery 就绪逻辑替换成原生的 DOMContentLoaded 事件：

// 原 jQuery 写法
$(function() {
  // 你的业务逻辑
});

// 原生 JS 替换写法
document.addEventListener('DOMContentLoaded', function() {
  // 你的业务逻辑
});

如果你的脚本是放在 </body> 之前加载的，也可以直接执行代码（此时DOM已加载完成），不过用 DOMContentLoaded 更稳妥。

2. 检查 RequireJS 的依赖配置 #

之前用 jQuery 时，你的 spots.js 大概率把 jquery 作为依赖引入了，现在移除 jQuery 后要同步调整：

• 打开 spots.js，把模块定义里的 jquery 依赖删掉：

  // 原依赖写法
  define(['jquery'], function($) {
    // 代码
  });
  
  // 移除后的写法
  define(function() {
    // 代码
  });
  

• 检查 RequireJS 的全局配置（比如 main.js），如果还有 paths: { jquery: '...' } 这类配置，也可以删掉，避免不必要的加载尝试。

3. 排查残留的 jQuery API 导致报错 #

很多时候代码不执行，是因为有未替换的 jQuery 语法，导致控制台报错中断了后续逻辑。一定要打开浏览器开发者工具的 Console 标签看报错信息！

常见需要替换的 jQuery 写法：

比如如果控制台出现 Uncaught ReferenceError: $ is not defined，说明还有地方没替换掉 $ 符号，找到对应的代码改成原生写法即可。

4. 确认模块是否被正确加载 #

打开浏览器开发者工具的 Network 标签，搜索 spots.js，看它是否成功加载（状态码 200）。如果是 404，说明 RequireJS 的路径配置有问题，要检查 paths 里的路径是否正确指向 spots.js 文件。

另外，也可以在 spots.js 的开头加一句调试代码，比如 console.log('spots.js 加载成功！')，看控制台是否输出这句话，确认模块本身被正确加载了。

举个完整的改造例子 #

原 jQuery + RequireJS 的 spots.js：

define(['jquery'], function($) {
  $(function() {
    $('.spot').on('click', function() {
      $(this).addClass('active');
      console.log('Spot clicked!');
    });
  });
});

改造后的原生 JS + RequireJS 版本：

define(function() {
  document.addEventListener('DOMContentLoaded', function() {
    const spots = document.querySelectorAll('.spot');
    spots.forEach(spot => {
      spot.addEventListener('click', function() {
        this.classList.add('active');
        console.log('Spot clicked!');
      });
    });
  });
});

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