que he estado haciendo un poco de JavaScript (bueno, más como jQuery) desde hace un tiempo y una cosa que siempre me ha confundido acerca es donde debo poner mis guiones, en la etiqueta o en el <head> etiqueta <body>.¿Dónde debe colocarse JavaScript?
Si alguien pudiera aclarar este problema, sería genial. Un ejemplo de lo que debería ir a donde sería perfecto.
Las mejores prácticas de google y yahoo dicen que, para el funcionamiento, JavaScript debe siempre ser puesto en un archivo externo, y vinculado a su página con una etiqueta <script> situada en la parte inferior del HTML, justo antes del cierre de la <body> elemento.
Esto permite que el navegador muestre la página completa de inmediato, en lugar de detenerse para evaluar Javascript.
El problema con esto es que se renderiza una página "sin función". Por cierto, ¿es una coincidencia que ambos tengamos el mismo representante? (1666) –
Re: 'sin función': su página todavía debería funcionar sin JS. Y probablemente solo sea un 1/2 segundo por segundo entre el procesamiento de la página y la evaluación de JS (con suerte). –
Esto era lo que me preguntaba. Si por alguna razón puse mi JavaScript en mi etiqueta '
', ¿tendría alguna diferencia en comparación con que lo ponga al principio de una etiqueta ''? – NessDanUsted mencionó tres lugares:
En las etiquetas;
En el HTML; y
En un archivo externo.
Déjame abordar cada uno de esos.
La mejor práctica es tener común Javascript en uno o más archivos externos y cuanto menos archivos mejor, ya que cada archivo JS cargado bloqueará la carga de la página hasta que se cargue ese archivo JS.
La palabra "común" es extremadamente importante. Lo que eso significa es que no desea poner el código de JavaScript específico de la página en ese archivo externo por razones de almacenamiento en caché. Digamos que tienes un sitio con 1000 páginas. Cada página tiene un código JS específico. Eso podría ser 1000 archivos diferentes o un archivo realmente grande que ejecuta una gran cantidad de código innecesario (por ejemplo, buscar ID que no están en esa página en particular, pero están en uno de los 999 otros). Ninguno de estos resultados es bueno.
El primero le da poco impulso de almacenamiento en caché. El segundo puede tener tiempos de carga de página terribles.
Así que lo que debes hacer es poner todas las funciones comunes en un solo archivo JS donde el archivo JS solo contiene funciones. En cada página HTML, llama a las funciones de JS necesarias para esa página.
Idealmente, sus archivos JS también se almacenan en caché de forma efectiva. La mejor práctica es utilizar un encabezado HTTP Expires de mucho futuro y un número de versión para que el archivo JS solo se cargue una vez en cada navegador, sin importar cuántas páginas visiten. Cuando cambia el archivo, cambia el número de versión y fuerza una recarga. Usando -mtime (hora de última modificación del archivo JS) es un esquema común, dando como URL:
<script type="text/javascript" src="/js/script.js?1233454455"></script>
donde se genera automáticamente que -mtime. Su servidor web está configurado para servir archivos JS con un encabezado Expires apropiado.
Así que mezcla los archivos externos y scripts en páginas de (en mi humilde opinión) la mejor manera posible.
El último lugar que mencionó estaba en la etiqueta. Aquí depende un poco de las bibliotecas y frameworks JS que use.Soy un gran admirador de jQuery, que alienta discreto Javascript. Eso significa que (con suerte) no coloque ningún Javascript en su marcado en absoluto. Así que en lugar de:
<a href="#" onclick="doStuff(); return false;">do stuff</a>
haces:
<a href="#" id="dostuff">do stuff</a>
con Javascript:
$(function() {
$("#dostuff").click(doStuff);
});
Quiere decir '$ ('# dostuff'). Haga clic en (doStuff);' basado en su HTML. =) Gracias por una gran descripción! –
@Jeff ¡Lo hago de verdad! Reparado, gracias por eso. – cletus
De hecho, he hecho más trabajo con PHP que con JS y cuando describió al principio, el hecho de mantener funciones importantes en un solo archivo, me recordó cómo organizo mis funciones de PHP, ¡así! Cuando escribo mi código jQuery, nunca está dentro de mis etiquetas. Mi verdadera pregunta era dónde debería guardar mis etiquetas '
Puede aclarar en la etiqueta o en la etiqueta? –
Por "en la etiqueta", quise decir entre las etiquetas '
' y ''. Lo mismo ocurre con ''. – NessDanposible duplicado de http://stackoverflow.com/questions/1013112/where-should-i-declare-javascript-files-used-in-my-page-headhead-or-near – CMS