如何在load.js中调用main.js内定义的removeItem函数

错误原因 #

removeItem is not defined报错的核心原因是removeItem函数没有暴露到全局作用域，导致后加载的load.js无法访问：
如果你的项目使用了模块化打包工具（比如Webpack、Vite，或是WordPress主题自带的JS打包逻辑），JS文件的顶层作用域默认是模块私有作用域，你在main.js顶层写的function removeItem()只会在main.js的模块内部生效，不会挂载到全局window对象上，外部文件自然访问不到。
就算没有用打包工具，也可能是main.js加载异常、或者存在隐式语法错误导致文件执行中断，函数没有完成注册。

修复方案 #

方案1：显式把函数挂载到全局window对象（改动最小）

修改main.js里的函数定义，直接绑定到window上：

// main.js
window.removeItem = function() {
  alert('Item removed');
}
(function($) {  
    $(document).ready(function() {
    });
})(jQuery);

修改完成后load.js里不需要改动，直接调用removeItem()即可。

方案2：把公共函数挂载到jQuery命名空间（适合jQuery项目，减少全局污染）

main.js里把函数绑定到jQuery的静态方法上：

// main.js
(function($) {
  $.removeItem = function() {
    alert('Item removed');
  }
  $(document).ready(function() {
  });
})(jQuery);

load.js里通过$.removeItem()调用即可：

// load.js
(function($) {  
    $(document).ready(function() {
      $.removeItem();
    });
})(jQuery);

异常排查 #

如果修改后还是报错，先做两项检查：

• 打开浏览器开发者工具的「网络」面板，确认main.js的请求状态是200，没有加载失败
• 打开「控制台」看main.js有没有其他语法报错，前置报错会导致后续的函数定义代码不执行

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