108

最初に Javascript/jQuery を使い始めたとき、document.ready を使用するように言われましたが、その理由をまったく知りませんでした。

javascript/jquery コードを jQuery 内にラップすることが理にかなっている場合について、誰かがいくつかの基本的なガイドラインを提供してくれるdocument.readyでしょうか?

私が興味を持っているいくつかのトピック:

  1. jQuery の.on()メソッド: .on()AJAX のメソッドをかなり使用します (通常、動的に作成された DOM 要素に対して)。.on()クリック ハンドラーは常に内部に ある必要がありますdocument.readyか?
  2. パフォーマンス: さまざまな javascript/jQuery オブジェクトを document.ready の内部または外部に保持するとパフォーマンスが向上しますか(また、パフォーマンスの違いは重要ですか?)?
  3. オブジェクト スコープ: AJAX で読み込まれたページは、前のページのドキュメント内にあったオブジェクトにアクセスできません。document.ready の外部にあるオブジェクト(つまり、真に「グローバルな」オブジェクト)にのみアクセスできますか?

更新:ベスト プラクティスに従うために、すべての JavaScript (jQuery ライブラリとアプリのコード) はHTML ページの下部deferにあり、AJAX をロードしたページで jQuery を含むスクリプトの属性を使用しています。これらのページで jQuery ライブラリにアクセスできます。

4

8 に答える 8

146

簡単に言えば、

$(document).ready準備ができたときに発生するイベントdocumentです。

jQueryコードをheadセクションに配置し、要素（アンカー、imgなど）にアクセスしようとすると、上から下に解釈され、jQueryコードのときにhtml要素が存在しないdomため、アクセスできませんhtml実行します。

この問題を克服するために、すべての要素にアクセスできる$(document).readyときに呼び出される関数内にすべての jQuery/javascript コード (DOM を使用する) を配置します。dom

そして、これが理由です。jQuery コードを一番下 (すべての dom 要素の後、直前</body>) に配置すると、$(document).ready

上で説明したのと同じ理由で、method onを使用する場合にのみ、onメソッドを内部に配置する必要はありません。$(document).readyondocument

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

編集

コメントから、

  1. $(document).ready画像やスクリプトを待ちません。$(document).readyそれがとの大きな違いです$(document).load

  2. DOM にアクセスするコードのみを Ready ハンドラに含める必要があります。プラグインの場合は、準備完了イベントに含めるべきではありません。

于 2012-10-25T05:46:24.290 に答える
7

答え:

jQuery の .on() メソッド: AJAX に .on() メソッドをかなり使用します (DOM 要素を動的に作成します)。.on() クリック ハンドラーは常に document.ready 内にある必要がありますか?

いいえ、常にではありません。JS をドキュメント ヘッドにロードする場合は、その必要があります。ページが AJAX 経由で読み込まれた後に要素を作成する場合は、その必要があります。スクリプトが html 要素の下にある場合は、ハンドラーも追加する必要はありません。

パフォーマンス: さまざまな javascript/jQuery オブジェクトを document.ready の内部または外部に保持するとパフォーマンスが向上しますか (また、パフォーマンスの違いは重要ですか?)?

場合によります。ハンドラーをアタッチするのに同じ時間がかかります。ページが読み込まれたらすぐに実行するか、ドキュメント全体が読み込まれるまで待機するかによって異なります。そのため、ページで他に何をしているかによって異なります。

オブジェクト スコープ: AJAX で読み込まれたページは、前のページのドキュメント内にあったオブジェクトにアクセスできません。document.ready の外部にあるオブジェクト (つまり、真に「グローバルな」オブジェクト) にのみアクセスできますか?

これは本質的に独自の関数であるため、グローバルスコープ（すべての関数の外/上）で宣言された変数にのみアクセスできます。window.myvarname = '';

于 2012-10-25T05:51:56.353 に答える
6

jQuery を安全に使用する前に、ページが操作可能な状態になっていることを確認する必要があります。jQuery では、コードを関数に入れ、その関数を に渡すことでこれを実現します$(document).ready()。渡す関数は無名関数にすることができます。

$(document).ready(function() {  
    console.log('ready!');  
});

これにより、ドキュメントの準備ができたら .ready() に渡す関数が実行されます。何が起きてる？$(document) を使用してページのドキュメントから jQuery オブジェクトを作成し、そのオブジェクトで .ready() 関数を呼び出して、実行する関数を渡します。

これはあなた自身が頻繁に行うことなので、必要に応じて簡単な方法があります — $() 関数は、関数を渡すと $(document).ready() のエイリアスとしても機能します:

$(function() {  
    console.log('ready!');  
});

これは良い読み物です: Jquery Fundamentals

于 2012-10-25T06:03:02.990 に答える
3

.ready() - DOM が完全にロードされたときに実行する関数を指定します。

$(document).ready(function() {
  // Handler for .ready() called.
});

ここにすべての jQuery メソッドのリストがあります

$(document).ready()の紹介を読む

于 2012-10-25T05:44:54.230 に答える
3

現実的にdocument.ready言うと、DOM を正確に操作する以外には必要なく、常に必要であるとは限らず、最適なオプションでもありません。つまり、たとえば大規模な jQuery プラグインを開発する場合、DRY を維持しようとしてコード全体でほとんど使用しないため、DOM を操作するが呼び出されることを意図したメソッドで可能な限り抽象化するということです。後で。すべてのコードが緊密に統合されている場合、公開される唯一のメソッドdocument.readyは通常init、すべての DOM マジックが発生する場所です。これがあなたの質問に答えることを願っています。

于 2012-10-25T05:47:18.310 に答える
1

ドキュメントが完全にロードされるまで待つ必要があるため、すべてのアクションを document.ready にバインドする必要があります。

ただし、すべてのアクションの関数を作成し、document.ready 内から呼び出す必要があります。関数 (グローバル オブジェクト) を作成したら、必要なときにいつでも呼び出すことができます。したがって、新しいデータが読み込まれ、新しい要素が作成されたら、それらの関数を再度呼び出します。

これらの関数は、イベントとアクション アイテムをバインドした関数です。

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}
于 2012-10-25T05:47:48.080 に答える
-2

DOM (ドキュメント オブジェクト モデル) が読み込まれると、ready イベントが発生します。

このイベントはドキュメントの準備ができた後に発生するため、他のすべての jQuery イベントと関数を配置するのに適しています。上記の例のように。

ready() メソッドは、ready イベントが発生したときの動作を指定します。

ヒント: ready() メソッドは と一緒に使用しないでください。

于 2015-01-19T08:35:22.910 に答える