Los beneficios de jQuery en el desarrollo de sitios Web es innegable, marcó un antes y un después en el desarrollo web.
Los desarrolladores web utilizan JavaScript todos los días para llevar la funcionalidad necesaria a los sitios web que crean. Una herramienta en particular que proporciona una gran cantidad de potencia y flexibilidad es jQuery.
Consideremos un ejemplo de cómo se puede usar JavaScript para hacer que un sitio web sea interactivo: un botón que, al hacer clic en él, muestra u oculta un menú. Hay varias maneras de lograr esto, así que vamos a comparar algunas de ellas:
En primer lugar, JavaScript “inline” es exactamente lo que parece; poner código JavaScript en el documento HTML, directamente en el elemento que desea que desencadene una acción (en este caso, añadiendo un atributo “on-click” en el elemento de botón). En segundo lugar, podríamos mover ese código JavaScript a un archivo externo y adjuntar un “escuchador de eventos” al botón. Finalmente, podríamos usar jQuery para `encontrar’ el elemento botón y añadir un método `click’.
Para ilustrar las diferencias entre estas varias opciones sin profundizar en el código, consideremos algunos pros y contras de cada enfoque:
JavaScript en línea
Con JavaScript en línea, el código se “cuece” directamente en el HTML, lo que inmediatamente presenta algunos problemas, especialmente porque viola el principio de Separación de Preocupaciones, o SoC. Esta es la idea de que su HTML (contenido), CSS (estilo) y JavaScript (comportamiento) no deben ser mezclados. En un sentido práctico, el SoC ayuda a evitar problemas cuando hacer un cambio en una “preocupación” afecta negativamente a otros. Por ejemplo, nuestro código podría romperse fácilmente si cambiáramos la estructura HTML de la página o quisiéramos añadir un segundo botón.
Escuchador de eventos
Mover nuestro JavaScript a un archivo externo y adjuntar un oyente de eventos al botón nos permite separar nuestras preocupaciones, pero ahora necesitamos una forma de decirle a la función JavaScript qué elemento hay que ver para los clics (el botón), y cuál hay que cambiar (el menú). Asignar atributos de ID a cada elemento, y luego hacer referencia a aquellos en el JavaScript, es la manera más fácil y confiable de hacerlo, pero hay un par de desventajas con este enfoque.
En primer lugar, este enfoque asume que somos capaces de asignar manualmente IDs a cada elemento que vamos a “tocar” con JavaScript (lo que puede ser problemático si usamos un CMS), y que esos IDs nunca cambiarán. Además, los IDs tienen que ser únicos y no repetirse en una página, por lo que tener múltiples instancias de la misma funcionalidad puede volverse complejo muy rápidamente. Finalmente, cada navegador implementa las cosas de manera un poco diferente, por lo que la compatibilidad entre navegadores es una preocupación importante que aumentará la complejidad del código (como un ejemplo rápido, los métodos para añadir oyentes de eventos, como los clics del ratón, cambiaron entre Internet Explorer 8 y 9, por lo que ambos métodos tendrían que ser incluidos para que funcionen las mismas funcionalidades, sólo que en dos versiones diferentes del mismo navegador).
jQuery
Al considerar las preocupaciones de los dos métodos anteriores, la utilidad de jQuery se hace evidente. Trabajando entre bastidores, jQuery hace todo el trabajo pesado requerido para hacer que la búsqueda de elementos HTML sea simple, y para ocuparse de los problemas de compatibilidad entre navegadores. Todo lo que tenemos que hacer es escribir algo como:
Es posible usar atributos ID con jQuery, pero también puede usar clases (o incluso selectores como “:first” o “:hidden”) para encontrar elementos, y luego simplemente usar el método “click” para adjuntar un escuchador de eventos que responda a que el usuario haga clic (o toque) en el botón, y el método “toggle” para mostrar y ocultar el menú cuando se hace clic en el botón.
También, en este ejemplo, podríamos añadir otro botón en la página simplemente añadiendo otro elemento dentro de la clase “botón”, y el selector jQuery $(‘.button’) encontraría y adjuntaría el método de clic automáticamente. Si alguna vez necesitamos cambiar los elementos que se utilizan, el código está disponible para actualizar todo en un solo lugar.
Este es sólo un pequeño y simple ejemplo, pero las ventajas de este método son claras. jQuery proporciona un desarrollo mucho más rápido y produce código que funciona en un rango más amplio de navegadores. Hay una sobrecarga adicional, porque la librería jQuery tiene que ser descargada y analizada, y el uso de JavaScript en bruto puede llevar a un mejor rendimiento para algunas operaciones, pero en general, los beneficios de jQuery superan ampliamente los inconvenientes. Esta es la razón por la que jQuery es utilizado por la mayoría de los sitios web.