如何使独立JavaScript文件中的函数通过addEventListener正常工作？

场景重现 #

我原本用这段代码绑定页面加载完成后的函数：

document.addEventListener('DOMContentLoaded', functionName);

对应的函数定义是：

function functionName() {
  $.ajax({
    type: 'GET',
    url: '/populatePage',
    success: function(data) {
      createPage(data);
    }
  })
}

当绑定代码和函数在同一个JS文件里时，页面完全正常；但把functionName放到单独的JS文件再引入后，页面就加载失败了，这是为什么？

可能的原因及解决方法 #

我来拆解几个最容易踩的坑：

1. JS文件加载顺序搞反了 #

这是最常见的问题！如果你的绑定代码所在的JS文件，比定义functionName的文件先加载，那执行document.addEventListener('DOMContentLoaded', functionName);时，functionName还没被定义，浏览器会认为这是个未定义变量，自然没法触发后续的AJAX请求。

解决方法：
先引入包含functionName的JS文件，再引入绑定事件的文件，比如在HTML里按这个顺序写：

<script src="./path/to/your-function-file.js"></script>
<script src="./path/to/your-event-binding-file.js"></script>

2. 函数被封装在了局部作用域里 #

如果你的独立JS文件用了模块化写法（比如自执行函数IIFE、ES模块），functionName可能被限制在了局部作用域内，外部的绑定代码根本访问不到它。

举个反例，要是你的独立文件是这么写的：

(function() {
  function functionName() {
    // ...你的AJAX代码
  }
})();

这时候functionName只在这个自执行函数的作用域内有效，外部完全拿不到。

解决方法：

• 临时方案：把函数挂载到全局作用域（比如window.functionName = functionName;），但这种方式容易污染全局变量，不推荐长期用；
• 规范方案：改用ES模块，在独立文件里导出函数：

  export function functionName() {
    // ...你的AJAX代码
  }
  

  然后在绑定代码的文件里导入：

  import { functionName } from './path/to/your-function-file.js';
  document.addEventListener('DOMContentLoaded', functionName);
  

  记得给HTML里的script标签加上type="module"属性。

3. jQuery的依赖没处理好 #

你的函数里用到了$（jQuery），如果引入jQuery的文件是在你的独立函数文件之后加载的，那执行$.ajax时，$还没被定义，会直接报错导致函数执行失败。

解决方法：
确保jQuery的引入在所有用到它的JS文件之前：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./path/to/your-function-file.js"></script>
<script src="./path/to/your-event-binding-file.js"></script>

4. 独立JS文件的路径写错了 #

别笑，这真的很常见！如果浏览器找不到你的独立JS文件，自然加载不到functionName，绑定的时候就会报错。你可以打开浏览器开发者工具（F12），看Network面板里有没有404的请求，要是有，就是路径不对。

解决方法：
检查文件的相对路径或绝对路径是否正确，确保和HTML文件的位置对应上。

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