一个或多个$（document）.ready

Question

我有一堆js片段，每一个都在单独的.js文件中。 gulp被设置为将它们全部连接到一个all.js。建议采用以下哪种方法？

• 让每个JS代码片段在单独$(document).ready：

  //all.js 
  
  $(document).ready(function(){ 
      foo... 
  }) 
  
      $(document).ready(function(){ 
      bar... 
  }) 
  

• 让所有片断在一个$(document).ready：

  //all.js 
  
      $(document).ready(function(){ 
      foo... 
      bar... 
  }) 
  

Answer 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(...) 
}); 

在特定情况下，你是指多个FIL es连接在一起。这意味着你可以使用任何一种格式。如果这些多个文件都是模块，可能不会全部一起使用，那么您可能希望每个文件“独立存在”。如果是这种情况，那么使用第二个模型，因为这些文件彼此独立，任何给定的文件都可以被自己使用。如果不存在这样的依赖关系，则不会在两个文件之间创建依赖关系。

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

记住，最佳代码重用或共享在今后的项目，测试的独立性和最简单的维护，这是有益的，使单独的文件/模块尽可能的独立。

Answer 2

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

• 使用多个回调函数时会添加一个较小的性能损失，但几乎在所有情况下都应该忽略，除非增加了非常多的单独回调函数。
• 虽然在当前实现中，顺序是通过注册顺序来定义的，但回调执行的顺序可能在将来会有所不同，因为在大多数此类框架中，处理程序的执行通常没有确定性地定义，因此它有点不安全依靠当前的实施。手动构建代码以确保执行的顺序是正确的总是更好。当然，当你所有的处理程序在功能上都是独立的，那么这根本就不是问题。