Question

这是最佳实践类型的问题。我正在开发一个完整的AJAX应用程序。用户导航到应用程序的主页面，从那里开始的所有内容都通过AJAX加载到主页面的内容部分。是否更好地获取我拥有的所有javascript文件并将它们合并到一个加载到主页面上的文件中，或者将它们拆分成每个加载的页面所需的文件？

将所有内容放在一个文件中显然有一个好处，即只有一个HTTP请求才能加载网站所需的javascript，之后对页面的任何请求都只需要获取HTML。但是，这要求使用live或on函数将每个连接的事件（使用jQuery）附加到文档。所以一切都会像：

$(document).on('click', '#SomeButton', function () { });

这样做会导致数百个，可能超过一千个事件被绑定到单个元素，即文档。

将它们放在单独的文件中需要多次HTTP请求才能加载网站的各个页面，但会限制附加到文档的事件数量。

关于什么是最好的想法？

Answer 1

如果您的项目使用任何js库（如jQuery）及其插件（如网格插件等），我会为更大项目的每个页面投票选择单独的js文件。如果您有一个大的单个javascript文件，您的第一页将加载缓慢显然给你的用户留下了不好的第一印象。我们所做的是我们为每个页面创建单独的js文件，特别是当有ajax调用来加载页面的数据时。此外，每个可插拔组件都有单独的文件，如客户下拉或日期计数器等。这样，它易于管理代码并在以后进行自定义。

在部署应用程序之前，我们可以合并相关文件并为单个页面创建单个文件。例如，如果名为editProfile.php的页面使用数据选择器，jquery验证插件和自定义js来加载用户数据，我们可以将它们组合在一个文件中，以便只为单个页面加载文件。

因此，我会投票支持每个页面的单独文件，并在部署之前应用优化。

Answer 2

我真的不是这个领域的专家，但这是我在生产环境中就此主题提出的建议。

我会将CDN用于库（如jquery）。它们提供了最大的可缓存性，并且很有可能它已经在客户端的浏览器中缓存而无法访问其他网站。这样就可以节省一些请求。
对您的常用JavaScript代码进行分组和缩小，例如插件，实用程序，整个网站中使用的内容。它将被要求一次性，然后可用。
为您动态加载的每个“页面”都有一个单独的缩小的脚本文件，您将与内容一起加载。

加载内容页面的脚本：

使用jquery中的.load（）方法加载页面片段会遗憾地删除片段中存在的任何<script>标记。如jquery load（）方法中所述，这是为了避免IE中的“权限被拒绝”。

您可以做的是在基页中添加<script id="contentScript"></script>标记，并通过替换src来加载脚本以及内容。

我不知道这是不是一个好习惯，但对我来说是有道理的： - ）

AJAX应用程序单个或多个JavaScript文件

2 个答案: