凌乱的JavaScript标记，如何改进index.html

如何更好地组织索引中包含的数十个脚本标记？

---

我希望将HTTP请求降到最低。

这是一种非常常见的做法：使用连接工具将所有

.js

文件合并到一个文件中，例如（也适用于CSS）。然后还考虑用微缩器压缩代码。工作正常，jQuery项目也使用它。

对于这个问题，有两种常见的解决方案-库级和应用程序级

图书馆 使用一些工具，您可以将所有脚本合并到一个js文件中。在Atma.js中，我们使用

导入程序

，以便库。文件看起来像这样

// import /src/a.js
console.log('do smth. with a');
// import /src/b.js
console.log('do smth. with b, or a');

这种方法比简单的文件连接好，因为

a.js

可能有一些嵌套导入

还有一些工具可以监视所有源代码的更改，当您编辑任何文件时，这些工具会为您运行任务，以便生成的库始终是新的，并且可以进行调试。我们也有UglifyJS，所以另外还可以生产小型版本

所以这个库很好，因为它不需要为应用程序本身提供任何额外的框架/工具

应用层（模块） 在这里，您可以使用客户端上的附加库。有很多，有些是。我们使用最后一个，因为它不仅可以加载javascript，还可以加载coffeescript、样式（css，less）和任何其他文本/html/模板文件

包括/需要源，还将加载所有嵌套的依赖项。在开发模式下，当您分别加载N个文件时，它看起来非常适合调试，因为任何例外情况下，您都有行号和发生的文件

这些工具也有编译器——因此在生产中，您可以将所有资源合并到一个js/css文件中

应用层方法将

模块

引入到游戏中-我不会在这里解释原因，但它在应用中扮演着巨大的角色。建筑

---

您必须回顾这两种方法，并决定在您的应用程序中哪些方法可能更好。如果有任何进一步的问题，请毫不犹豫地在评论中询问他们。

另外，做一些“整理”——确定是否需要所有脚本。此外，您可以考虑（如果结果是级联的.js文件很大），确定哪些脚本需要哪些页面，并且只需要在每个页面上所需的脚本。