組織Js項目文件

Question

我正要開發一個html5游戲（在main.js中指向500行），我需要將代碼分成幾個部分。 我已經按相關性對不同的var和函數進行了分組，並將這些塊移至例如main.js-game.js-player.js-敵人.js，ecc ...並使它們以正確的順序從html執行，來“重組”我正在處理的主文件，就像拆分前一樣：

<script src="main.js"></script> 
<script src="game.js"></script>  
<script src="player.js"></script>  
<script src="enemy.js"></script>

它將正常工作，但是通過這種方式可以從控制台訪問所有變量。 我試圖將每個單獨的腳本包裝到一個自執行函數中以防止這種情況發生（目前是我的main.js），但是這種方法會使我需要全局訪問的變量不超出范圍。 那么這種情況下的最佳實踐是什么？ 我讀了很多書，但是我發現的每個解決方案似乎都落后於我的js技能，或者對於像我這樣的小項目來說太抽象了。 有人可以指出正確的方向嗎？

謝謝。

Answer 1

您似乎在為這個問題而苦苦掙扎： How should I modularize my app?

而不是在html中定義應用程序的每個依賴項：

<script src="main.js"></script> 
<script src="game.js"></script>  
<script src="player.js"></script>  
<script src="enemy.js"></script>

最好將代碼與Webpack ， Browserify或其他模塊捆綁器捆綁在一起。 這樣，您就不必擔心<script>標記的順序。

然后，您將可以在HTML中包含一個<script>標記：

<script src="bundle.js"></script>

其中bundle.js是包含整個應用程序代碼和您可能已使用的任何第三方依賴項的文件。 可以通過使用如上所述的模塊捆綁器來生成bundle.js 。

根據所選模塊捆綁器的支持，您可以選擇使用CommonJS，AMD，ES6等類型的模塊。通過在代碼中建立modules ，您將能夠導出對象，函數等，而不會污染對象。全局名稱空間。 從而引導您將應用程序與一個巨型文件分離。