Où mettre tout ce code JavaScript jQuery?

Question

De la documentation que j'ai trouvé cet exemple:

Nous pouvons animer tout élément, comme une image simple:

<div id="clickme"> 
    Click here 
</div> 
<img id="book" src="book.png" alt="" width="100" height="123" /> 

Avec l'élément initialement montré, nous pouvons le cacher lentement:

$('#clickme').click(function() { 
    $('#book').fadeOut('slow', function() { 
    // Animation complete. 
    }); 
}); 

Je me souviens d'il y a 5 ans, que vous ne devriez jamais se référer à tout élément jusqu'à ce qu'il soit défini. Est-ce que cette règle s'applique toujours? Donc, je devrais mettre tout ce code dans le pied de page de ma page Web? Ou puis-je le mettre dans un fichier séparé et l'importer dans le pied de page? Quelle est la meilleure pratique?

Answer 1

La méthode recommandée de le faire est de mettre tout le code d'initialisation dans $(document).ready, comme ceci:

$(document).ready(function() { 
    $('#foobar').click(function(event) { alert("You Clicked Me!"); }); 
}); 

Answer 2

Vous avez raison; vous ne pouvez pas interagir avec un élément DOM avant qu'il n'existe.

Vous avez deux options:

• Insérez le code ci-dessous le code HTML, comme vous le suggérez.

• Placez le code n'importe où, mais enveloppez-le dans $(function() { ... }).
  Cette construction exécutera la fonction dans l'événement de chargement de page, après que le DOM existe.

Answer 3

Beaucoup de gens le placent au bas de la page pour que d'autres codes puissent s'exécuter en premier. Cela devient un peu un point discutable avec la syntaxe de document prêt qui attend jusqu'à ce que d'autres contenus se chargent à la dom. Donc, en utilisant cette logique, en théorie, ça pourrait aller n'importe où.

Answer 4

La meilleure pratique consiste à placer tous les éléments SCRIPT au bas du document HTML (juste avant la balise </body> . Les raisons sont les suivantes:

1. chargement des fichiers JS externe le chargement de blocs d'autres ressources (comme les images)
2. puisque le code JS est exécuté immédiatement, il est préférable d'analyser le code HTML de la page d'abord, puis exécuter le code JS après

Vous pouvez voir un modèle HTML5 qui illustre cette pratique ici: http://vidasp.net/HTML5-template.html

Answer 5

Scripts vont mieux dans le bas de la page, pour fournir pour le rendu le plus rapide du DOM. L'idiome suivant exécute une seule fois le DOM est prêt:

$(function() { /* ... your code goes here ... */ } 

Si vous avez beaucoup de code, ou un code qui est partagé entre plusieurs pages, vous devez créer un lien dans un fichier séparé qui peut ensuite être minifiés, devrait vous devez optimiser votre vitesse de téléchargement.

Answer 6

J'ai posé cette question, quoique d'une manière différente un peu de temps en arrière. Vous pourriez vouloir regarder les réponses que j'ai aussi - ils sont assez ... philosophique:

JQuery - Best way of wiring GUI objects to events?