serializar objetos (para ponerlos como atributos HTML)

derkenuke · #1 (**permalink**) 08/09/2005, 21:09

He hecho pruebas y tanto en IE como en FF como en Opera puedo inventarme atributos dinamicamente y asignarles la propiedad que yo quiera, y despues acceder a ellos por DOM y leer su valor. Por lo menos lo he probado con DIVs y funciona.

La duda es: Yo quiero guardar una cadena, y funciona; quiero guardar un numero, y funciona (lo paso a string); quiero guardar un array, y me las apaño con un join(",") para pasarlo a cadena, y funciona. Incluso yendo mas lejos, puedo guardarme una funcion entera:

Código PHP:

  <div id="capa">assss</div>

 
 
<script>

 
var capa=document.getElementById("capa");

function cualquiera(q) {

    alert(q);

}

capa.setAttribute("funcion_cualquiera",cualquiera);

 
alert(capa.getAttribute("funcion_cualquiera"));

 
 
</script>

Y funciona. Incluso podriamos ejecutar esa funcion, que esta en forma de string (hace poco preguntaba sobre ello, y no obtuve respuesta, pero ya lo he visto solucionado por medio de la intuicion):

Código PHP:

  eval(capa.getAttribute("funcion_cualquiera"))("hola que tal");

Lamentablemente esto en FF no produce efecto, y en Opera es todavia peor, devuelve un error:

Cita:

Error:
name: TypeError
message: Statement on line 9: Type mismatch (usually a non-object value used where an object is required)
Backtrace:
Line 9 of inline#2 script in file://localhost/C:/Documents%20and%20Settings/derkenuke/Escritorio/guardar_atr.htm
eval(capa.getAttribute("funcion_cualquiera"))("hol a que tal");

Si alguien pudiera decirme como intentar correr eso en ambos navegadores...

Pero bueno eso no es la duda que me concierne. Si estoy aqui posteando es para guardar Objetos, ni funciones ni arrays. Creo que a esto en otros lenguajes se le llama serializar objetos, convertirlos a strings codificados que contienen toda su informacion.

¿alguien me diria como hacerlo?

Creo que estoy sobrepasando los limites del javascript...

caricatos · #2 (**permalink**) 09/09/2005, 03:39

Hola derkenuke:

¡Siempre preguntando cosas raras1... ¡Je, je

!

Bueno, sobre aquello que preguntaste y te apañaste para hacerlo, es una pena que no haya visto la pregunta porque te daría la respuesta...

Como las variables globales y las funciones cuelgan del objeto window, podrías haber usado:

window["funcion_cualquiera"]();

y si cuelgan de un elemento sería:

capa["funcion_cualquiera"]();

Saludos

flaviovich · #3 (**permalink**) 09/09/2005, 07:13

Disculpen que me desvie del tema, pero quisiera saber si hay algun compilador de javascript. Ya que he visto me muchos comentan que les sale error, como a derkenukeю
Yo uso IE y FF, pero en ninguno de los dos me sale algun mensaje de error. Solo en IE cuando hay algun error, en la parte inferior izquierda, muestra un icono amarillo y nada mas.

JavierB · #4 (**permalink**) 09/09/2005, 07:35

Hola flaviovich

En Firefox tienes el menú Herramientas->Consola JavaScript. Ahí te salen todos los errores.

Saludos,

caricatos · #5 (**permalink**) 09/09/2005, 08:40

Cita:

Iniciado por JavierB

Hola flaviovich

En Firefox tienes el menú Herramientas->Consola JavaScript. Ahí te salen todos los errores.

Saludos,

o escribiendo directamente en la barra de direcciones "javascript:"

Saludos

derkenuke · #6 (**permalink**) 09/09/2005, 09:04

Cita:

Iniciado por caricatos

¡Siempre preguntando cosas raras1... ¡Je, je !

Ya ves, será que las cosas normales se me han acabado ya? jeje. También me doy cuenta de ello, también.

Cita:

Iniciado por flaviovich

si hay algun compilador de javascript.

Pues FF tiene un Javascript Debugger, que estuve investigando como funcionaba, pero bueno, al final no me salio nada y sigo con mi Opera.

Cita:

Iniciado por caricatos

Bueno, sobre aquello que preguntaste y te apañaste para hacerlo, es una pena que no haya visto la pregunta porque te daría la respuesta...

Igual estarias de vacaciones... el foro estaba muy vacio esas épocas. El hilo en concreto es este, quizas lo puedas responder porque todavia tengo la duda...
http://www.forosdelweb.com/f13/funcion-que-ejecute-otra-pasada-por-parametro-327122/

Recordemos que la funcion esta en un atributo de un DIV. Esto:

Código PHP:

  var capa=document.getElementById("capa");

function cualquiera(q) {

    alert(q);

}

capa.setAttribute("funcion_cualquiera",cualquiera);

 
capa.getAttribute("funcion_cualquiera")("hola");

Solo me ha funcionado en IE. Si la ultima linea fuese:

Código PHP:

  capa["funcion_cualquiera"]("hola");

Me devuelve que capa["funcion_cualquiera"] no es una funcion (en Opera y en FF, en IE si que funciona).

Así que bueno, para guardar funciones en atributos, y luego ejecutarlas no lo he logrado. Para guardar objetos... menos..

Saludos a todos y gracias por responder!

caricatos · #7 (**permalink**) 09/09/2005, 10:53

Hola:

con este código:

Código:

<html>
<body>
<div id="capa">assss</div> 
<script> 
var capa=document.getElementById("capa"); 
function cualquiera(q) { 
    alert(q); 
} 
capa["funcion_cualquiera"] = cualquiera; 
capa["funcion_cualquiera"]("hola"); 
</script> 
</body>
</html>

... aparece una alerta con el texto "hola" en explorer, FF y opera...

¡No es lo que querías!

Con el otro mensaje, lo he mirado, y no he llegado a enterarme bien. Luego lo re-leeré.

Supongo que en alguna ocasión te habré mostrado el destripador que hice...
http://www.pepemolina.com/DOM/destripador.html

El listado de los nodos se hace de esta forma asociativa y funciona bien (en opera 7.xx no )

Saludos

derkenuke · #8 (**permalink**) 09/09/2005, 13:07

Sí, el destripador ya lo habia visto, es una obra muy interesante

. Quizas en opera7 no funcione, pero en 8 si.

Por otra parte, el codigo funciona de fabula. Lo intentaba hacer con setAttribute, pero no hay ningun problema de esa manera que tu posteas.

A ver si logro guardar un objeto (instancia de mi propia clase) en un atributo. Aunque sea una referencia a él, o no se...

gracias!!

flaviovich · #9 (**permalink**) 09/09/2005, 14:49

Gracias muchachos por el dato!

angsanchez · #10 (**permalink**) 10/09/2005, 04:37

Cita:

Iniciado por flaviovich

Disculpen que me desvie del tema, pero quisiera saber si hay algun compilador de javascript. Ya que he visto me muchos comentan que les sale error, como a derkenukeю
Yo uso IE y FF, pero en ninguno de los dos me sale algun mensaje de error. Solo en IE cuando hay algun error, en la parte inferior izquierda, muestra un icono amarillo y nada mas.

Hola, flaviovich
Además de lo que ya te han dicho ("Herramientas->Consola JavaScript" y "javascript:" en la dirección), hay una extensión de Firefox llamada "Web Developer" que, entre otras cosas, tiene un icono de aviso para la barra de botones que se pone rojo cuando se produce un error, y pulsando en él te abre la consola.
Una de las claves es que muchas veces no sabes que hay un error, por lo que no abres la consola, pero esto te advierte de él.
A mí me resutla comodísimo (de hecho, he ocultado el resto de herramientas de la extensión, pero mantengo esa).

flaviovich · #11 (**permalink**) 10/09/2005, 06:27

Gracias Angel!
acabo de bajar esa extension :)

derkenuke · #12 (**permalink**) 29/08/2007, 21:47

No es que me guste revivir temas de hace 2 años... pero bueno.

Ésto es algo muy simple:

Código PHP:

  <div id="capa"></div>

 
<script type="text/javascript">

 
var capa = document.getElementById("capa");

var cualquiera = function (q) {

    alert(q);

}

capa.setAttribute("funcion_cualquiera",cualquiera);

 
var paco = eval( capa.getAttribute("funcion_cualquiera") );

paco("hola");        // y funciona!!

</script>

Y lo de serializar objetos... está muy básico y sólo admite Strings como propiedades, pero bueno, sería cuestión de extenderlo hasta las necesidades que uno quiera:

Código PHP:

  <div id="exterior"><div id="capa"></div></div>

 
<script type="text/javascript">

 
// Creo la clase

function coche(marca,modelo,color) {

    this.marca = marca;

    this.modelo = modelo;

    this.color = color;

    // Creo el método por el cual la clase coche pasará a ser un String con sus propiedades escritas

    this.toJSON = function() {

        var str = "{ ";

        for(var i in this) {

            if( (typeof this[i]) != "function" ) {

                str += i+": '"+this[i]+"', ";

            }

        }

        str = str.substring(0, str.length-2);        // quitamos el espacio y la coma del final

        str += " }";

        return str;

    }

}

 
// Creo el método inverso: sacar el objeto del string JSON

function JSONtoObject(str) {

    var dev = new Object();

    str = str.substring(2, str.length-2);        //quitamos los { } y los espacios sobrantes

    str = str.split(", ");

    for(var i=0; i<str.length; i++) {        // con caja conjunto propiedad:valor

        for(var j=0, sp = str[i].split(": "); j<sp.length; j++) {

            dev[ sp[0] ] = sp[1];

        }

    }

    return dev;

}

 
var capa = document.getElementById("capa");

 
// Creo el objeto

var audiTTrojo = new coche("audi", "TT" ,"rojo");

// Guardo el objeto en forma de JSON

capa.setAttribute("miCoche", audiTTrojo.toJSON() );

// Muestro cómo cambia el HTML por si quisiéramos hacer algo con él

alert(document.getElementById("exterior").innerHTML);

// Recupero el objeto

var elCoche = JSONtoObject( capa.getAttribute("miCoche") );

// Muestro el objeto

var presentacionCoche = "";

for(var i in elCoche) {

    presentacionCoche += "elCoche['"+i+"'] = " + elCoche[i] +"\r\n";

}

alert(presentacionCoche);

 
</script>

Bueno, me sincero: El toJSON() no lo he inventado yo por supuesto. La librería Prototype tiene el suyo, evidentemente finiquitado al gusto y para todos los tipos de elementos (incluso para String). Ni siquiera tiene por qué haberlo inventado prototype, aquí hay un enlace con un código que puede hacerlo también.

En fin, que poderse se puede hacer, lo que pasa es que no conocía el cómo, como suele pasar.

caricatos · #13 (**permalink**) 30/08/2007, 02:13

Hola:

La verdad es que me había olvidado del tema... y de la función toJSON(), no me gusta ese substring() para recortar la cadena... creo que más elegante sería usar un array y mostrarlo con join()

this.toArray = function() {
arreglo = new Array();
for(var i in this)
if( (typeof this[i]) != "function")
arreglo[arreglo.length] = i + ": '" + this[i] + "'";
return arreglo;
}
this.toJSON = function() {
return "{" + this.toArray().join(", ") + "}";
}

Lo puse "a capella", así que podría tener errores, y podría ser peor idea

Saludos