Labjs 是否会推迟加载脚本的执行直到 DOM 准备就绪？

Question

问题是关于 http://labjs.com – 一个很棒的非阻塞 JavaScript 加载和依赖管理库。

我已经阅读了文档，但我一定是太累了或者什么——我找不到任何有关 DOM 就绪事件的信息。脚本是否在 DOM 准备好后执行？

也许如果我这样做：

$LAB.script('my-library.js').wait(function(){ 
  // interacting with DOM 
});

会安全吗？或者我应该使用某种 $(function() {}) 等？

Answer 1

默认情况下，任何脚本加载器都会阻止从页面的 DOM-ready 和 onload 事件加载脚本，至少是按照意图/定义。

因此，简单的答案是，不，LABjs 在 DOM 准备就绪之前不会阻止脚本执行。 LABjs 加载的某些脚本可能会在 DOM 就绪之前运行，而其他脚本可能会在 DOM 就绪之后运行。

如果您确实遇到代码需要等待 DOM 的情况，您应该使用像 jQuery 这样的框架，并使用其内置的 DOM 就绪包装器 $(document).ready(...)使该逻辑 DOM 就绪且安全。

然而，在很多情况下，人们认为他们需要等待 DOM 就绪，但实际上不需要：

1. 大多数人将 DOM 就绪与“所有脚本都已完成加载”混为一谈。如果您只是因为需要确保所有脚本都已加载而等待 DOM 就绪，那么这是一个错误且不正确的假设。相反，使用脚本加载器的功能来确定何时加载所有脚本，并在适当的时间运行它们，而不管 DOM 加载情况如何。使用 LABjs，这就像将所有脚本放在一个 $LAB 链中一样简单，并在链的末尾有一个最终的.wait() ——您可以放心，您的代码在在所有脚本加载并运行之前，.wait() 回调不会运行。

2. 大多数人认为他们需要等待 DOM 准备好才能执行诸如附加事件处理程序或触发 Ajax 请求之类的操作。这也是一个错误的假设。如果您的代码只是在 DOM 中查询要附加事件处理程序的元素，或者您根本没有对 DOM 执行任何操作，而是进行 Ajax 调用，则不要将您的逻辑包装在 DOM 就绪包装器中。

3. 另一方面，许多人认为如果您的代码在 body 标记的末尾运行，那么您不需要等待 DOM 就绪。错误的。 DOM-ready 就是 DOM-ready，无论您的代码在哪里指定。

一般来说，只有在代码要修改 DOM 时，才真正需要将代码包装在 DOM 就绪包装器中。否则，不要等待 DOM 准备好运行您的代码。明智地了解什么是包装的，什么是没有包装的。

Answer 2

使用 jQuery 很棒的 Deferred 对象怎么样？
这就像一个魅力：

var waitThenLaunch = function() {
    var deferredDocReady = $.Deferred();
    $(document).ready(function() {
        deferredDocReady.resolve();
    });
    var deferredScriptsReady = $.Deferred();

    // Load your last remaining scripts and launch!!!
    $LAB.script('last.js').wait(function(){ deferredScriptsReady.resolve(); });

    $.when(deferredDocReady, deferredScriptsReady).done(function() { launchApp(); });
};
$LAB.script('jquery.min.js')
    .script('another_script.js')
    .script('another_script.js').wait()
    .script('another_script.js')
    .script('another_script.js').wait(function(){ waitThenLaunch(); });

在这里找到一个很好的解释：http://www. erichynds.com/jquery/using-deferreds-in-jquery/