一个或多个 $(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(...)
});

如果两个函数在不同的文件中单独维护and/or，那么这将更适合您的代码布局，并允许您保持独立的模块彼此独立：

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

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

在您的特定情况下，您指的是连接在一起的多个文件。这意味着您可以使用任何一种格式。如果这些多个文件意味着可能不会一起使用的模块，那么您可能希望每个文件 "stand on it's own"。如果是这种情况，则使用第二个模型，因为文件彼此独立并且任何给定文件都可以单独使用。如果不存在这样的依赖关系，那么不在两个文件之间创建依赖关系将是一个优势。

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

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

Answer 2

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

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

一个或多个 $(document).ready

one or multiple $(document).ready

javascript

jquery

document

gulp