4

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

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

也许如果我这样做：

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

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

4

2 回答 2

7

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

所以，直截了当的答案是，不，LABjs 在 DOM 准备好之前不会阻止脚本执行。LABjs 加载的一些脚本可能在 DOM 就绪之前运行，而其他脚本可能在 DOM 就绪之后运行。

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

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

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

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

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

通常，您的代码真正需要包装在 DOM-ready 包装器中的唯一时间是它是否要修改 DOM。否则，不要等待 DOM 准备好运行您的代码。对包装好的和不包装的东西要聪明。

于 2011-03-23T18:21:55.393 回答
1

使用 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/

于 2011-12-15T23:09:13.600 回答