¿Cuál es la opinión general del desarrollador sobre la inclusión del código JavaScript en el archivo en lugar de incluirlo en la etiqueta del script?

Entonces, todos estamos de acuerdo en que jquery debe incluirse con un archivo de script, como a continuación:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
         type="text/javascript"></script>

Mi pregunta es, para obtener funciones en una página que no está en todas las páginas de un sitio. ¿Incluimos las funciones como a continuación en la misma página o en un archivo de inclusión global como arriba llamado mysite.js?

$(document).ready(function(){
$(".clickme").click(function(event){
  alert("Thanks for visiting!");
 });
});

Okay. Entonces la pregunta es: si el código anterior se llamará en cada clase = "clickme" en páginas específicas, y tiene la capacidad de llamarlo desde un archivo de inclusión separado llamado mysite.js o en el contenido del página. ¿En qué dirección irás?


Los argumentos son:

  • Si lo incluye en la página, solo lo llamará desde aquellas páginas específicas donde se necesita la funcionalidad js.

  • O puede incluirlo como un archivo, que el navegador almacenó en caché, pero luego jquery tendrá que gastar x ms para saber que esa función no se activa en una página sin la clase "clickme".


EDITAR 1: Ok. Un punto que quiero asegurarme de que las personas aborden es cuál es el efecto de tener la función document.ready llamada cosas que no existen en la página, ¿desencadenará algún tipo de retraso en el navegador? ¿Es eso un impacto significativo?

4
Geo 6 oct. 2009 a las 23:53

4 respuestas

La mejor respuesta

En primer lugar, $("#clickme") encontrará id = "clickme" no class = "clickme". Te gustaría $(".clickme") si estabas buscando clases.

(Intento) nunca poner ningún código JavaScript real dentro de mis documentos XHTML, a menos que esté trabajando en probar algo en una página rápidamente. Siempre enlace a un archivo JS externo para cargar la funcionalidad que quiero. Los navegadores sin JS (como los rastreadores web) no cargarán estos archivos, y esto hace que su código se vea mucho más limpio para la "fuente de visualización".

Si necesito un poco de funcionalidad solo en una página, a veces obtiene su propio archivo de inclusión. Todo depende de la cantidad de funcionalidad / selectores lentos que use. El hecho de que coloque su JS en un archivo JS externo no significa que deba incluirlo en cada página.

La razón principal por la que uso esta práctica: si necesito cambiar algún código JavaScript, todo estará en el mismo lugar y cambiará en todo el sitio.

En cuanto a la pregunta sobre el rendimiento, algunos selectores toman mucho tiempo, pero la mayoría de ellos (especialmente aquellos que se ocupan de la identificación) son muy rápidos. Buscar un selector que no existe es una pérdida de tiempo, pero cuando lo compara con el tiempo perdido de una segunda solicitud HTTP de script (que bloquea el DOM de estar listo por cierto), la búsqueda de un selector vacío generalmente ganará como el menor de los dos males. jQuery 1.3 Performace Notes y SlickSpeed con suerte lo ayudará a decidir cuántos MS realmente está perdiendo al buscar una clase.

3
gnarf 6 oct. 2009 a las 21:13

Acepté nunca tener código en su página HTML. En ASP.net programáticamente he agregado una verificación para cada página para ver si tiene un archivo javascript del mismo nombre.

P.ej. MyPage.aspx buscará un MyPage.aspx.js

Para mi página maestra MVC, tengo este código para agregar un enlace de JavaScript:

        // Add Each page's javascript file
        if (Page.ViewContext.View is WebFormView)
        {
            WebFormView view = Page.ViewContext.View as WebFormView;
            string shortUrl = view.ViewPath + ".js";
            if (File.Exists(Server.MapPath(shortUrl)))
            {
                _clientScriptIncludes["PageJavascript"] = Page.ResolveUrl(shortUrl);
            }
        }

Esto funciona bien porque:

  • Se incluye automáticamente en mis archivos
  • El archivo .js vive junto a la página misma

Lo sentimos si esto no se aplica a su idioma / estilo de codificación.

0
dano 6 oct. 2009 a las 20:18

Mi preferencia personal es

  • funciones, complementos y utilidades completamente globales - en un archivo JavaScript separado y referenciado en cada página (al igual que el archivo jQuery)

  • funcionalidad de página específica : en un archivo JavaScript separado y solo referenciado en la página para la que se necesita

Recuerde que también puede minificar y comprimir los archivos también.

Soy un firme creyente de Unobtrusive JavaScript y, por lo tanto, trato de evitar tener ningún código JavaScript con el marcado, incluso si JavaScript está en su propio bloque de script.

1
Russ Cam 6 oct. 2009 a las 20:04

Tiendo a usar un archivo externo, por lo que si se necesita un cambio, se realiza en un solo lugar para todas las páginas, en lugar de x cambios en x páginas.

Además, si abandona el proyecto y alguien más tiene que hacerse cargo, puede ser una gran molestia explorar el proyecto tratando de encontrar algunos js en línea.

1
Colin 6 oct. 2009 a las 20:03