jQuery Blues: 2. La librería

Tutorial de jQuery 2. Veremos cómo conviene cargar la librería de jQuery, si desde un CDN o desde el propio server, y cómo declararla en modo no conflict.

klimt

archivado en: JavaScript / 24 octubre, 2012 / taller:

Incluir jQuery en un sitio web

jQuery es una biblioteca, un conjunto de subprogramas, de JavaScript, por lo que antes que nada se debe incluir en la página web, para lo cual hay dos posibilidades:

a) Subir al propio servidor la última versión, minificada, de jQuery y luego enlazarla:

<html>

<head>

<script type="text/javascript" src="js/jquery.min.js"></script>

...

</html>

Para descargarse jQuery lo mejor es ir a la página oficial: http://jquery.com. Ahí se ofrecen dos versiones:

  • Production: que es una versión comprimida de 32kb.
  • Development: de 252kb.

La que se sube al server es la production, pero en local, para trastear con el código, se puede usar la versión development.

b) Y la segunda manera es enlazando la biblioteca desde un CDN («Content Delivery Network»), una red distribuida de contenidos, que es como funciona por ejemplo Google o Amazon CloudFront.

<html>

<head>

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

...

</html>

Como explica Carlos Benítez en Cargar jQuery desde un CDN o desde servidor, la forma más recomendable es incluir la librería desde Google, ya que así se puede aprovechar la caché del cliente:

«Aquí está la clave y la verdadera justificación al uso de un CDN. Cuando navegamos por la red, cada vez que entramos en una página, el navegador descarga todos los archivos dependientes: hojas de estilo CSS, Javascript, etc. y los guarda en memoria para recurrir a ellos en futuras visitas. Esto quiere decir que, a lo largo del día, nuestro navegador se llena de versiones de jQuery, cada una correspondiente a aquellas páginas (sites) por las que vamos pasando. Esto es así porque, cada vez que la petición se realiza a un servidor nuevo, el navegador entiende que se trata de un archivo distinto aunque tenga el mismo nombre y peso que otro ya almacenado.

»Resulta lógico: pensemos cuántas páginas tienen un fichero style.css, o un init.js por ejemplo; puede darse la circunstancia de que dos o varios de ellos tengan incluso el mismo tamaño aún siendo completamente diferentes. Frente a esa posibilidad, el navegador opta por descargarlo y guardarlo. Esto mismo ocurre con jQuery. Sin embargo, cuando usamos un CDN, los servicios que sirven la biblioteca son limitados: puede ser Google, Microsoft, Amazon, etc… y esto quiere decir que podemos aprovechar la versión cacheada que haya generado alguna otra página por la que hayamos navegado sin tener que volver a descargarlo».

Pero mejor aún que enlazarlo desde Google, añade Carlos Benítez, es decirle al navegador que primero intente cargar la biblioteca desde el CDN y, en caso de que no haya podido por la razón que sea —aunque supongo que el día que se caiga Google comenzará el apocalipsis maya—, la cargue desde el server. Algo así:

 

<!-- Primero se intenta desde Google y si falla, usa la llamada a la librería alojada en el propio host -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/{{JQUERY_VERSION}}/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>

Declarar jQuery

Una vez cargada la biblioteca, se puede empezar a trabajar con jQuery declarando el código entre los tags <script></script>, al igual que en JavaScript.

Pero, además, es muy recomendable decirle al navegador que no comience a ejecutar el código jQuery hasta que no se haya cargado el esqueleto del página, es decir, todos los nodos que dependen del nodo document, por lo que también se incluyen todas las sentencias dentro de la declaración  $(document).ready().

<script type="text/javascript">

$(document).ready(function() {

// el código aquí

});

</script>

Aunque también se puede hacer de forma abreviada:

<script type="text/javascript">

$(function() {

// el código aquí

});

</script>

Ya casi está todo listo para que programemos un primer script en jQuery. Solo un detalle más. El símbolo $ es un comodín para referirse a jQuery y puede entrar en conflicto cuando se combina esta librería con otras, como ocurre con frecuencia en WordPress, por lo que en ocasiones conviene utilizar una técnica denominada non conflict.

Primero se declara la función $.noConflict(); y luego ya se escribe jQuery en lugar de $. Algo así:

<script>

$.noConflict();

jQuery(document).ready(function($) {

// el código aquí

});

</script>

Hay otras dos formas de trabajar en modo no conflicto, pero son más complicadas, por lo que me limito a enumerarlas:

a) Creando un alias, por ejemplo «j», que reemplace la expresión jQuery:

var j = jQuery.noConflict();

j("div p").hide();

b) Emplear un namespace

var mivariable = {};

mivariable.query = jQuery.noConflict(true);

|| Tags: , ,

valoración de los lectores sobre jQuery Blues: 2. La librería

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.5 sobre 5 (19 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “jQuery Blues: 2. La librería