2

我有一个非常大的项目，它有几个外部 javascript 文件，我想将它们统一在一个大文件中以优化服务器负载。

问题是这些脚本中的许多都有它们自己的 (document).ready() 事件，这些事件以仅在该页面上可用的元素为目标。

统一一切会将很多（不同的） (document).ready() 放在一个文件中，其中大多数将针对不在页面上的元素，这是一个问题吗？

解决这个问题的正确方法是什么？

编辑：澄清：我的意思是将数百个包含在他们自己标签中的javascript文件统一在一个文件中，这样我就可以缩小它。

4

4 回答 4

3

我不太清楚这个问题（某些元素不在页面上），但 jQuery 专门设计用于在页面中有多个$(function () {})（文档准备好的快捷方式）调用，并让它们在正确的时间运行。

于 2013-01-09T04:12:01.947 回答
3

在我看来，您在每个页面上都包含不同的 javascript 文件，并且您想将它们合并在一起。

如果这是您要尝试做的，那么最简单的方法是将所有 javascript 连接到一个文件中。在同一个文件中有多个就绪调用很好​​。如果页面上不存在元素，jQuery 也不应该出错，只要您使用 jQuery 方法来做事（例如$('.element').show()，这很好，但$('.element')[0].style.display = 'block';如果元素不存在于该页面上，则会出错。

将它们放在一起可能会产生意想不到的后果，但如果您有只想应用于特定页面的东西。处理此问题的一种方法是在附加特定事件之前检查您所在的页面。您可以通过检查页面上的特定元素来做到这一点，例如

// check if element is present and visible
if ($('.element').is(':visible')) {
    // now we are on this specific page so let's do everything 
    // specific to this page here
}

或者

// checks for presence of element
if ($('.element').length) {
}

或者您可以使用 id 或其他方式来区分。

您现在可以$(document).ready(init);在 javascript 的底部进行一次调用，init 函数可以决定需要为该页面初始化什么。

希望这可以帮助！

于 2013-01-09T04:21:46.893 回答
1

在我开始使用之前，我倾向于添加一个检查以查看我希望 jQuery 与之交互的元素是否确实存在。

话虽如此，许多标准的 jQuery 东西如果它所操作的元素不存在，就会默默地失败，这通常是所需的行为。虽然有一些插件在失败时会向控制台输出警告。在现代浏览器上这不是问题，但在没有安装调试栏的 IE 上，它会导致完全错误，这显然是根本不需要的。

于 2013-01-09T10:38:54.630 回答
0

您不需要有多个(document).ready()块，您应该能够将所有代码保存在一个(document).ready()块中。该代码将仅针对与选择器对应的项目，因此您应该没问题。

附带说明一下，您需要确保不会有来自不同页面的具有相同 id、class 或其他属性的不同对象 - 如果单个 JS 文件对应于所有这些页面并且不同页面上有多个元素具有您的 JS 选择器匹配的属性，您将有不希望的（如果项目太复杂，难以识别）的副作用。

于 2013-01-09T04:24:16.400 回答