JavaScript程序中的多個文件

我是JavaScript新手，我試圖用語言來解決它，以更好地掌握它。我似乎無法理解的一件事是開發人員構建大型JavaScript程序。我認爲你會把它分解成一堆像Java一樣的小文件。顯然，你不這樣做在JavaScript中。是否一切都在一個巨大的文件？這對我來說似乎不正確。JavaScript程序中的多個文件

例如，我想要兩個文件，一個具有我所有的幫助函數，另一個具有問題特定的函數。我打算在我的問題特定文件中使用幫助函數。

如果我應該把東西放在一個大文件中，我是否將它與模塊分開？對不起，這麼長的文章，我很困惑，我不完全確定我該怎麼說。

來源

2013-10-22 Nik

-1

你不需要任何花哨的js插件來做到這一點，只需在你的主js文件之前包含你的「頭文件」（所有的函數聲明） HTML。

例子：

file1.js：

//declare your functions here 
function handyFunction() { 
//do some handy stuff 
}

file2.js：

//use them here 
handyFunction();

HTML：

<body> 
<!-- all your html here --> 
<script src="file1.js" type="text/javascript"></script> 
<script src="file2.js" type="text/javascript"></script> 
</body>

如果你覺得不舒服擁有一切在全球對象上，你可以具有包含所需方法的對象，並根據需要創建它們的實例或訪問先前創建的實例。只是一個簡單的例子：

MyObject.js：

function MyObject() { 
    this.property = "someValue"; 
} 

MyObject.prototype.someMethod = function() { 
    //do something 
}

main.js：

var obj= new MyObject(); 
obj.someMethod();

HTML：

<!-- always remember to include your files in the correct order --> 
<script src="MyObject.js" type="text/javascript"></script> 
<script src="main.js" type="text/javascript"></script>

好吧，最後一個澄清。在JavaScript中，每個變量都是在函數範圍內聲明的，除非在這種情況下它被追加到窗口對象。這被稱爲函數範圍，與其他語言有很大差異。這意味着你在文件中聲明的所有內容都將被附加到全局對象（窗口）或2）只能被其聲明的函數訪問。所以，如果你想「匿名化」一些代碼，你可以在它周圍包裝一個自動執行的匿名函數，並且由於該函數沒有變量引用它，所以其他任何人都不能訪問該代碼。這就是爲什麼你在很多地方看到(function() { /*...*/}());。那麼，如何共享在這兩種文件之間以這種方式聲明的代碼？簡單，給它一個名字！並因此創建模塊模式。在第一個文件中，你將所有的代碼聲明在一個名爲「module」的變量中，或者將所有的代碼都放在你的山羊身上，並且你可以用你喜歡的最喜歡的方式放置所有的方法（例如，通過使用匿名函數並返回一個對象）。訣竅是在全局對象上聲明這個「模塊」對象，以便能夠跨應用程序中的文件使用它。真的沒有太多的東西。

來源

2013-10-22 17:13:27

不要把JS放在'head'中。 – Mathletics

如果我使用模塊模式會怎麼樣？我是否仍然可以直接調用該函數（當然，只要它是「公開的」）？ – Nik

模塊是什麼意思？ JavaScript中沒有這樣的東西。如果你創建了一個包含多個方法的對象，那麼這個對象在下一個腳本中就可以用你稱之爲的任何名稱訪問 –

這實際上取決於您的應用程序有多大。如果它是一個表單處理程序，則可以將所有邏輯放在一個文件中。但是，如果它是一個更大的單頁面應用程序，則需要考慮將其分解爲多個文件。這些文件如何與彼此交互取決於它們被包括在頁面中的順序。例如，如果一個文件依賴於另一個文件，請確保該腳本包含在主頁腳本之後的頁面中。

爲了幫助更好地組織你的依賴（而不是管理自己的腳本包含順序），以及設定過的右腳上，你應該看一看RequireJS： http://requirejs.org/docs/start.html

這裏有一個第三方介紹和教程 http://javascriptplayground.com/blog/2012/07/requirejs-amd-tutorial-introduction/

至於你的模塊模式的問題，你可以使用一個模塊的模式，但你仍然會遇到同樣的依賴性問題，如果在一個文件中的一個模塊在一個單獨的文件依賴於另一個。你可能想看看這個章節來自Eloquent Javascript：http://eloquentjavascript.net/chapter9.html

來源

2013-10-22 17:10:19 Gopherkhan

+1對requirejs！ –

RequireJS太棒了！我稍後可能會用到它，我仍然需要弄清楚jQuery/Underscore ... – Nik

JavaScript程序中的多個文件

回答

相關問題