从多个 javascript 文件加载多个函数答案

【问题标题】：Load multiple functions from multiple javascript files从多个 javascript 文件加载多个函数
【发布时间】：2017-08-18 18:24:17
【问题描述】：

我想在页面加载时加载多个外部 JavaScript 文件中的多个函数。如果我使用“body onLoad”，那么一个功能总是取代另一个。如何配置它，以便我可以从每个文件中加载每个函数并在页面加载时立即加载它们？

我尝试通过将两个函数（目前只有 2 个）放入一个 javascript 文件来组合文件，但是每当我使用 "document.getElementById("clockModule").innerHTML =" 将数据输出到特定的 div ID 时, 数据输出到单个 ID 并且它们相互重叠

【问题讨论】：

标签： javascript html function onload

【解决方案1】：

当您执行window.onload = function(){ ... } 时，您所做的是为window.onload 分配一个新值，替换之前分配给它的任何值。这意味着永远只能有一个值。同理，innerHTML 替换了元素的全部内容。

改为使用addEventListener 附加事件处理程序，并考虑创建DOM 节点并使用createElement 和appendChild 附加它们。

【讨论】：

感谢您的解释。我不知道 window.onload 只能分配一个值，这很有意义
见 MDN "window.onload = function() { init(); doSomethingElse(); };"
@Joseph 好的，我试着自己弄清楚，但我找不到关于使用 addEventListener 的更详细的解释

【解决方案2】：

在开发过程中，可以加载多个单独的 .js 文件。然而，一旦你准备好发布到生产环境，你会想要将所有的 .js 放到一个文件中以提高性能（甚至可能是minify 它）。无论如何，我总是使用DOMContentLoaded 监听器，例如：

document.addEventListener('DOMContentLoaded', function() {
  //do stuff in here.
  if(window.location.pathname === '/about'){
    //do page specific stuff in here.
  }
}, false);

【讨论】：