22

重複の可能性：
HTMLファイルのどこにJavascriptを配置しますか？
HTMLの本文または先頭にスクリプトを書く必要がありますか？

私はいつも疑問に思っていました。主な理由は、ページを作成するときに、次のことに基づいて常に問題が発生するためです。

JavaScriptを書くのはいつですか

  • の中に<head>
  • の中に<body>
  • とともに$(document).ready()

ばかげているかもしれませんが、間違った場所やyesまたはnodoc.ready()コマンドが原因で、JavaScript（/ jQuery）が実行されなかったことが何度かありました。だから私は本当にそう思っています。

jQueryと'var'コマンドについても同じことが言えます

4

3 に答える 3

17

$(document).ready()JavaScriptがロードされる前に、すべてのDOM要素がロードされていることを確認するだけです。

関係ないとき

このイベントが発生するのを待たずに、ページにまだ存在していないDOM要素またはスタイルを操作してしまう可能性があります。DOM Readyイベントを使用すると、ページのさまざまな部分でスクリプトをより柔軟に実行することもできます。例えば：

<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

スクリプトが実行される前にマップdivがロードされているため、実行されます。実際、スクリプトをページの下部に配置することで、かなり優れたパフォーマンスの向上を得ることができます。

それが重要なとき

ただし、<head>要素にスクリプトをロードしている場合、ほとんどのDOMはロードされていません。この例は機能しません：

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>

マップdivがロードされていないため、これは行われません。

安全な解決策

これを回避するには、DOM全体がロードされるまで待つだけです。

<script type="text/javascript">$(document).ready(function () { 
    document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>

これを説明する記事はたくさんあり、 jQueryのドキュメント自体も同様です。

于 2013-01-14T23:09:32.467 に答える
12

現代の「ベストプラクティス」では、次のようになります。

  • ページのレンダリングが開始される前に、スクリプトが<head>発生するはずのタイミングにスクリプトを配置します。例としては、HTML5シムライブラリやModernizrなどがあります。
  • スクリプトのインポート方法の制御が制限されている場合は、スクリプトを「準備完了」ハンドラーに配置します。目立たないように機能を追加するためにページに含めることができるユーティリティのようなものは、それらがどのように使用されるかわからないため、一般に「準備完了」ハンドラーを使用します。
  • <body>他のすべての場合にそれを回避できる場合は、スクリプトを最後に配置します。

場合によっては、body要素の最後にロードしたいものを必要とするページの依存関係になってしまうことがあります。これは望ましくない状況ですが、回避できない場合は、スクリプトが<head>の最後ではなくに強制的にロードされる可能性があり<body>ます。

ブラウザは<script>タグをロードするときにタグの内容を評価するため、ドキュメントの最後にロードすることをお勧めします。（これを回避するための「現代的な」方法がいくつかありますが、それはより複雑な領域に入り込んでいます。）

「ready」ハンドラー（または、さらに言えば「load」ハンドラー）をいつ使用するかの決定は、<script>タグを配置する場所の決定とは少し異なります。たとえば、サーバー側のテンプレートシステムからjQuery参照を生成するページ内ウィジェットがある場合（望ましくないが、何ができるでしょうか？）、他のコードであっても、ページの上部にjQueryをインポートする必要があります。初期化を「準備完了」ハンドラーに延期する場合があります。つまり、「準備完了」をいつ使用するかについての決定は、スクリプトが適切なポイントでページにインポートされることに依存するかどうか、または場所に関係なく適切なことが確実に行われるようにするかどうかに関係します。その<script>タグが配置されます。

于 2013-01-14T23:09:40.040 に答える
7

コードをいつ実行する必要があるかが問題になります。

DOMツリーを操作する場合（たとえば、要素の移動/表示-非表示など）、コードをドキュメントの先頭に配置すると、コードの実行時に要素が存在しないため、コードが機能しなくなります。

その場合、コードをドキュメントの先頭に配置し、ドキュメントDOMの準備ができたら、次のコマンドを使用してコードを呼び出すことができます。$(document).ready()

ドキュメントの最後にコードを配置する必要はめったにありません。Googleプラス+1ボタンがあります。これは、最後の+1ボタンの後にスクリプトを配置する必要があるため、ドキュメントの最後に貼り付けるだけです。念のため。

于 2013-01-14T23:11:33.197 に答える