Html 我应该将我的 javascript 分成多个文件吗？

Should I split my javascript into multiple files?

提问by Peter Berg

I'm used to working with Java in which (as we know) each object is defined in its own file (generally speaking). I like this. I think it makes code easier to work with and manage.

我习惯于使用 Java，其中（正如我们所知）每个对象都在自己的文件中定义（一般来说）。我喜欢这个。我认为它使代码更易于使用和管理。

I'm beginning to work with javascript and I'm finding myself wanting to use separate files for different scripts I'm using on a single page. I'm currently limiting myself to only a couple .js files because I'm afraid that if I use more than this I will be inconvenienced in the future by something I'm currently failing to foresee. Perhaps circular references?

我开始使用 javascript，我发现自己想要为我在单个页面上使用的不同脚本使用单独的文件。我目前将自己限制在几个 .js 文件中，因为我担心如果我使用更多的文件，我将来会因为我目前无法预见的事情而感到不便。也许循环引用？

In short, is it bad practice to break my scripts up into multiple files?

简而言之，将我的脚本分成多个文件是不好的做法吗？

采纳答案by Norguard

There are lots of correct answers, here, depending on the size of your application and whom you're delivering it to (by whom, I mean intended devices, et cetera), and how much work you can do server-side to ensure that you're targeting the correct devices (this is still a long way from 100% viable for most non-enterprise mortals).

这里有很多正确的答案，这取决于您的应用程序的大小和您将其交付给谁（由谁，我指的是预期设备等），以及您可以在服务器端做多少工作来确保您的目标是正确的设备（对于大多数非企业用户来说，这距离 100% 可行还有很长的路要走）。

When building your application, "classes" can reside in their own files, happily.
When splitting an application across files, or when dealing with classes with constructors that assume too much (like instantiating other classes), circular-references or dead-end references AREa large concern.
There are multiple patterns to deal with this, but the best one, of course is to make your app with DI/IoC in mind, so that circular-references don't happen.
You can also look into require.js or other dependency-loaders. How intricate you need to get is a function of how large your application is, and how private you would like everything to be.

在构建应用程序时，“类”可以愉快地驻留在它们自己的文件中。
在跨文件拆分应用程序时，或者在处理具有假设过多的构造函数的类时（如实例化其他类），循环引用或死角引用是一个大问题。
有多种模式可以解决这个问题，但最好的一种当然是让你的应用程序考虑到 DI/IoC，这样循环引用就不会发生。
您还可以查看 require.js 或其他依赖加载器。您需要获得的复杂程度取决于您的应用程序有多大，以及您希望一切都变得多么私密。

When serving your application, the baseline for serving JS is to concatenate all of the scripts you need (in the correct order, if you're going to instantiate stuff which assumes other stuff exists), and serve them as one file at the bottom of the page.

在为您的应用程序提供服务时，为 JS 提供服务的基线是连接您需要的所有脚本（以正确的顺序，如果您要实例化假设其他内容存在的内容），并将它们作为一个文件提供在底部这一页。

But that's baseline.
Other methods might include "lazy/deferred" loading.
Load all of the stuff that you need to get the page working up-front.
Meanwhile, if you have applets or widgets which don't need 100% of their functionality on page-load, and in fact, they require user-interaction, or require a time-delay before doing anything, then make loading the scripts for those widgets a deferred event. Load a script for a tabbed widget at the point where the user hits mousedown on the tab. Now you've only loaded the scripts that you need, and only when needed, and nobody will really notice the tiny lag in downloading.

但这是基线。
其他方法可能包括“延迟/延迟”加载。
加载使页面预先工作所需的所有内容。
同时，如果您的小程序或小部件在页面加载时不需要 100% 的功能，并且实际上，它们需要用户交互，或者在做任何事情之前需要延迟，那么请为那些加载脚本小部件延迟事件。在用户在选项卡上按下鼠标时为选项卡式小部件加载脚本。现在您只加载了您需要的脚本，并且只在需要时加载，没有人会真正注意到下载过程中的微小延迟。

Compare this to people trying to stuff 40,000 line applications in one file.
Only one HTTP request, and only one download, but the parsing/compiling time now becomes a noticeable fraction of a second.

将此与试图在一个文件中填充 40,000 行应用程序的人进行比较。
只有一个 HTTP 请求，只有一个下载，但解析/编译时间现在变成了明显的几分之一秒。

Of course, lazy-loading is not an excuse for leaving every class in its own file.
At that point, you should be packing them together into modules, and serving the file which will run that whole widget/applet/whatever (unless there are other logical places, where functionality isn't needed until later, and it's hidden behind further interactions).

当然，延迟加载并不是将每个类都保留在自己的文件中的借口。
在这一点上，您应该将它们打包成模块，并提供将运行整个小部件/小程序/任何东西的文件（除非有其他逻辑位置，直到稍后才需要功能，并且它隐藏在进一步的交互后面）。

You could also put the loading of these modules on a timer.
Load the baseline application stuff up-front (again at the bottom of the page, in one file), and then set a timeout for a half-second or so, and load other JS files.
You're now not getting in the way of the page's operation, or of the user's ability to move around. This, of course is the most important part.

您还可以将这些模块的加载放在计时器上。
预先加载基线应用程序内容（再次在页面底部，在一个文件中），然后设置半秒左右的超时，并加载其他 JS 文件。
您现在不会妨碍页面的操作或用户的移动能力。这当然是最重要的部分。

回答by Dave

Because of download times, you should always try to make your scripts a single, big, file. HOWEVER, if you use a minifier (which you should), they can combine multiple source files into one for you. So you can keep working on multiple files then minify them into a single file for distribution.

由于下载时间的原因，您应该始终尝试将脚本制作成单个大文件。但是，如果您使用缩小器（您应该使用），它们可以为您将多个源文件合并为一个。因此，您可以继续处理多个文件，然后将它们缩小为一个文件以进行分发。

The main exception to this is public libraries such as jQuery, which you should always load from public CDNs (more likely the user has already loaded them, so doesn't need to load them again). If you do use a public CDN, alwayshave a fallback for loading from your own server if that fails.

对此的主要例外是公共库，例如 jQuery，您应该始终从公共 CDN 加载它们（更有可能用户已经加载了它们，因此不需要再次加载它们）。如果您确实使用公共 CDN，如果失败，请始终有一个从您自己的服务器加载的回退。

As noted in the comments, the true story is a little more complex;

正如评论中所指出的，真实的故事要复杂一些；

Scripts can be loaded synchronously (<script src="blah"></script>) or asynchronously (s=document.createElement('script');s.async=true;...). Synchronous scripts block loading other resources until they have loaded. So for example:

脚本可以同步 ( <script src="blah"></script>) 或异步 ( s=document.createElement('script');s.async=true;...)加载。同步脚本会阻止加载其他资源，直到它们加载完毕。例如：

<script src="a.js"></script>
<script src="b.js"></script>

will request a.js, wait for it to load, then load b.js. In this case, it's clearly better to combine a.js with b.js and have them load in one fell swoop.

将请求 a.js，等待它加载，然后加载 b.js。在这种情况下，将 a.js 与 b.js 结合起来并让它们一举加载显然更好。

Similarly, if a.js has code to load b.js, you will have the same situation no matter whether they're asynchronous or not.

同理，如果a.js有加载b.js的代码，不管异步与否，都会出现同样的情况。

But if you load them both at once andasynchronously, and depending on the state of the client's connection to the server, and a whole bunch of considerations which can only be truly determined by profiling, it can be faster.

但是，如果你在一次加载它们都和异步，并根据客户端的连接到服务器，和一大堆只能通过剖析得到真正的决定因素的状态，它可以更快。

(function(d){
    var s=d.getElementsByTagName('script')[0],f=d.createElement('script');
    f.type='text/javascript';
    f.async=true;
    f.src='a.js';
    s.parentNode.insertBefore(f,s);
    f=d.createElement('script');
    f.type='text/javascript';
    f.async=true;
    f.src='b.js';
    s.parentNode.insertBefore(f,s);
})(document)

It's much more complicated, but will load both a.js and b.js without blocking each other or anything else. Eventually the asyncattribute will be supported properly, and you'll be able to do this as easily as loading synchronously. Eventually.

它要复杂得多，但会同时加载 a.js 和 b.js 而不会相互阻塞或其他任何东西。最终该async属性将得到正确支持，您将能够像同步加载一样轻松地做到这一点。最终。

回答by Vivin Paliath

There are two concerns here: a) ease of development b) client-side performance while downloading JS assets

这里有两个问题：a) 易于开发 b) 下载 JS 资产时的客户端性能

As far as development is concerned, modularity is never a bad thing; there are also Javascript autoloading frameworks (like requireJSand AMD) you can use to help you manage your modules and their dependencies.

就开发而言，模块化从来都不是坏事；还有一些 Javascript 自动加载框架（如requireJS和AMD）可用于帮助您管理模块及其依赖项。

However, to address the second point, it is better to combine all your Javascript into a single file and minify it so that the client doesn't spend too much time downloading all your resources. There are tools (requireJS) that let you do this as well (i.e., combine all your dependencies into a single file).

但是，为了解决第二点，最好将所有 Javascript 合并到一个文件中并缩小它，这样客户端就不会花太多时间下载所有资源。有一些工具 (requireJS) 也可以让您执行此操作（即将所有依赖项合并到一个文件中）。

回答by digembok

It's depending on the protocol you are using now. If you are using http2, I suggest you to split the js file. If you use http, I advise you to use minified js file.

这取决于您现在使用的协议。如果您使用的是http2，我建议您拆分 js 文件。如果您使用 http，我建议您使用缩小的 js 文件。

Here is the sample of website using httpand http2

这是使用http和http2的网站示例

Thanks, hope it helps.

谢谢，希望有帮助。

回答by Treps

It does not really matter. If you use the same JavaScript in multiple files, it can surely be good to have a file with the JavaScript to fetch from. So you just need to update the script from one place.

这真的不要紧。如果您在多个文件中使用相同的 JavaScript，那么拥有一个包含 JavaScript 的文件来获取肯定会很好。所以你只需要从一个地方更新脚本。