功能在另一個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

回答