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

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

だから私は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は、domReadyjQueryがすでに必要な場合にのみ、追加のJSに負担をかけます。

ご質問

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

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

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

：私の質問に、より明確にするために必要と違い何domReadyかがjQuery？

すべての重要なポイントはすでに達成されているようですが、いくつかの詳細は亀裂から抜け出しました。主に：

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の準備が整うまで待つ必要はありません。

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

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

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

domReadyと$（document）.ready（）の違いについて

どちらも、DOMが実質的に同じ方法で準備ができているかどうか、またはいつ準備ができているかを調べます。

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

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

主な質問に答える試み：

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

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

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

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

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

出現順に弾丸に答える：

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

それがそれに来るとき、あなたはこれを考えすぎています。これは、domReadyでJavaScriptを実行するメカニズムです。jQueryがない場合は、domReadyプラグインを推奨します。あなたはjQueryを持っているので、すでに利用可能な何かをするために追加のスクリプトをロードしないでください。

明快さの更新

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

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

つまり、実質的に同じことを実行します。

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

requirejsによって複数のモジュールが読み込まれると、$（document）.ready（...）に関連付けられた関数が呼び出されないことに気付きました。すべての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.');
    });
});

私はこれをメインエントリの一部として行うので、すべてのJavaScriptでDOMの準備ができてjqueryが読み込まれることが保証されています。これがどれほど素晴らしいかわからないので、フィードバックを歓迎しますが、ここに私のmain.jsがあります。

require(['domReady!'], function(domReady){
    console.log('dom is ready');
    require(['jquery', 'bootstrap'], function(){
        console.log('jquery loaded');
        require(['app'], function(app){
            console.log('app loaded');
        });
    });
});