在jQuery准备好之前加载javascript？

Question

JS新来了这里，被交给了一个项目来接管。我遇到了一个情况，我能够开始工作(我花了很长时间才这么做)，但我不明白它背后的JS内部结构。有人能解释一下这件事吗？

我有一个JS文件，在js文件中有两个不同类型的函数块，我将称之为last.js b/c，它是列出的最后一个文件：

1. 传递给jQuery对象的直接函数

(function ($) {
...
}(jQuery));

1. 然后，您就有了标准的jQuery文档加载代码：

$(function () {
...
});

这个JS文件是在我的页面上引用的最后一个文件，我假设它将是页面执行时最后一个调用/加载的文件。但事实并非如此。直接函数(1)首先被称为。接下来，加载并执行jqueryvalidation.js文件。最后，调用jQuery last.js中的ready()函数。

因此，它有效地在其他js库之前运行直接函数，然后按顺序加载/运行其他js文件，最后返回到我的last.js文件并完成它。如何在我的jqueryvalidation.js文件之前调用列表中的最后一个文件？直接函数被传递给jQuery，所以jQuery必须已经加载并且页面应该在那个时候准备好了。

要使用jqueryvalidation.js，我必须将自定义验证代码放在即时窗口中。如果我将它放入jQuery就绪函数中，则在验证代码解析了页面并没有做任何事情之后调用它。

为什么在同一个js文件中的这两个函数具有完全不同的执行顺序？

Answer 1

$(function(){})是$(document).ready(function(){})的缩写，这意味着在加载文档之前不会执行它。

所以，这里所发生的是您的代码正在运行，当它到达$(function(){})时，它会向事件队列中添加一个函数，然后其余的代码运行。

然后，它转到下一个<script>标记，以此类推，直到解析页面。一旦DOM准备就绪，您的函数就会运行。