Utilizando requireJS

Veamos cómo es posible cargar ficheros de javascript según los necesitemos en nuestro proyecto de forma dinámica. Para ello podemos usar la librería requireJS.

Indicar que es necesario hacer el siguiente taller a través de un servidor HTTP, si no requireJS dará error ya que no podrá realizar su cometido.

Creamos un proyecto con un esquema como el siguiente:

require-1

Vamos a importar a través de requireJS las librerías sumar.js y multiplicar.js que vamos a necesitar desde el index. El contenido de estos scripts es:


sumar.js:
function sumar(arg1, arg2){
    return arg1 + arg2;
}

multiplicar.js:
function multiplicar (arg1, arg2) {
    return arg1 * arg2;
}

 

Haremos uso de estas interesantes librerías desde app.js pero en un principo, en el index.html, sólo tenemos importados los scripts de require.js y app.js.

require-3

require.js nos proporciona dos funciones en las que está la clave de todo:

  • define(nombreModulo, modulosRequeridos, definiciónModulo)
  • require(modulosRequeridos, definiciónModulo)

En este caso vamos a ir a lo más sencillo de uso de require.js y sólo vamos a ver la utilización del método require(). Dejo para otro taller el uso de define().

Desde app.js será necesario requerir tanto sumar.js como multiplicar.js. Esto se hace de la siguiente manera (muy al estilo de AngularJS):


app.js:
require([ "js/sumar.js", "js/multiplicar.js" ], function(){
    alert( sumar(5,10) );
    alert( multiplicar(5,10) );
});

Una vez dentro del callback de require() ya podemos disponer de sumar.js y multiplicar.js tal y como si estuvieran importadas.

De esta forma, que es la forma más sencilla de usar requireJS, podemos ahorrarnos el tener que ir con una armadura de scripts constantemente a todas las páginas web que se visiten.

Aquí vemos desde las devtools de Chrome que realmente sumar.js y multiplicar.js se han cargado posteriormente.

require-2

Utilizando requireJS

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s