如何在獨立文件js中調用函數？

Question

我在兩個文件js，file1和file2中定義了一些函數。在每個文件中，所有功能都在$(document).ready(function(){});之內。我仔細地將file1放在一個php文件中，然後在file2中調用file1中的一個函數，但是控制檯返回未定義的函數。這裏有什麼問題？

Answer 1

如果函數是在文檔就緒處理程序中定義的，那麼它們只存在於該範圍內，並且在其他地方無法訪問。

最簡單的解決辦法是定義您的文檔準備處理以外的功能和使用他們準備好處理程序內或在彼此內：

文件1：

function myFunc() { 
    myOtherOtherFunc(); 
} 

$(document).ready(function() { 
    myOtherFunc(); 
}); 

文件2：

function myOtherFunc() { 
} 

function myOtherOtherfunc() { 
} 

$(document).ready(function() { 
    myFunc(); 
}); 

應該指出的是，這將函數放在全局範圍內，並且這應該保持在最小限度，所以如果您發現有很多需要在文件之間共享，您應該考慮使用命名空間或甚至是像模塊加載器一樣更復雜（例如， require.js）。

Answer 2

$（document）.ready應該在html頁面上調用。我建議你將各個js文件中的函數分開，並從page.ready中調用這些函數。我認爲這應該可以解決問題。

Answer 3

因爲你在另一個函數中定義你的函數，所以它們不是全局變量。這是一個好的的事情。

有幾個方法可以解決這個：

1. 讓他們的全局（BLECH），或

2. 使用AMD機制像RequireJS，或

3. 使用單全球，提及您的所有功能

這最後看起來像這樣：

var MyApp = MyApp || {}; 
$(document).ready(function() { 
    MyApp.myFunction = function() { 
     // ... 
    }; 
}); 

然後你就可以通過MyApp.myFunction()從任何地方調用它們。