Question

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

问题在于，许多这些脚本都拥有（document）.ready（）事件，这些事件的目标元素仅在该页面上可用。

统一所有内容会将很多（不同的）（文档）.ready（）放在一个文件中，而且大多数都会定位不在页面上的元素，这是一个问题吗？

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

编辑：澄清：我的意思是将单个文件中包含的数百个javascript文件统一在一个文件中，这样我就可以将其缩小。

Answer 1

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

Answer 2

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

如果您正在尝试这样做，那么最简单的方法是将所有javascript连接到一个文件中。在同一个文件中有多个就绪调用很好。如果你使用jQuery方法做事情（例如$('.element').show()就可以了），jQuery不应该在页面上没有元素时出错（如果元素不存在，$('.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或其他方法来区分。

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

希望这有帮助！

Answer 3

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

话虽如此，如果它所运行的元素不存在，很多标准的jQuery东西都会默默地失败，这通常是理想的行为。如果失败，控制台会输出一些警告。在现代浏览器上这不是问题，但是在没有安装调试条的IE上，它会导致完整的错误，这显然是不可取的。

Answer 4

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

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

使用多个jquery（document）.ready（）事件统一单独的js文件的正确方法

4 个答案: