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

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

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

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

Answer 2

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

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

一个或多个$（文件）.ready

2 个答案: