102

私は RequireJS を使用しており、DOM で何かを初期化する必要があります。現在、RequireJS はdomReadypluginを提供していますが、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 は、domReady既に jQuery が必要な場合にのみ、追加の JS に負担を追加します。

質問

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

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

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

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

4

5 に答える 5

93

すべての重要なポイントはすでにヒットしているように見えますが、いくつかの詳細が見落とされていました. 主に:

ドムレディ

これはプラグインとモジュールの両方です。要件配列に末尾を付けて含めると!、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 は実行されません。

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

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

domReady と $(document).ready() の違いについて

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

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

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

于 2013-03-20T06:07:25.450 に答える
20

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

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

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

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

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

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

于 2013-03-12T14:40:11.463 に答える
6

出現順に箇条書きに答える:

  • どちらも同じことを達成します
  • なんらかの理由で jquery について予約がある場合は、domReady を使用してください
  • 正しいので、jQueryを使用してください
  • 誰もがjQueryを使用しているわけではないため
  • 同意します。jQuery を使用してください
  • 定義によるプラグインは「ニーズを満たす」ものです。
  • クロス ブラウザの ajax は問題ではありません。クロスドメイン? おそらくありますし、ない場合は、餌をやる必要はありません。
  • 、 -、 -、 - Ok

結局のところ、あなたはこれを考えすぎています。domReady上でjavascriptを実行する仕組みです。jQuery をお持ちでない場合は、domReady プラグインをお勧めします。あなたはjQueryを持っているので、すでに利用可能な何かをするためにスクリプトをさらにロードしないでください。

明瞭度の更新

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

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

これは、事実上、まったく同じことを行うことを意味します。

于 2013-03-20T02:51:42.630 に答える
0

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

$(document).ready(...)に関連付けられた関数が、requirejs によって複数のモジュールが読み込まれたときに呼び出されないことに気付きました。すべてのrequirejsコードが実行される前にdomが準備され、ユーザー定義関数、つまりメインモジュールコード内でバインドされる前にjquery準備完了コールバックハンドラーが呼び出されると思われます。

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.');
    });
});
于 2013-07-23T12:21:09.380 に答える