在开发复杂的Javascript应用程序时,您可以使用多个.JS文件吗?

Nib*_*Pig 28 javascript standards html5

来自C#背景,其中每个类(最佳实践)存储在其自己的单个文件中,它使开发非常干净.我以前从来没有在Javascript中编写任何复杂的东西,但我开始学习HTML 5,我想用HTML 5画布编写一个复杂的游戏.

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

我想我正在寻找一些最佳实践建议.像这样的问题通常似乎已经关闭,所以这里是我的具体问题,要遵守SO常见问题解答,这些问题需要实际的,可回答的问题:

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

  • 是否可以拆分你的JS(无论是使用多个脚本标签还是预先编译成单个JS文件)还是将它们全部放在一个文件中?

  • 什么是行业标准?HTML 5规范是否提出任何建议?

Mar*_*der 12

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

使用构建工具

咕噜

我最喜欢的工具是跟上复杂的js应用程序grunt.使用grunt,您可以根据需要开发尽可能多的文件并使用其插件watchconcat在保存时自动连接它们.您可以做更多,但这是可能对您有所帮助的基本用例.

Grunt需要nodejs花费一些时间来设置.但是一旦你准备好了你的Gruntfile设置,它确实加快了你的开发过程.

为了使您的项目可以用于生产,您还可以使用一些配置和单个命令来缩小脚本.

很多主要的javascript库都在使用grunt,基于它们可以轻松识别Gruntfile:jQuery,AngularJS,Twitter Bootstrap等.

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

早午餐

Brunch 是另一个构建工具,它允许你做类似grunt做的事情.

仅加载所需的文件

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

Require.js

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


Joe*_*orn 5

当然,您可以使用多个 javascript 文件。jQuery 或 Knockout 等库还能如何发挥作用?

不过,要记住的一件事是,为了让页面保持活力,您想要做的事情之一是减少每个页面加载的 http 请求总数。添加一堆单独加载的 JavaScript 文件会导致对每个额外文件的附加请求。因此,您可能想要尝试使用一个用于构建的系统,将您的 javascript 文件拼接成一个可以在部署时使用的单个项目。有许多解决方案可以自动为您完成此操作。