4

質問は、http://labjs.comに関するものです。これは、ノンブロッキング JavaScript の読み込みと依存関係の管理のための優れたライブラリです。

私はドキュメントを読みましたが、疲れすぎているか何かに違いありません.DOM Readyイベントに関するものは何も見つかりませんでした. スクリプトは DOM の準備が整った後に実行されますか?

おそらく私がそうするなら：

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

安全でしょうか？または、ある種の$(function() {})などを使用する必要がありますか？

4

2 に答える 2

7

スクリプト ローダーは、デフォルトで、少なくとも意図/定義によって、ページの DOM 対応および onload イベントからスクリプトの読み込みをブロック解除するように機能します。

したがって、率直な答えは、NO です。LABjs は、DOM の準備が整うまでスクリプトの実行をブロックしません。LABjs によってロードされた一部のスクリプトは、DOM の準備が整う前に実行される場合がありますが、他のスクリプトは DOM の準備が整った後に実行される場合があります。

コードが DOM を待機する必要がある場合が本当にある場合は、jQuery などのフレームワークを使用し、組み込みの DOM 対応ラッパー $(document).ready(...) を使用して、そのロジックを DOM 対応セーフにする必要があります。

しかし、人々が DOM の準備ができるまで待つ必要があると考える多くのケースがありますが、実際にはそうではありません:

  1. ほとんどの人は、DOM 対応を「すべてのスクリプトの読み込みが完了した」と混同しています。すべてのスクリプトがロードされていることを確認する必要があるため、単に DOM 対応を待っているのであれば、これは誤った誤った仮定です。代わりに、スクリプト ローダーの機能を使用して、すべてのスクリプトがいつ読み込まれるかを判断し、DOM の読み込みに関係なく、適切なタイミングでスクリプトを実行します。LABjs を使用すると、すべてのスクリプトを 1 つの $LAB チェーンに配置し、チェーンの最後に finalを配置するだけで済みます。すべてのスクリプトがロードされるまで.wait()、そのコールバック内のコードが実行されないことを保証できます。.wait()そして走る。

  2. ほとんどの人は、イベント ハンドラーのアタッチや Ajax リクエストの起動などを行うには、DOM 対応になるまで待つ必要があると考えています。これも間違った仮定です。コードがイベント ハンドラーをアタッチする要素を単に DOM にクエリする場合、または DOM をまったく操作せずに Ajax 呼び出しを行う場合は、ロジックを DOM 対応のラッパーでラップしないでください。

  3. 反対に、多くの人は、コードが body タグの最後で実行される場合、DOM 対応を待つ必要はないと考えています。違う。コードが指定されている場所に関係なく、DOM 対応は DOM 対応です。

一般に、DOM 対応のラッパーでコードをラップする必要があるのは、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 に答える