Cargar scripts bajo demanda con JQuery

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.

<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>

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:

$('#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();
});

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.