功能在另一个JS是未定义文件

我的代码（简化）：
file1.js：

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

file2.js

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

theme.liquid
在脑海中：
{{'file1.js'| asset_url | script_tag}}
{{'file2.js'| asset_url | script_tag}}

当函数被调用时，控制台抛出这个错误：
“未捕获的ReferenceError：loadFyfResults没有定义”
我的网站建成使用Shopify的液体主题平台，但我不知道是否有与它有任何关系。任何人都可以发现我做错了什么吗？

噢，愚蠢[关闭]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures）。 –

这些功能超出了对方的范围。您可以通过查看该块看到这一点：

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

console.log(loadFYfResults);

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

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

2015-10-12 00:25:20

谢谢！一旦我移动document.ready之外的loadFyfResults，有没有办法在同一个文件中的loadFyfResults中调用document.ready中的函数？我试过了，但没有奏效。 –

不，在document.ready之外的东西无法访问document.ready内部的东西。如果'loadFyfResults'很大程度上依赖于另一个'document.ready'代码，我会将该函数集成到另一个文件中，而不是将它作为单独的文件。 –

我必须这样做。我试图模块化一点，因为代码变得冗长，但我想这就是框架的用途。 –

您的loadFYfResults功能在其定义的功能范围之外是未知的（ready(function(){）。

这将工作：

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

$(document).ready(loadFYfResults);

2015-10-12 00:23:25

的问题是，您所定义的的document.ready函数的回调内部功能loadFYfResults，所以这意味着loadFYfResults是当地唯一到的document.ready回调。如果你希望它被全局定义，你应该在document.ready回调之外定义它。

2015-10-12 00:23:55

回答