¿Dónde poner todo el código JavaScript jQuery?

Question

De la documentación que he encontrado este ejemplo:

Podemos animar cualquier elemento, como una simple imagen:

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

Con el elemento se muestra inicialmente, podemos ocultarlo lentamente:

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

que recuerdo de hace 5 años, que nunca debe hacer referencia a cualquier elemento hasta que se definió. ¿Esta regla todavía se aplica? Entonces, ¿tendría que poner todo ese código en el pie de página de mi página web? ¿O puedo ponerlo en un archivo separado e importarlo en el pie de página? ¿Cuál es la mejor práctica?

Answer 1

La forma recomendada de hacer esto es poner todo el código de inicialización en $(document).ready, así:

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

Answer 2

Tiene razón; no puedes interactuar con un elemento DOM antes de que exista.

tiene dos opciones:

• poner el siguiente código HTML, como usted sugiere.

• poner el código en cualquier parte, pero lo envuelve en $(function() { ... }).
  Este constructo ejecutará la función en el evento de carga de página, después de que el DOM exista.

Answer 3

Muchas personas lo colocan en la parte inferior de la página para que otros códigos se puedan ejecutar primero. Eso se convierte en un punto discutible con la sintaxis de documento listo que espera hasta que otro contenido se cargue al dom. Entonces, usando esa lógica, en teoría podría ir a cualquier parte.

Answer 4

La mejor práctica es colocar todos los elementos del guión en la parte inferior del documento HTML (justo antes de la etiqueta </body> . Las razones son:

1. carga de archivos externos JS bloques de carga de otros recursos (como imágenes)
2. ya que el código JS se ejecuta inmediatamente, es mejor analizar el código HTML de la página en primer lugar y, a continuación, ejecutar el código JS después

Puede ver una plantilla de HTML 5 que demuestra que esta práctica aquí: http://vidasp.net/HTML5-template.html

Answer 5

Scripts van mejor en el pie de la página, para proporcionar para la representación más rápida del DOM. La siguiente expresión idiomática ejecuta sólo una vez que el DOM está listo:

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

Si usted tiene una gran cantidad de código, o código que se comparte entre varias páginas, se podrán enlazar en un archivo separado que puede ser minified, debe necesitas optimizar tu velocidad de descarga.

Answer 6

hice esta pregunta, aunque de una manera diferente un poco de tiempo atrás. También querrás ver las respuestas que obtuve, son bastante ... filosófica:

JQuery - Best way of wiring GUI objects to events?