Incluir ficheros JavaScript bajo demanda

Por Juan Carlos Mosqueda, @juan_mosqueda

Dentro de la programación Web es muy frecuente desarrollar una estructura modular compuesta por varios ficheros que vamos llamando según los necesitemos. Por ejemplo, todos conocemos  los includes o requires en PHP que nos permiten incluir ficheros dentro de otros. Esta técnica es especialmente útil en el marcado HTML para separar elementos comunes de las páginas como un header o un footer en archivos independientes que sólo hay que llamar cuando se necesiten.

Sin embargo, pese a que la mayoría de lenguajes incorporan de uno u otro modo esta funcionalidad (la de llamar e incluir otros archivos dentro de él mismo), JavaScript no la presenta de forma nativa. Es por ello que existen numerosas bibliotecas que expanden al lenguaje permitiendo estas inclusiones con un alto grado de control.

NOTA: Actualmente, gracias a la granularidad de los plugins en jQuery y a los patrones de expansión de módulos ya no resulta tan frecuente encontrar el getScript() como lo era en el pasado.

Si no queremos que nuestro código presente dependencias de terceros o simplemente queremos el control de nuestro propio codigo, podemos implementar nuestra propia función para añadir ficheros JavaScript a una página bajo demanda emulando la funcionalidad de estas bibliotecas o los comandos de otros lenguajes.

function CargaScript(url, callback) {
  var script = document.createElement('script');
 
  if (script.readyState) { // Internet Explorer
    script.onreadystatechange = function () {
      if (script.readyState === 'loaded' || script.readyState === 'complete') {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else { // Otros Navegadores
    script.onload = function() {
      callback();
    };
  }
 
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}

Sólo tenemos que hacer la distición entre el “famoso” Internet Explorer y los demás navegadores.

El funcionamiento de este código es añadir de forma dinámica una nueva etiqueta script a la cabecera de nuestra página (head) con la dirección URL del recurso a cargar. De forma adicional, incluimos un callback al estilo jQuery que se ejecutará tan pronto como nuestro nuevo script esté disponible.

NOTA: Por otro lado, si a ti te gusta hacer la carga asincrona de tus script, es decir, poner al último el llamado de tus scripts, lo único que tienes que hacer es cambiar el Tag ‘head’ por ‘body’.

EJEMPLO DE USO

Para un ejemplo sencillo, cargaremos la biblioteca del jQuery ubicada en un CDN.

var myLibrary = 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js';
 
loadScript(myLibrary, function(){
  alert('Ha cargado JQuery!');
});

Si ejecutamos el código anterior, en cuanto el script se cargue y esté disponible, recibiremos el alert definido en el callback avisando que se ha cargado correctamente.