Muchas personas cuando crean una aplicación tiene que preocuparse por el orden de la carga de los módulos y librerias. como jquery, knockout, viewmodel, el model los cuales tiene dependencias entre si.

RequireJS es una implementación de AMD para declarar módulos y estos carguen de forma dinámica, definiendo las dependencias entre ellos y lo requeridos para la ejecucion en su contexto.

El patrón Revealing Module , nos permite tener el codigo mas encapsulado y tener implementaciones mas limpias manteniendo internamente nuestras funciones y atributos y solo exponiendo lo necesario, pero al crear modulos es posible que tengamos dependencias de nuestro codigo el viewmodel, el objeto de knockout etc un ejemplo:

function bootapp()
{
var vm = new uvm.UserViewModel();
vm.init();
ko.applyBindings(vm);
}
return {
init: bootap
};

Para resolver las dependecias de nuestro modulo, utilizare Requirejs en el siguiente ejemplo creare app para consumir una api restfull con Knockout y Requirejs implementando el Revealing Module Pattern,definiendos sus dependecias y definiendos sus modulos.

Para implentar requirejs solo basta con incluir el script en la pagina y en el tag “data-main” especificamos la configuración de requirejs.

<script data-main=”js/config” src=”js/libs/require.js”></script>

require1

Typings (son los ts. de la definición de las librerías jquery y knockout).

Config.js posee la configuracion de requirejs especificando las librerias a mapear, ademas de poder definir un codigo inicial para nuestra aplicacion.

bootapp.js: es inicio de la aplicacionjecutar al inicio de la aplicación.

models: modelos de knockouts, definidos como modulos.

libs: las librerías jquery,knockout y requieres.

db: base de datos en json de ejemplo basada en json-server.

Config.js

En este archivo especificamos la librerías que queremos serán dependencias de nuestra aplicación:

require.config({
 paths: {
 jquery: ‘libs/jquery’, 
 ko: ‘libs/knockout’ 
 }
})

require([“bootapp”],function(app){
 app.init();
})

Define
En vez de exponer nuestros métodos en una variable colocamos nuestro modulo como un parámetro de la función define, la cual hará que nuestro modulo sea accesible desde fuera, a su vez podemos especificarles las dependencias como en este caso UserViewModel, y Knockout (ko).

define([“models/UserViewModel”,”ko”],function(uvm,ko){
function bootapp()
{
var vm = new uvm.UserViewModel();
vm.init();
ko.applyBindings(vm); 
}
return {
init: bootapp
};
});

Require
Con esta función especificamos cuales módulos tenemos dependencias. como este caso que requerimos el modulo bootapp.

require([“bootapp”],function(app){
 app.init();
}

Para ver un ejemplo, puedes bajar el codigo de github https://github.com/danywalls/require-knockout , donde estan los módulos decorados con require y define.
Keep Coding.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *