如何解决jQuery Accordion移至外部JS文件后的未定义报错问题？

一、解决"$ is not defined"或"jQuery not defined"错误 #

1. 严格控制资源引入顺序
   必须按以下顺序在HTML中引入文件，不能颠倒：

   • 首先引入jQuery库
   • 然后引入jQuery UI库
   • 最后引入你的test.js
     示例：

   <script src="jquery.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <script src="test.js"></script>
   

   注意：如果给script标签加了async或defer属性，会打乱同步加载顺序，导致test.js先执行时jQuery还未加载完成，所以要去掉这两个属性。

2. 正确使用IIFE包裹代码
   把Accordion初始化代码用接收jQuery参数的IIFE包裹，同时确保在DOM加载完成后执行：

   (function($) {
     // 等待DOM加载完成后初始化
     $(document).ready(function() {
       $("#your-accordion-id").accordion();
     });
   })(jQuery);
   

   这样既避免全局变量冲突，又能确保$是jQuery的有效别名，不会出现未定义问题。

3. 检查Codesandbox环境配置
   确认资源文件路径无拼写错误；如果用CDN引入，检查CDN链接是否有效、是否能正常访问。

二、关于资源整合的问题 #

可以整合，但不推荐直接复制代码到test.js，推荐两种方案：

• 方案1：用打包工具合并
  使用Webpack、Parcel这类前端打包工具，将jQuery、jQuery UI和你的test.js打包成一个单独的JS文件。这样每个使用Accordion的HTML只需要引入这一个打包后的文件即可，既精简了引入次数，也方便后续维护。

• 方案2：手动合并文件（不推荐）
  把jQuery、jQuery UI的完整代码依次复制到test.js的最顶部，再写你的Accordion初始化代码。这种方式虽能实现单文件引入，但会让test.js体积过大，且后续升级jQuery版本时需要重新替换代码，维护成本高。

如果不想打包，继续保持三个文件的引入方式其实更优——浏览器会缓存已加载的jQuery和jQuery UI文件，用户访问多个页面时无需重复加载，性能反而更好。

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