2

私の"Weird"例を使用した以前の質問への回答を見て、どちらの方法にも利点があるかどうか疑問に思っていました。

いくつかの HTML:

<span id="them">Hey</span>
<span id="me">Hey</span>

違いは何ですか：

(function()//doing this
{
    them.innerHTML = "Weird<br>";
})();

me.innerHTML = "Not so weird<br>";//and doing this

window.onloadさらに、体の一番下にスクリプトを配置できるのに、なぜ人々は使用するのでしょうか? それとも単に個人的な好みの問題ですか？

4

5 に答える 5

2

  1. あなたの2つの例に違いはありません。最初の例では、すぐに実行される無名関数 (即時呼び出し関数式と呼ばれます) を作成します。2 番目の例は、同じコードを実行するだけです。

  2. JavaScript で HTML 要素を変更するには、ブラウザがすべての HTML 要素を読み取るまで待つ必要があります。ページが完全にロードされ、そのonload時点でブラウザーがすべての HTML 要素を認識すると、イベントが発生します。ただし、ブラウザーはonload、ページが完全に読み込まれるまでイベントを発生させません。つまり、ブラウザーは、HTML の残りの部分を既に解析しているにもかかわらず、大きな画像が完全に読み込まれるまで待機します。 JavaScript は、画像の読み込みが完了するまで不必要に待機します。ブラウザーは画像の読み込みが完了する前にすべての HTML を認識しているため、JavaScript の早期実行を妨げる理由はありません。

が JavaScript の実行を許可するまでの待ち時間が長すぎることが判明すると、すべての HTML が解析されるとすぐに JavaScript が実行されるように、( を使用せずに) 終了タグonloadの直前に JavaScript を配置するようになりました (終了タグを除く)。タグ) を使用する場合よりも早く JavaScript の実行を開始できます。<body>onload<body>window.onload

現在、jQuery などの JavaScript ライブラリには、ブラウザーがすべての HTML を認識している場合に発生するイベントがあります。ページが完全にロードされていなくても (画像が完全にロードされていないなどの理由で)。

于 2013-05-31T03:47:51.890 に答える
1

あなたの簡単な例では、2 つのケースの結果に違いはありません。どちらも同じことを達成します。

この構造を使用する理由:

(function()//doing this
{
    them.innerHTML = "Weird<br>";
})();

プライベート変数または一時変数を保持するために使用できる関数スコープを作成するか、内部の変数を外部に公開せずにクロージャーを作成することです。

2 番目の質問については、ページに必要なすべての同期リソース (スクリプトや画像など) の読み込みが完了したときに起動するwindow.onloadため、本文の最後に配置されたスクリプトとは異なる時間に起動します。window.onloadこれらすべてのリソースの読み込みが完了したときに通知を受け取るために使用できます。または、ページの準備が整った安全な時間として本文の最後に簡単に配置できないコードで使用できますが、通常は必要ありません。 DOM が安全になるまでしばらく待ちます。

于 2013-05-31T03:46:30.890 に答える
0

上記の場合、最初の方法を使用する利点はありません。

ただし、最初の方法は、いくつかの変数/メソッドを作成する必要があるが、グローバル名前空間を汚染したくない場合に適しています。

于 2013-05-31T03:47:16.047 に答える