Hace ya tiempo vimos como construir una aplicación javascript fácilmente escalable basado en una presentación de Nicholas C.Zackas. Una forma de modularizar nuestro código Javascript con la intención de separar competencias haciendo que nuestro código no sea dependiente de otro.
En el código que vimos, además encapsulábamos todos los métodos de los módulos en un gestor de errores básico que se encargaba de evitar que un error en uno de los módulos provocara que la aplicación dejara de funcionar.
...
for (name in instance){
method = instance[name];
if (typeof method == "function") {
instance[name] = function(name, method) {
return function(){
try { return method.apply(this, arguments);}
catch(ex) { console.log("[Error]" + name + "(): " + ex.message); }
}
}(name, method);
}
}
...
Programación orientada a aspecto
Por otro lado, hace todavía más tiempo, vimos una implementación de los filtros de WordPress en Javascript. Una forma de acercar la programación orientada a aspectos al lado del cliente.
La programación orientada a aspectos, no es más que un paradigma de programación que nos ayuda modularizar nuestra aplicación de una forma controlada, permitiendo extenderla desde fuera sin alterar el funcionamiento principal de la misma. O lo que es lo mismo, poder desarrollar plugins que modifiquen el funcionamiento principal.
Uniendo conceptos
Uniendo conceptos podríamos disponer de la capacidad de crear aplicaciones escalables gestionadas por un objeto encargado de arrancar y/o parar módulos, con una batería de herramientas disponibles en estos módulos capaces de hacernos disfrutar de las ventajas de la programación orientada a aspectos.
Veamos el código completo:
var debug = false;
var Sandbox = function() {
var listeners = {};
return {
add: function(name, func){
if (typeof listeners == 'undefined') return;
if (typeof listeners[name] == 'undefined') listeners[name] = new Array();
listeners[name].push(func);
},
remove: function(name, func){
if (typeof listeners[name] == 'undefined') return;
var j = 0;
while (j < listeners[name].length) {
if (listeners[name][j] == func) { listeners[name].splice(j, 1);}
else { j++; }
}
},
fire: function(name, args){
if (typeof listeners == 'undefined' || (!listeners[name] || typeof listeners[name] == 'undefined')) return;
for (var x=0; x<listeners[name].length; x++)
listeners[name][x].call(this, args);
}
};
};
var Core = function(){
var modules = {}, sandbox = new Sandbox(this);
function createInstance(moduleID){
var instance = modules[moduleID].creator(sandbox),name, method;
if (!debug) {
for (name in instance){
method = instance[name];
if (typeof method == "function") {
instance[name] = function(name, method) {
var evname = moduleID + ":" + name;
return function(){
try {
sandbox.fire("pre-" + evname, arguments);
salida = method.apply(this, arguments);
sandbox.fire("post-" + evname, salida);
return salida;
}
catch(ex) {
if (typeof instance["onerror"] == 'function') instance["onerror"].apply(this, [ex]);
console.log("[Error]" + name + "(): " + ex.message);
}
}
}(name, method);
}
}
}
return instance;
}
// Método públicos
return {
register: function(moduleID, creator) {
modules[moduleID] = {
creator: creator,
instance: null
};
},
start: function(moduleID) {
modules[moduleID].instance = createInstance(moduleID);
modules[moduleID].instance.init();
},
stop: function(moduleID){
var data = modules[moduleID];
if (data.instance) {
data.instance.destroy();
data.instance = null;
}
},
startAll: function(){
for (var moduleID in modules) {
if (modules.hasOwnProperty(moduleID)) {
this.start(moduleID);
}
}
},
stopAll: function() {
for (var moduleID in modules) {
if (modules.hasOwnProperty(moduleID)) {
this.stop(moduleID);
}
}
}
};
}();
¿Que nos ofrece?
He modificado el script para añadir 2 puntos de enlace predeterminados a todos los métodos de los módulos, «pre-XXX» y «post-XXX». Lo que nos permite definir funcionalidades que se ejecutarán antes y después de la ejecución del módulo. Veamos un ejemplo:
Core.register("test", function($s){
return {
init: function(){
console.log("Constructor");
},
destroy: function(){
console.log("Destroy");
},
onerror: function(ex){
alert("Error: " + ex);
}
}
});
Core.register("test2", function($s){
return {
init: function(){
// Añadimos el evento al contructor del módulo "test"
$s.add("pre-test:init", function(){
console.log("Bla bla");
});
console.log("Constructor 2");
},
destroy: function(){
console.log("Destroy 2");
},
onerror: function(ex){
alert("Error: " + ex);
}
}
});
// Cargamos los módulos
Core.start("test2");
Core.start("test");
// Resultado
// --> Constructor 2
// --> Bla bla
// --> Constructo
Eventos personalizados
Al igual que los eventos por defecto de los que disponemos, podemos especificar eventos propios en nuestro módulos mediante el uso de Sandbox.fire(), que se encargará de ejecutar el contenido asociado al evento especificado.
Core.register("test3", function($s){
return {
init: function(){
console.log("Constructor 2");
// Ejecutamos el evento "mievento"
$s.fire("mievento", this);
},
destroy: function(){
console.log("Destroy 2");
},
onerror: function(ex){
alert("Error: " + ex);
}
}
});
Como podemos ver, nos permitirá crear aplicaciones escalables y fácilmente extensibles mediante módulos que a su vez serán interoperables entre ellos mediante la programación orientada a aspectos.
