在开发复杂的Javascript应用程序时，您可以使用多个.JS文件吗？ [英] Can you use multiple .JS files when developing a complex Javascript application?

问题描述

来自C＃背景，其中每个类（最佳实践）存储在其自己的单个文件中，它使开发非常干净。我以前从未在Javascript中编写任何复杂的内容，但我开始学习HTML 5，我想使用HTML 5画布编写复杂的游戏。

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.

将我的所有函数和代码放入单个.js文件中似乎非常混乱。有没有办法将其拆分，或者是一个工具/ IDE，它允许您使用单独的文件进行开发并将它们编译成单个文件进行部署？

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?

我想我是寻找一些最佳实践建议。像这样的问题似乎一般都会被关闭，所以这是我的具体问题，要遵守SO常见问题解答，这些问题需要实际的，可回答的问题：

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:

• 复杂的JS开发通常是否涉及单个JS文件中的所有代码？例如。你正在编写太空入侵者，你有没有spaceinvaders.js或者你有ship.js，logic.js等。

• 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.

是否有可能分裂你的JS（无论是使用多个脚本标签还是预先编译成单个JS文件）还是只将它们放在一个文件中？

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?

什么是工业标准？ HTML 5规范是否提出任何建议？

What's the industry standard? Does the HTML 5 spec make any recommendations?

推荐答案

有两种可能的方式。
就个人而言，我会使用构建工具来简化多个文件的处理。

There two possible ways. Personally, I would use a build tool to simplify working with multiple files.

Grunt

我最喜欢的工具来跟上复杂的js应用程序 咕噜 。使用grunt，您可以根据需要开发尽可能多的文件并使用其插件 watch 和 concat 自动连接他们在保存。你可以做更多，但这是可能对你有所帮助的基本用例。

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 watch and concat to automatically concat them on save. You can do a lot more but this is the basic use case which may be helpful for you.

Grunt需要 nodejs 并需要一些时间进行设置。但是一旦你准备好了你的 Gruntfile 设置，它确实加快了你的开发过程。

Grunt requires nodejs and takes some time to setup. But once you are ready with your Gruntfile setup it really speeds up your development process.

准备你的项目对于生产用途，您还可以使用一些配置和单个命令来缩小脚本。

To make your project ready for production use you can also minify your scripts with some configuration and a single command.

许多主要的javascript库都在使用grunt，可以根据它们的<$轻松识别c $ c> Gruntfile ： jQuery ，AngularJS ， Twitter Bootstrap 等。

A lot of the major javascript libraries are using grunt, easily recognizable based on their Gruntfile: jQuery, AngularJS, Twitter Bootstrap etc.

Grunt也是开发工具集的一部分 yeoman 。

Grunt is also part of the development toolset yeoman.

早午餐

早午餐 是另一种构建工具，可以让你做像grunt这样的类似事情。

Brunch is another build tool which allows you to do similar things like grunt does.

如果您正在开发一个巨大的单页面应用程序并担心应用程序的启动时间，那么单个文件可能不是最佳解决方案。在这种情况下，您可以使用javascript模块加载器。

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.

Require.js

因此 require.js 是一个合适的选择。它允许您仅在当前页面上加载实际需要的文件。虽然设置require.js比设置grunt要多一些工作。

Therefor require.js is 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.

这篇关于在开发复杂的Javascript应用程序时，您可以使用多个.JS文件吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！