web-dev-qa-db-ja.com

いつJavascriptを本文に入れ、いつ頭に入れ、いつdoc.loadを使用しますか？

可能性のある複製：
JavaScriptをHTMLファイルに配置する場所
HTMLの本体またはヘッドにスクリプトを記述すべきですか？

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

いつJavaScriptを書きますか

  • _<head>_
  • _<body>_
  • $(document).ready()

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

JQueryと 'var'コマンドについても同様です

javascriptjquerylocationheaddocument-body
21
Sander Schaeffer

$(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>

これを説明する articles や、 jQueryのドキュメント 自体がたくさんあります。

15
Kyle

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

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

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

ブラウザーは<script>タグのコンテンツをロードするときにそれらを評価するため、ドキュメントの最後でロードするのが適切です。 （これを回避するためのいくつかの「モダンな」方法がありますが、それはより複雑な領域に入りつつあります。）

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

12
Pointy

いつコードを実行する必要があるかは問題です。

DOMツリーを操作する場合（たとえば、要素を移動する/表示/非表示など）、コードをドキュメントの先頭に配置すると、コードが実行されるときに要素がそこにないため、コードは機能しません。

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

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

7
ppp