[解決済み] Requirejs domReady プラグイン vs Jquery $(document).ready()?

2023-01-10 02:31:31

質問

RequireJSを使用しており、DOM ready時に何かを初期化する必要があります。現在、RequireJSでは domReady プラグインを使うことができますが、すでにjQueryの $(document).ready() があり、これはjQueryが必要なので利用可能です。

というわけで、2つのオプションがあります。

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

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

使用方法 $(document).ready() :

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

どれを選べばいいのでしょうか、またその理由は？

どちらの選択肢も期待通りに動作するようです。つまり、RequireJS は動的にスクリプトを追加するので、動的に要求されたスクリプトがすべてロードされる前に DOM ready が発生することが心配なのです。一方、RequireJSは、ただでさえ追加JSの負担が大きい domReady のためだけにJSを追加することになる。

質問内容

なぜ RequireJS は domReady プラグインを提供するのでしょうか？ $(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 が準備されるのを待つ必要がないのです!

A というコードのブロックがあり、それが B というモジュールに依存しているとします。 domReady! . モジュール B は DOM が準備される前に読み込みを終了しません。その結果、B がロードされる前に A が実行されることはありません。

もし、あなたが domReady を B の正規モジュールとして使う場合、A もまた domReady に依存し、さらにそのコードを domReady() 関数呼び出しの中にコードを包みます。

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

domReady と $(document).ready() の違いを再確認する。

どちらも基本的に同じ方法で DOM が準備できたかどうか、いつ準備できたかを嗅ぎ分けます。

誤ったタイミングで jQuery が実行されることへの懸念について

jQueryは、たとえDOMがjQueryより先にロードされたとしても、あらゆるreadyコールバックを起動します（あなたのコードはどちらが先に起こるかを気にするべきではありません）。