javascript - 将单独的 js 文件与多个 jquery (document).ready() 事件统一的正确方法

Question

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

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

统一所有内容会将大量(不同的)(document).ready() 放入一个文件中，并且其中大多数将针对页面上没有的元素，这是一个问题吗？

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

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

Answer 1

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

如果这就是您想要做的，那么最简单的方法是将所有 javascript 连接到一个文件中。在同一个文件中可以有多个就绪调用。另外，如果页面上不存在元素，只要您使用 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 或其他方式来区分。

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

希望这有帮助!