无法在b.js中引用a.js内的全局数组，求排查解决

我一眼就看出问题所在了——代码执行时机不匹配！咱们一步步拆解：

问题根源 #

你在a.js里把categoryarray和productarray的初始化放在了$(document).ready()的回调函数里，这个回调要等整个DOM加载完成后才会执行。但b.js里的立即执行函数(IIFE)是脚本一加载就直接跑了，这时候a.js里的ready回调还没触发，那两个数组自然还没被创建，控制台当然会报“未定义”的错。

几种可行的解决方案 #

方案1：让b.js的代码也等DOM就绪后再执行 #

把b.js里的循环逻辑包裹到$(document).ready()里，确保它在a.js的数组初始化完成后再运行：

;(function($) {
  // 等待DOM加载完成再执行逻辑
  $(document).ready(function() {
    for(var k=0;k<categoryarray.length;k++){
      if(categoryarray[k][0]!=""){
        $('.tree').append('<li id="Cate_' + k + '">'+categoryarray[k][1]+'</li>');
        for(var l=0;l<productarray.length;l++){
          if(categoryarray[k][0]==productarray[l][2]){
            $('#Cate_' + k).append('<ul id="Pro_' + l + '"></ul>');
            $('#Pro_' + l).append("<li>"+productarray[l][1]+"</li>");
          }
        }
      }
    }
  });
})(jQuery);

方案2：提前在全局作用域声明数组 #

如果不想改动b.js的执行时机，可以把a.js里的数组定义移到$(document).ready()外面，让脚本一加载就创建全局变量：

// 先在全局作用域声明并初始化数组
var categoryarray = [];
var productarray = [];

$(document).ready(function () {
  // 这里可以继续写填充数组的逻辑
});

小提醒：虽然这个方法能快速解决问题，但全局变量过多容易导致命名冲突，不是长期的最优解。

方案3：用模块化管理依赖（推荐） #

如果你的项目后续会更复杂，建议用ES6模块来管理代码依赖，彻底避免全局变量的问题：

• 修改a.js导出数组：

export let categoryarray = [];
export let productarray = [];

$(document).ready(function () {
  // 填充数组的逻辑
});

• 修改b.js导入并使用：

import { categoryarray, productarray } from './a.js';

$(document).ready(function() {
  // 你的循环渲染逻辑
});

• 最后把HTML里的脚本改成模块类型：

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

总结 #

核心问题就是b.js的代码跑早了，赶在a.js初始化数组之前执行了。上面的三个方案里，方案1是最贴合你现有代码结构的快速修复，方案3是更规范的长期优化方向，你可以根据自己的项目情况选。

内容的提问来源于stack exchange，提问作者张剑桥