一个或多个 $(document).ready [关闭]答案

【问题标题】：one or multiple $(document).ready [closed]一个或多个 $(document).ready [关闭]
【发布时间】：2016-03-06 18:55:50
【问题描述】：

我在单独的 .js 文件中有一堆 js sn-ps。 gulp 设置为将它们全部连接到一个 all.js 。建议使用以下哪一种方法？

将每个 js sn-p 放在单独的 $(document).ready 中：

 //all.js

 $(document).ready(function(){
    foo...
 })

  $(document).ready(function(){
    bar...
 })

将所有 sn-ps 合二为一 $(document).ready:

   //all.js

  $(document).ready(function(){
    foo...
    bar...
 })

【问题讨论】：

理论上有一个$(document).ready() 是最好的，但实际上性能损失可以忽略不计。
没有什么不同，但为了避免重复代码，最好“将所有sn-ps放在一个$(document).ready”中。如果您的代码没有依赖项

标签： javascript jquery gulp document

【解决方案1】：

这实际上只是编码方便或个人风格偏好的问题。两者都可以正常工作并且工作相同。

使用$(document).ready() 注册的回调函数按照它们注册的顺序被调用，因此无论哪种方式，顺序都相同。

这两种方法之间的性能差异可能非常小，与发生的其他事情相比，您无法衡量它，因为它只是使用两个单独的.ready() 调用的几个额外级别的函数调用。如果您可以衡量差异，我会感到惊讶，如果这种差异实际上是相关的，我会更加惊讶。您更有可能应该使用其他代码结构原因来决定走哪条路。

如果您要调用的两个函数方便地在同一个文件中，那么这将导致更紧凑的代码：

$(document).ready(function(){
    foo(...)
    bar(...)
});

如果这两个函数分别维护和/或在不同的文件中，那么这将更方便地适应您的代码布局，并允许您保持独立的模块彼此独立：

// one place in your code
$(document).ready(function(){
    foo(...)
});

// somewhere else in your code
$(document).ready(function(){
    bar(...)
});

在您的特定情况下，您指的是连接在一起的多个文件。这意味着您可以使用任何一种格式。如果这些多个文件是可能不会一起使用的模块，那么您可能希望每个文件“独立存在”。如果是这种情况，请使用第二个模型，因为文件变得彼此独立，并且任何给定的文件都可以单独使用。如果不存在这样的依赖关系，那么在两个文件之间不创建依赖关系会有好处。

另一方面，如果这两个文件已经相互依赖，并且必须在任何项目中一起使用，那么尝试保持任何独立性没有任何好处，因此您可以使用任何一种样式都很好。

请记住，为了在未来的项目中实现最佳代码重用或共享、测试独立性和最简单的可维护性，使单独的文件/模块尽可能独立是很有用的。

【讨论】：

【解决方案2】：

从语义上讲，这两种方法是相同的。但是，有几点需要注意。

使用多个回调时会增加轻微的性能损失，但在几乎所有情况下都可以忽略不计，除非添加大量单独的回调。
虽然在当前实现中顺序是由注册顺序定义的，但回调执行的顺序在未来可能会有所不同，因为在大多数此类框架中，处理程序的执行通常不是确定性定义的，因此有点不安全依赖于当前的实现。最好手动构建代码以确保执行顺序正确。当然，当您的所有处理程序功能独立时，这根本不是问题。

【讨论】：