Dove mettere tutto il codice JavaScript jQuery?

Question

Dalla documentazione che ho trovato questo esempio:

Siamo in grado di animare qualsiasi elemento, ad esempio una semplice immagine:

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

Con l'elemento inizialmente mostrato, possiamo nascondere lentamente:

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

mi ricordo da 5 anni fa, che non bisogna mai mai riferirsi a qualsiasi elemento fino a quando non è stato definito. Questa regola si applica ancora? Quindi dovrei mettere tutto quel codice nel footer della mia pagina web? O posso metterlo in un file separato e importarlo nel footer? Qual è la migliore pratica?

Answer 1

il modo consigliato di fare questo sta mettendo tutto il codice di inizializzazione in $(document).ready, in questo modo:

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

Answer 2

Sei corretto; non puoi interagire con un elemento DOM prima che esista.

si hanno due opzioni:

• mettere il codice in basso il codice HTML, come lei ha suggerito.

• Inserire il codice ovunque, ma avvolgerlo in $(function() { ... }).
  Questo costrutto eseguirà la funzione nell'evento di caricamento della pagina, dopo che il DOM esiste.

Answer 3

Molte persone lo mettono nella parte inferiore della pagina in modo che altri codici possano essere eseguiti per primi. Ciò diventa un po 'problematico con la sintassi pronta per il documento che attende il caricamento di altri contenuti nella dom. Quindi, usando quella logica, in teoria potrebbe andare ovunque.

Answer 4

La pratica migliore è di mettere tutti gli elementi SCRIPT sul fondo del documento HTML (a destra prima del tag </body> . I motivi sono:

1. carico di JS file blocchi di carico esterno di altre risorse (come immagini)
2. dal codice JS viene eseguito immediatamente, è meglio analizzare il codice HTML della pagina prima, e quindi eseguire il codice JS dopo

Si può vedere un modello di HTML5 che dimostra questa pratica qui: http://vidasp.net/HTML5-template.html

Answer 5

script vanno meglio nel piede della pagina, per fornire per il rendering più veloce del DOM. Il seguente linguaggio viene eseguito solo una volta che il DOM è pronto:

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

Se si dispone di un sacco di codice, o codice che viene condiviso tra più pagine, si dovrebbe collegarlo in un file separato, che possono poi essere ridotte di, dovrebbe è necessario ottimizzare la velocità di download.

Answer 6

Ho fatto questa domanda, anche se in un modo diverso un po 'di tempo fa. Potresti voler dare un'occhiata alle risposte che ho ricevuto anch'io ... sono piuttosto ...filosofica:

JQuery - Best way of wiring GUI objects to events?