组织Js项目文件

Organize Js project files

本文关键字：项目文件 Js 组织      更新时间：2023-10-28

我现在正在开发一款html5游戏（在我的main.js中有500行），我需要将代码分成几个部分。我已经根据相关性对不同的变量和函数进行了分组，并将这些块移动到例如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技能，或者对于我这样的小项目来说过于抽象。有人能指出正确的方向吗？

谢谢。

您似乎正在努力解决以下问题：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可以通过使用如上所述的模块捆绑器来实现。

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

相关文章：