jueves, 9 de octubre de 2014

Trabajando con Múltiples Instancias de jQuery

 

clip_image002Algunos tipos de Aplicaciones Web modernas, como las que están desarrolladas en SharePoint, ofrecen características modulares, en donde cada componente de la misma debe poder funcionar de forma autónoma y a la vez integrada al resto; con lo cual si utilizamos jQuery como parte de nuestra arquitectura, debemos considerar el escenario de tener o prever múltiples instancias de dicha biblioteca en una misma Página Web para evitar errores.

jQuery, junto a jQueryUI, son dos de las bibliotecas más utilizadas en los desarrollos de Aplicaciones Web modernas, sin lugar a dudas, debido a los múltiples beneficios que ofrecen, entre ellos: la posibilidad de desarrollar mejores aplicaciones, con un menor esfuerzo, más usables, con una mejor respuesta de cara al usuario, permitiendo integrar miles de plugins y bibliotecas desarrolladas por terceros, resolviendo la compatibilidad Cross-Browser, entre otros.

Para explicar cómo trabajar con múltiples instancias de jQuery, vamos a tomar como ejemplo el desarrollo de un Sitio SharePoint, con varias WebParts que deben poder funcionar tanto en nuestro sitio, como en otros sitios de la compañía; es decir, deben poder funcionar independientemente de la página y del resto de las WebParts.

Trabajar con Múltiples Instancias de jQuery

El primer caso a mostrar es cómo trabajar con dos o más instancias de jQuery, de forma de evitar sobrescribir las instancias previas de esta biblioteca que hayan sido cargadas por la Página Web u otra WebPart que se haya cargado en la misma página.

Esto es deseable cuando queremos que nuestra WebPart funcione independientemente de la versión de jQuery que se haya incluido en la página (por ejemplo, si necesitamos una versión más reciente de la que se provee por defecto).

Para ello, lo que vamos a hacer es incluir en la misma WebPart nuestra propia referencia a la versión de jQuery que deseamos utilizar, y vamos a inicializarla utilizando el operador $.noConflict(true), tal como se muestra a continuación:

<!-- Cargar jQuery 1.9.1 -->

<script type="text/javascript" src="Scripts/jQuery/jquery-1.9.1.js"></script>

<script type="text/javascript">

var $_191 = $.noConflict(true);

</script>

<!-- Usando la Versión 1.9.1 de jQuery -->

<script type="text/javascript">

$_191('#selector').function();

</script>

De esta forma, vamos a poder utilizar la instancia $_191 en vez de la instancia $, que en nuestro ejemplo se corresponde con esta versión específica de jQuery. Si deseáramos poder acceder a la instancia cargada por defecto, siempre podremos usar el operador $.

Además, como puede apreciarse, al no sobrescribir la instancia por defecto, el resto de la página seguirá funcionando como si la nueva instancia jamás se hubiera cargado, ya que trabajará de forma aislada. Para terminar de comprender esto último, veamos el siguiente ejemplo:

<!-- Cargar jQuery 1.8.3 [Por Defecto de la Página] -->

<script type="text/javascript" src="Scripts/jQuery/jquery-1.8.3.js"></script>

<!-- Cargar jQuery 1.9.1 -->

<script type="text/javascript" src="Scripts/jQuery/jquery-1.9.1.js"></script>

<script type="text/javascript">

var $_191 = $.noConflict(true);

</script>

<!-- Usando la Versión 1.8.3 de jQuery [Por Defecto de la Página] -->

<script type="text/javascript">

$('#selector').function();

</script>

<!-- Usando la Versión 1.9.1 de jQuery -->

<script type="text/javascript">

$_191('#selector').function();

</script>

Trabajar con una Única Instancia de jQuery

Por otro lado, puede suceder que con tener una única instancia de jQuery sea suficiente, con lo cual se nos plantea la necesidad de validar si ya ha sido previamente cargada o no.

Una buena práctica para lograr tener una mejor performance en nuestra Aplicación Web es no volver a cargar componentes que ya han sido cargados previamente, es decir, si ya existe una instancia de jQuery, no deberemos volver a cargar el .js correspondiente. Si bien los Browsers modernos detectan estos casos y no ejecutan el Request, igualmente consumimos recursos que podrían aprovecharse para otra cosa.

Además, en el caso de ejemplo, si volvemos a cargar la biblioteca jQuery, podríamos sobrescribir la versión específica que cargó la página, pudiendo generar errores en el resto de los scripts de la misma o de los componentes que cargue la página.

Para cargar la biblioteca jQuery sólo si ésta no ha sido cargada previamente, deberemos utilizar la siguiente condición:

<script type="text/javascript">

if (!window.jQuery) {

document.write('<script type="text/javascript" src="Scripts/jQuery/jquery-1.8.3.min.js"></' + 'script>');

}

</script>

Como podemos apreciar, se verifica mediante un if que no exista la instancia por defecto de jQuery, en cuyo caso generamos un tag <script> que permita referenciar el .js en cuestión. Si ya existiera la instancia, el tag no se generaría, y por lo tanto el Browser no intentaría cargar nuevamente la biblioteca.

De esta forma, podemos cubrir los dos escenarios posibles, cargar una instancia propia de jQuery, o reutilizar una cargada previamente. Cuándo utilizar un esquema o el otro, dependerá de las necesidades de cada proyecto y puntualmente de cada funcionalidad que debamos implementar.

Ing. Ariel Martín Bensussán

.Net Practice Manager

 

¡Gracias por tu contribución Ariel Bensussán!