从存储在自己的个人文件中的C#的背景,每一个类(最佳实践)到来,使得开发比较干净。 我从来没有写过什么的Javascript复杂的过去,但我开始学习HTML 5和我想写使用HTML 5画布上复杂的游戏。
把我所有的功能和代码到一个单一的.js文件看起来很凌乱。 有没有一种方法来分割它,或者工具/ IDE,可以让你开发使用单独的文件,并编译成一个单一的一个部署?
我想我在寻找一些最佳实践的建议。 这样的问题通常似乎得到关闭,所以这里是我的坚持SO常见问题,要求实际,回答的问题,具体的问题:
是否复杂JS开发通常涉及所有的代码在一个单一的JS文件是? 例如。 你写的太空侵略者,你只是有spaceinvaders.js或者你有ships.js,logic.js等。
是否有可能分裂的JS(是否使用多个脚本标记或预编译为一个单一的JS文件),或者只是把它在一个单一的文件?
什么是行业标准? 是否HTML 5规范提出任何建议?
有两种可能的方式。 就个人而言,我会用一个构建工具,以简化处理多个文件。
使用构建工具
咕噜
我最喜欢的工具,复杂的JS应用跟不上是grunt
。 随着咕噜您可以开发在尽可能多的文件,只要你想和使用它的插件watch
和concat
自动Concat的他们保存。 你可以做更多的事情,但这是可以对你有所帮助的基本使用情况。
咕噜需要nodejs
和需要一些时间来安装。 但是,一旦你已经准备好与你Gruntfile
设置它真的加速开发进程。
为了使您的项目可供生产使用,你也可以用一些配置和单一运行如下命令脚本。
许多主要的JavaScript库的使用咕噜的,容易识别基于他们Gruntfile
: jQuery的 , AngularJS , Twitter的引导等。
咕噜也是开发工具集的一部分yeoman
。
早午餐
Brunch
是另一个构建工具,它允许你做类似的事情像咕噜一样。
只加载所需的文件
如果你正在开发一个巨大的单页的应用程序和关心你的应用程序的启动时间,一个单一的文件可能不是最好的解决办法。 在这种情况下,你可以使用JavaScript模块加载。
Require.js
为此require.js
是GOOT契合。 它允许你只加载当前页面上的实际需要的文件。 虽然设立require.js是比建立咕噜更多的工作。
当然你也可以使用一个以上的JavaScript文件。 否则怎么会库如jQuery或淘汰赛功能?
有一点要记住,虽然,是你想要做的,让你的网页感觉活泼的事情之一是降低每个页面加载的HTTP请求的总数。 并称,分别装了一堆的JavaScript文件会导致每个额外的文件产生额外的要求。 因此,您可能希望与您的构建一起缝合JavaScript文件到您可以在部署使用单个项目的系统进行试验。 有许多解决方案,在那里,将在一个自动化的方式为你做这个。
你可以考虑使用requirejs - 一个非常好的libray分裂你的JavaScript来的模块。 它也提供了一个工具,你可以“合并”的所有模块到一个单一的文件。
您可以使用尽可能多javascript
,你想要的文件。 只需添加在你一个链接到他们html
代码:
<body style="background-color: black" onload="main();" >
<!-- Your HTML body contents -->
<!-- Your scripts (here, I used HTML5 BoilerPlate to setup, and the links to jquery are provided) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/main.js"></script>
</body>
然后你就可以联播你main.js
能够收听main()
函数调用:
function main() {
//here you can do your basic setup or delegate the control of the app to a different .js file.
}
或jQuery的文档准备回调:
$(document).ready(function() {
//here is a good spot to hookup other jQuery listeners
});
文章来源: Can you use multiple .JS files when developing a complex Javascript application?