Html 开发复杂的 Javascript 应用程序时可以使用多个 .JS 文件吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15707914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you use multiple .JS files when developing a complex Javascript application?
提问by NibblyPig
Coming from a C# background where every class is (best practices) stored in its own individual file, it makes development quite clean. I've never written anything complex in Javascript in the past, but I am starting to learn HTML 5 and I want to write a complex game using the HTML 5 canvas.
来自 C# 背景，其中每个类（最佳实践）都存储在自己的单独文件中，它使开发变得非常干净。我过去从来没有用 Javascript 写过任何复杂的东西，但我开始学习 HTML 5，我想用 HTML 5 画布编写一个复杂的游戏。
Putting all of my functions and code into a single .js file seems very messy. Is there a way to split it up, or a tool/IDE that lets you develop using separate files and compile them into a single one for deployment?
将我所有的函数和代码放在一个 .js 文件中似乎很混乱。有没有办法拆分它，或者有一种工具/IDE 可以让您使用单独的文件进行开发并将它们编译成一个单独的文件进行部署？
I guess I am looking for some best practice advice. Questions like this generally seem to get closed, so here are my specific questions to adhere to the SO FAQ that demands practical, answerable questions:
我想我正在寻找一些最佳实践建议。像这样的问题通常似乎已经结束，所以这里是我的具体问题，以遵守 SO FAQ 要求实用的、可回答的问题：
Does complex JS development usually involve all the code being in a single JS file? Eg. you're writing space invaders, do you just have spaceinvaders.js or do you have ships.js, logic.js etc.
Is it possible to split up your JS (whether using multiple script tags or pre-compiling to a single JS file) or to just put it all in a single file?
What's the industry standard? Does the HTML 5 spec make any recommendations?
复杂的 JS 开发是否通常将所有代码都放在一个 JS 文件中？例如。你在写太空入侵者，你只是有 spaceinvaders.js 还是有 ship.js、logic.js 等。
是否可以拆分您的 JS（无论是使用多个脚本标签还是预编译为单个 JS 文件）或将其全部放在一个文件中？
行业标准是什么？HTML 5 规范是否有任何建议？
采纳答案by Marcel Gwerder
There two possible ways. Personally, I would use a build tool to simplify working with multiple files.
有两种可能的方式。就个人而言，我会使用构建工具来简化处理多个文件的过程。
Using a build tool
使用构建工具
Grunt
咕噜声
My favourite tool to keep up with complex js applications is grunt. With grunt you can develop in as many files as you want and use its plugins watchand concatto automatically concat them on save. You can do a lot more but this is the basic use case which may be helpful for you.
我最喜欢的跟上复杂 js 应用程序的工具是grunt. 使用 grunt，您可以根据需要开发任意数量的文件，并使用其插件watch并concat在保存时自动连接它们。您可以做更多事情，但这是可能对您有所帮助的基本用例。
Grunt requires nodejsand takes some time to setup. But once you are ready with your Gruntfilesetup it really speeds up your development process.
Grunt 需要nodejs并且需要一些时间来设置。但是一旦您准备好Gruntfile设置，它就会真正加快您的开发过程。
To make your project ready for production use you can also minify your scripts with some configuration and a single command.
为了让您的项目为生产使用做好准备，您还可以使用一些配置和单个命令来缩小您的脚本。
A lot of the major javascript libraries are using grunt, easily recognizable based on their Gruntfile: jQuery, AngularJS, Twitter Bootstrapetc.
许多主要的 javascript 库都在使用 grunt，基于它们很容易识别Gruntfile：jQuery、AngularJS、Twitter Bootstrap等。
Grunt is also part of the development toolset yeoman.
Grunt 也是开发工具集的一部分yeoman。
Brunch
早午餐
Brunchis another build tool which allows you to do similar things like grunt does.
Brunch是另一个构建工具，它允许您像 grunt 那样做类似的事情。
Loading only the needed files
只加载需要的文件
If you are developing a huge single page application and are concerned about the startup time of your application, one single file may not be the best solution. In this case you can use a javascript module loader.
如果您正在开发一个巨大的单页应用程序并且担心应用程序的启动时间，那么单个文件可能不是最佳解决方案。在这种情况下，您可以使用 javascript 模块加载器。
Require.js
要求.js
Therefor require.jsis a goot fit. It allows you to only load the actual needed files on the current page. Though setting up require.js is a bit more work than setting up grunt.
因此require.js非常适合。它允许您只加载当前页面上实际需要的文件。虽然设置 require.js 比设置 grunt 要多一些工作。
回答by Joel Coehoorn
Of course you can use more than one javascript file. How else would libraries like jQuery or Knockout function?
当然，您可以使用多个 javascript 文件。像 jQuery 或 Knockout 这样的库还有什么功能？
One thing to keep in mind, though, is that one of the things you want to do to keep your pages feeling snappy is to reduce the total number of http requests per page load. Adding a bunch of javascript files that are loaded separately causes an additonal request for each extra file. Therefore, you might want to experiment with a system for your build that stitches your javascript files together into a single item that you can use at deployment. There are a number of solutions out there that will do this for you in an automated way.
但是，要记住的一件事是，为了让您的页面感觉活泼，您想要做的一件事是减少每个页面加载的 http 请求总数。添加一堆单独加载的 javascript 文件会导致对每个额外文件的附加请求。因此，您可能希望为您的构建试验一个系统，该系统将您的 javascript 文件拼接成一个您可以在部署时使用的项目。有许多解决方案可以自动为您执行此操作。
回答by thangcao
you could consider using requirejs - a very nice libray to split your javascript to modules. it also provide a tool that you can "combine" all modules to a single file.
您可以考虑使用 requirejs - 一个非常好的库，可以将您的 javascript 拆分为模块。它还提供了一个工具，您可以将所有模块“组合”到一个文件中。
回答by Phil
You can use as many javascriptfiles as you want. Just add a link to them in your htmlcode:
您可以根据需要使用任意数量的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>
Then you can hookup your main.jsto listen for the main()function call:
然后你可以连接你main.js的监听main()函数调用：
function main() {
//here you can do your basic setup or delegate the control of the app to a different .js file.
}
or the jQuery document ready callback:
或 jQuery 文档就绪回调：
$(document).ready(function() {
//here is a good spot to hookup other jQuery listeners
});
