Question

我正在开发一个html5游戏（在我的main.js中向500行航行），我需要将代码分成几个部分。我已经按照相关性对不同的变量和函数进行了分组，并将这些块移动到例如main.js中 - game.js - player.js - enemy.js，ecc ...并使它们从html以正确的顺序执行重新组合＆＃39;我现在正在处理的主要文件，就像之前分割它一样：

<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，您将能够导出对象，函数等，而不是污染全局命名空间。从而导致您将应用程序与一个巨大的文件分离。

组织Js项目文件

1 个答案: