一个js文件中定义的函数在另一个js文件中未定义答案

【问题标题】：function defined in one js file is undefined in another js file一个js文件中定义的函数在另一个js文件中未定义
【发布时间】：2015-10-12 00:20:57
【问题描述】：

根据这个答案，我的函数调用应该可以工作，但它不是：Calling a javascript function in another js file

我的代码（简化）：
文件 1.js：

$(document).ready(function(){
  function loadFYfResults(sizes){
      alert('hello');
  }
});

file2.js

$(document).ready(function(){
  $('.size-button').click(loadFYfResults(sizes));
});

主题.液体
在头脑中：
{{ 'file1.js' |资产网址 |脚本标签 }}
{{ 'file2.js' |资产网址 |脚本标签}}

调用该函数时，控制台会抛出此错误：
“未捕获的 ReferenceError：未定义 loadFyfResults”
我的网站是使用 Shopify 的液体主题平台构建的，但我不确定这是否与它有关.谁能发现我做错了什么？

【问题讨论】：

【解决方案1】：

这些功能超出了彼此的范围。您可以通过查看此块来了解这一点：

$(document).ready(function(){
    function loadFYfResults(sizes){
        alert('hello');
    }
});

console.log(loadFYfResults);

在这种情况下，loadFYFResults 将是 undefined，因为它不再在定义 loadFYfResults 的范围内。

要在另一个文件中使用该函数，必须在外部范围内对 loadFYfResults 函数进行另一个引用，或者将其从 $(document).ready 包装器中取出，因为您知道它只会当第二个函数准备好文档时调用。

【讨论】：

谢谢！一旦我将 loadFyfResults 移到 document.ready 之外，有没有办法从同一文件中的 loadFyfResults 调用 document.ready 中的函数？我试过了，但没有用。
不，document.ready 之外的东西不能访问document.ready 里面的东西。如果loadFyfResults 严重依赖于其他document.ready 代码，我会将该函数集成到其他文件中，而不是将其作为单独的文件。
我必须这样做。由于代码变得冗长，我试图进行一些模块化，但我想这就是框架的用途。
是的。你甚至不需要一个重量级的框架，像 requireJS 这样编译你所有的脚本并执行依赖注入就足够了。
谢谢谢谢谢谢。我错误地认为文档准备好只是确保在加载函数之前加载了文档。所以我认为调用该函数的视图可以使用其中的所有内容。我从来没有想过这种情况也适用于这种情况。

【解决方案2】：

您的 loadFYfResults 函数在其定义的函数范围之外是未知的 (ready(function(){)。

这将起作用：

function loadFYfResults(sizes){
    alert('hello');
}

$(document).ready(loadFYfResults);

【讨论】：

【解决方案3】：

问题在于您在 document.ready 函数的回调中定义函数 loadFYfResults，因此这意味着 loadFYfResults 仅对该 document.ready 回调是本地的。如果您希望它被全局定义，您应该在document.ready 回调之外定义它。

【讨论】：