web-dev-qa-db-ja.com

Requirejs domReadyプラグインとJquery $（document）.ready（）？

RequireJSを使用しており、DOMで何かを初期化する必要があります。現在、RequireJSは domReadyプラグイン を提供していますが、jQueryの$(document).ready()が既にあり、jQueryが必要になったので利用できます。

だから私は2つのオプションがあります：

  1. domReadyプラグインを使用します。

    _require(['domReady'], function (domReady) {
    domReady(function () {
        // Do my stuff here...
    });
});
_

  2. $(document).ready()を使用します。

    _$(document).ready(function() {
    // Do my stuff here...
});
_

どちらを選択する必要があり、なぜですか？

どちらのオプションも期待どおりに機能するようです。 RequireJSは魔法を使っているので、jQueryには自信がありません。つまり、RequireJSはスクリプトを動的に追加するため、動的に要求されたすべてのスクリプトが読み込まれる前にDOMの準備ができるのではないかと心配しています。一方、RequireJSは、jQueryが既に必要な場合にdomReadyのためだけに追加のJSに負担を追加します。

ご質問

  • JQueryの$(document).ready();を使用できるのに、RequireJSがdomReadyプラグインを提供するのはなぜですか？別の依存関係を含める利点はありません。
  • ニーズを満たすだけの場合は、クロスブラウザAJAXに提供してみませんか？

私の知る限り、domReadyを必要とするモジュールは、ドキュメントの準備ができた後にフェッチまたは実行されることはありません。同様にjQueryを要求することもできます。

_require(['jQuery'], function ($) {
    $(document).ready(function () {
        // Do my stuff here...
    });
});
_

私の質問をより明確にするために：domReadyまたはjQuery？を要求することの違いは何ですか

javascriptjqueryhtmlrequirejsdocument-ready
99
Yugal Jindle

すべての重要なポイントがすでにヒットしているように見えますが、いくつかの詳細がクラックを通過しました。主に：

domReady

プラグインとモジュールの両方です。後続の_!_を含む要件配列にそれを含めると、DOMと対話するのが「安全」になるまでモジュールは実行されません。

_define(['domReady!'], function () {
    console.info('The DOM is ready before I happen');
});
_

ロードと実行は異なることに注意してください。すべてのファイルをできるだけ早くロードしたい場合、時間に依存するのはコンテンツの実行です。

_!_を省略した場合、それはたまたま関数である通常のモジュールであり、DOMとの対話が安全になる前に実行されないコールバックを取得できます。

_define(['domReady'], function (domReady) {
    domReady(function () {
        console.info('The DOM is ready before I happen');
    });
    console.info('The DOM might not be ready before I happen');        
});
_

DomReadyをプラグインとして使用する場合の利点

_domReady!_に依存するモジュールに依存するコードには、非常に大きな利点があります。DOMの準備ができるまで待つ必要はありません！

_domReady!_に依存するモジュールBに依存するコードブロックAがあるとします。モジュールBは、DOMの準備ができるまでロードを完了しません。同様に、AはBがロードされるまで実行されません。

domReadyをBの通常のモジュールとして使用する場合、AがdomReadyに依存すること、およびそのコードをdomReady()内にラップすることも必要です。関数呼び出し。

さらに、これは_domReady!_が$(document).ready()よりも同じ利点を享受することを意味します。

DomReadyと$（document）.ready（）の違いを再確認してください

どちらも、DOMの準備ができているかどうかを、本質的に同じ方法で探ります。

間違ったタイミングでjQueryが起動することを恐れる

jQueryは、jQueryが実行される前にDOMがロードされた場合でも、準備ができたコールバックを起動します（コードはどちらが先に発生するかを気にする必要はありません）。

90
fncomp

あなたの主な質問に答える試み：

Jqueryの$(document).ready();を使用できるのに、なぜrequirejsがdomReadyプラグインを提供するのですか？

彼らは2つの異なることを本当にします。 RequireJSのdomReady依存関係は、このモジュールを実行する前にDOMを完全にロードする必要があることを意味します（したがって、必要に応じてアプリケーション内の任意の数のモジュールで見つけることができます）、代わりに$(document).ready()が起動しますDOMの読み込みが完了すると、そのコールバックは機能します。

違いは微妙に見えるかもしれませんが、これを考えてください。何らかの方法でDOMに結合する必要があるモジュールがあるので、domReadyに依存してモジュール定義時に結合するか、または置くことができますモジュールの初期化関数へのコールバックを含む、$(document).ready()の最後。最初のアプローチをクリーナーと呼びます。

一方、DOMの準備ができたときにすぐに発生する必要があるイベントがある場合、$(document).ready()イベントが重要になります。これは、モジュールのロードが完了しているRequireJSに特に依存しないためです。から再呼び出しが満たされています。

また、jQueryでRequireJSを必ずしも使用する必要はないことも検討する価値があります。 DOMアクセスを必要とする（ただしjQueryに依存しない）ライブラリモジュールは、domReadyを使用することで引き続き有用です。

20
Gert Sønderby

出現順に弾丸に答える：

  • 彼らは両方とも同じことを達成します
  • 何らかの理由でjqueryについて予約している場合は、domReadyを使用します
  • 正しいので、jQueryを使用してください
  • 誰もがjQueryを使用しているわけではないため
  • 同意する、jQueryを使用するだけ
  • 定義によるプラグインは「ニーズに応える」。
  • クロスブラウザーajaxは問題ではありません。クロスドメイン？おそらく存在し、もし存在しなければ、供給する必要はありません。
  • 、 -、 -、 - OK

結局のところ、あなたはこれを再考しています。これは、domReadyでJavaScriptを実行するメカニズムです。 jQueryがない場合は、domReadyプラグインを推奨します。 jQueryを使用しているので、すでに利用可能なことを行うためにスクリプトをロードしないでください。

透明度の更新

DomReadyプラグイン 関数を収集 文書が「準備完了」のときに呼び出す。すでにロードされている場合、すぐに実行されます。

JQueryは関数を収集し、 遅延オブジェクト を「準備完了」のdomにバインドします。 DOMの準備が整うと、遅延オブジェクトが解決され、関数が起動します。 DOMが既に「準備完了」の場合、遅延オブジェクトは既に解決されているため、関数はすぐに実行されます。

これは、効果的にまったく同じことを行うことを意味します。

6
awbergs

複数のモジュールでrequirejsを試した後、使用することをお勧めします domReady。

私はその機能が $（document）.ready（...） requirejsによって複数のモジュールがロードされたときに呼び出されません。すべてのrequirejsコードが実行される前にdomが準備され、jquery readyコールバックハンドラーがユーザー定義関数（メインモジュールコード内）にバインドされる前に呼び出されると思います。

require(['jquery',
    'underscore',
    'text!some_template.html',
    './my_module_1',
    './my_module_2',
    'domReady',
    'other_dependency_1',
    'other_dependency_2'
    ], function($, _, someTemplate, myModule1, myModule2, domReady) {

    $(document).ready(function() {
        console.info('This might never be executed.'); 
        console.info('Dom might get ready before requirejs would load modules.');
    });

    domReady(function () {
        console.info('This runs when the dom gets ready and modules are loaded.');
    });
});
0
Marcin Nowakowski