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

AJAX Application Single or Multiple JavaScript Files

本文关键字：JavaScript 文件 应用程序 单个 AJAX      更新时间：2023-09-26

这是一个最佳实践类型的问题。我正在开发一个完整的AJAX应用程序。用户导航到应用程序的主页，从那里开始的所有内容都通过AJAX加载到主页的内容部分。是把我所有的javascript文件合并成一个加载在主页上的文件，还是把它们分割成每个加载页面所需的文件?

把它们放在一个文件中显然有一个好处，那就是只需要一个HTTP请求就可以加载网站所需的javascript，之后任何对页面的请求都只需要获取HTML。但是，这需要使用live或on函数将连接(使用jQuery)的每个事件附加到文档。所以所有内容看起来像:

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

这样做会导致数百甚至可能超过1000个事件被绑定到单个元素文档上。

将它们放在单独的文件中需要发出多个HTTP请求来加载站点的各个页面，但限制了附加到文档的事件数量。

有什么最好的想法吗?

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

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

所以我会为每个页面单独的文件投票，并在部署之前应用优化。

老实说，我不是这个领域的专家，但这是我对生产环境中这个主题的一点建议。

  1. 我会使用cdn库(如jquery)。它们提供了最大的可缓存性，并且很有可能在访问其他网站时已经缓存在客户端的浏览器中。

  2. 组和缩小您的常见javascript代码，如插件，实用程序，整个网站使用的东西。它将被一次性请求，然后将可用。

  3. 为动态加载的每个"页面"设置一个单独的、缩小的脚本文件，以便与内容一起加载。

加载内容页脚本:

使用jquery的.load()方法来加载页面的片段将不幸地删除片段中存在的任何<script>标记。如jquery load()方法所述，这是为了避免IE中的"Permission denied"。

你可以做的是在你的基本页面中有一个<script id="contentScript"></script>标签，并通过替换src来加载脚本和内容。

我不知道这是否是一个好的做法，但它对我来说是有意义的:-)

相关文章：