Quien no se ha encontrado alguna vez que se va añadiendo potencia y dinamismo a las páginas web con diferentes librerías y al final tenemos una página que carga un montón de ficheros que a veces no se utilizan porque el usuario no ha necesitado esa opción en ese momento en concreto.
Y con la aparición hace tiempo de los MastersPages se ha aumentado esta práctica tanto si hablamos de webForms como con MVC.
Pues gracias a JQuery podemos cargar las dependencias o ficheros .js que necesitemos solo cuando realmente se necesite esa funcionalidad de una forma dinámica y no tener que descargar todo al cargar la página.
Solo tendremos que utilizar getScript para cargar un script remoto con una llamada asíncrona “AJAX” y además no tendremos problemas con cross-domain, porque utiliza JsonP para cargar el script entre dominios.
Pero que mejor que un ejemplo para que quede claro el concepto.
Ejemplo:
Imaginaros que tenemos una aplicación con una búsqueda avanzada oculta que utiliza JQuery, un autocomplete y un watermark.
- El botón para mostrar el formulario.
- Se muestra el contenido del formulario al hacer click en el botón
- El autocomplete está disponible
Lo normal sería cargar todos los scripts que necesitamos al cargar la página.
[sourcecode language=»javascript»]
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.watermark.min.js"></script><script type="text/javascript" src="Scripts/JScript.js"></script>
[/sourcecode]
Pero sería mucho más optimo cargar las librerías del watermark y el autocomplete solo cuando se muestra el formulario de búsqueda avanzada. ¿ NO ?
Pues para cargar los script bajo demanda sería:
[sourcecode language=»javascript»]
$(‘#btnBusqueda’).click(function () {
$.getScript("Scripts/jquery-autocomplete.js", function (data, estado) {
if (estado == ‘success’) {
$("#tags").autocomplete({
source: availableTags
});
}
else{
alert("Error al cargar la librería autocomplete");
}
});
$.getScript("Scripts/jquery.watermark.min.js", function (data, estado) {
if (estado == ‘success’) {
$(‘#tags’).watermark(‘Buscar…’);
}
else{
alert("Error al cargar la librería watermark");
}
});
$(‘.busquedaAvanzada’).show();
});
[/sourcecode]
Como se puede comprobar solo se cargan las librerías si el usuario hace click en el botón para ver el formulario de búsqueda, entonces se carga el script y se utiliza una función anónima la cual utiliza dos parámetors con el contenido del script y el estado de la solicitud.
Posibles estados:
- «timeout»
- «error»
- «notmodified»
- «success»
- «parsererror»
Con este sencillo ejemplo podemos ver cómo podemos cargar scripts bajo demanda.