javascript - 整理Js项目文件

Question

我正在开发一个 html5 游戏(在我的 main.js 中接近 500 行)，我需要将代码分成几个部分。我已经根据针对性对不同的变量和函数进行了分组，并将这些 block 移动到例如 main.js - game.js - player.js - enemy.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 ，或其他一些模块 bundler 。这样你就不需要担心 <script> 的顺序了。标签。

然后您就可以包含一个 <script>在您的 html 中标记:

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

在哪里bundle.js是包含您的整个应用程序代码和您可能使用的任何第三方依赖项的文件。生成 bundle.js可以通过使用上面提到的模块 bundler 来实现。

根据您选择的模块 bundler 的支持，您可以选择使用 CommonJS、AMD、ES6 等类型的模块。通过建立 modules在您的代码中，您将能够导出对象、函数等，而不会污染全局命名空间。从而引导您将您的应用程序与一个巨大的文件分离。