Buenas,
Estos días, para practicar un poco con los conocimientos de Javascript que he ido aprendiendo, he creado una clase DOMAutomat que va modificando elementos del DOM a ciertos intervalos de tiempo y en función de un objeto que contiene las instrucciones. Dicho objeto representa unas instrucciones similares al ensamblador por tener saltos condicionales e incondicionales. Luego he creado otra clase Compiler que a través de llamadas a métodos, va construyendo el objeto que luego recibirá DOMAutomat. Y ahí viene el problema. Para que esos métodos sean sugerentes con lo que hacen les he dado nombres como
while,
if o
else que son palabras clave. Aquí dejo el código de interés:
Código Javascript
:
Ver originalcc
.var({
'$cells' : cells ,
'$i' : 0 ,
'$j' : undefined,
'$prev' : undefined,
'$cur' : undefined,
'$flag' : true ,
'$bgClass': 'bg-red'
})
.action([
// accion nula
])
.while( "$i < 4" )
.calc( "$j = 0" )
.while( "$j < 4" )
.calc( "$cur = $cells[$i][$j]" )
.if( "$flag" )
.action( [
["$prev", removeClass, ["$bgClass"] ],
["$cur" , addClass , ["$bgClass"] ]
])
.if( "$cur.classList.contains('bg-blue')" )
.action([
["$cur", removeClass, ["$bgClass"] ]
])
.calc(
"$bgClass = $bgClass === 'bg-red' ? 'bg-green' : 'bg-red';" +
"$flag = false;"
)
.action([
["$cur", addClass, ["$bgClass"] ]
])
.end()
.calc( "$prev = $cur" )
.else()
.calc( "$flag = true" )
.end()
.calc( "++$j" )
.end()
.calc( "++$i" )
.end()
.action([
["$prev", removeClass, ["$bgClass"] ]
]);
console.log( cc.code );
// crea un autamata que ejecuta una acción cada segundo
var domAutomat = new DOMAutomat(1000);
// asigna el codigo al automata
domAutomat.setCode( cc.code );
// pone en ejecución el automata
domAutomat.run();
Y aquí el enlace con todo el código y el resultado:
http://jsfiddle.net/jefebrondem/ny7Ky/
Tengo dos dudas. La principal es si sobrescribir métodos con palabras clave lo soporta el estándar. Pues, por ejemplo, a mi chrome me lo permite pero puedo asegurar que cualquier navegador que siga el estándar me lo permitirá. No he encontrado información al respecto.
La otra duda es más de diseño, yo en este caso me he visto inevitablemente forzado a usar el constructor Function para ganar en expresividad. Antes de usar el constructor Function el código con while's e if's lo simulaba con un objeto literal quedando algo de este estilo:
Código Javascript
:
Ver originalvar code = [
{ 'var' : {
'i' : 0 ,
'j' : undefined,
'prev' : undefined,
'cur' : undefined,
'flag' : true ,
'bgClass': 'bg-red'
}},
{ 'action': function() { return [
//acción nula
]}},
{ 'while': [ function(){ return this.i < 4; },
function(){
this.j = 0;
},
{ 'while' : [ function(){ return this.j < 4; },
function(){
this.cur = cells[this.i][this.j];
},
{ 'if': [ function(){ return this.flag; },
{ 'action': function() { return [
[this.prev, removeClass, [this.bgClass] ],
[this.cur , addClass , [this.bgClass] ]
]}},
{ 'if': [ function(){ return this.cur.classList.contains('bg-blue'); },
{ 'action': function() { return [
[this.cur, removeClass, [this.bgClass] ],
]}},
function(){
this.bgClass = this.bgClass === 'bg-red' ? 'bg-green' : 'bg-red';
this.flag = false;
},
{ 'action': function() { return [
[this.cur, addClass, [this.bgClass] ],
]}},
]},
function(){
this.prev = this.cur;
}
],'else': [
function(){
this.flag = true;
}
]},
function(){
++this.j;
},
]},
function(){
++this.i;
}
]},
{ 'action': function() { return [
[this.prev, removeClass, [this.bgClass] ]
]}}
]
De esta manera no he usado el constructor Function, pero el código es más dicifil de escribir y, con ello, más propenso a escribirlo mal.
¿Alguien sabría de alguna manera más simple de representación sin tener que echar mano al contructor Function o a eval?
Un saludo y gracias.