La Web A Viviendo en la era digital

En Ajaxian muestran un ejemplo de Como estructurar código JavaScript haciendo uso de “module pattern”, “global variable” que nos ayudará a mantener el código ordenado y libre colisiones
(tags: patterns code javascript)

Hace rato que uso la librería jQuery por lo que me resulta súper fácil manipular elementos HTML por su su clase, independiente de su tagName (a, div, span, etc). Por ejemplo en una breve y simple líena puedo darle display:none a todos los elementos con clase hide:

//lo simple es bello
$(’.hide’).hide();

En Prototype (que no ocupo desde que comencé a usar jQuery), aunque era un poco más complejo y limitado, tampoco daba muchos dolores de cabeza:

//Sólo hay que dominar bien los selectores tipo CSS de Prototype
$$(’div.hide’).invoke(’hide’);

Incluso era posible de esta forma:

//iteramos sobre cada elemento
documetnt.getElementsByClassName(’hide’).(Element.hide);

Pero resulta que la función getElementsByClassName() aún no es un estándar (lo que significa
que obviamente no funciona de froma nativa ni en IE6 ni en IE7, pero sí en Firefox3, Safari y Chrome), por
lo tanto, para que funcione en IE debe estar soportada por la librería que ocupemos.

En el caso que estemos trabajando sin ninguna librería o que no esté soportada (por ejemplo en las versiones nuevas de Prototype está obsoleta), la podemos implementar fácilmente con el siguiente código:

document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp(’\\b’+cl+’\\b’);
var elem = this.getElementsByTagName(’*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};

Referencias:

• http://www.prototypejs.org/api/utility/getElementsByClassName
• http://www.anieto2k.com/2007/05/29/ultimate-getelementsbyclassname-mejorada/
• http://edusanver.wordpress.com/2007/10/03/getelementsbyclassname-javascript/
• http://www.anieto2k.com/2007/02/03/firefox-3-integrara-getelementbyclassname/

De la mano de Aptana, Jaxer -también conocido como Ajax Server- se trae JavaScript, DOM, HTML y CSS al lado de los servidores.

Al fin veo un poco de luz al final de las tediosas validaciones. Es que el tema de los formularios web puede volverse en un verdadero lío.

En concreto lo que Jaxer hace es ejecutar el codigo ajax en el servidor y devolver la página resultante al browser, todo de forma asincrónica. ¡Cool no?

Ver más información, ejemplos y videos en ajaxian

Tengo mucho código para postear, pero me aguantaré unos días para hacerlo detalladamente en blogandia. Ahora sólo quiero sacrame un poco las ganas de hablar de JSON.

Algunas de las razones porque vale la pena trabajar con este tipo de notación son:

1-. Por sobre todo: orden. Trabajar javascript con JSON es por lejos más ordenado y simple que hacerlo de la forma clásica. A este orden “visual/mental” hay que agregar un punto tan o más importante que mi manía personal por el código elegante y ordenado: los nombres de las variables y funciones dificilmente interfieren con los nombres de variables y funciones de otras aplicaciones javascript que coexisten generalmente en un sitio web.

Por ejemplo, es perfectamente posible el siguiente escenario:

var aplicacion_uno = {
cargando : function(){
//código de esta funcion;
},
hide : function(){
$$(’ul[class=hide]‘).map(function(s){$(s.id).hide();});
}
}

var aplicacion_dos = {
cargando : function(){
//código de esta funcion;
},
hide : “se traduce como esconder”
}

2-. Para trabajar con gran cantidad de datos dinámicos de forma asincrónica es mucho más rápido que hacerlo con XML, en pruebas preliminares con firebug, para la siguiente consulta el tiempo de respuesta es de 164ms.

[{"modelo_generico":"Chevrolet Corsa","t1":"25.800","t2":"21.900","t3":"17.955","t4":"15.750",
"zonal":"RENT A CAR ANTOFAGASTA","patente":"WV-9955","fecha_inicio":"2007-12-05",
"fecha_termino":"2007-12-15"},
{"modelo_generico":"Chevrolet Corsa","t1":"25.800","t2":"21.900","t3":"17.955","t4":"15.750",
"zonal":"RENT A CAR ANTOFAGASTA ","patente":"WV-9960","fecha_inicio":"2007-12-15",
"fecha_termino":"2007-12-20"}]

Mientras que para una cantidad evidentemente menor de datos en xml la respuesta menor que he obtenido es de 544ms.

<xml>
<contenido>
<status>ok</status>
<precio>45000</precio>
<pasajeros>1</pasajeros>
<dolar470</dolar>
</contenido>
</xml>

3-. Si bien la forma de pasar los datos de un lado a otro es básicamente la misma para JSON y XML (Ajax.Request o $j.ajax con prototype y jquery respectivamente), la disponibilidad de ellos es radicalmente distinta. Mientras que con XML hay que parsear los datos según las etiquetas:

xmlparse : function(responseXMLCli){
var xml=responseXMLCli.responseXML.documentElement;
var item=xml.getElementsByTagName(’contenido’)[0];
var pasajero=item.getElementsByTagName(’pasajero’)[0].firstChild.data;
alert(pasajero)
}

con json quedan disponibles de inmediato

jsonready : function(data){
alert(data.pasajero)
}

Google liberó un nuevo AJAX framework basado en Java llamado Google Web Toolkit (GWT). Con este framework se pueden escribir facilmente plicaciones AJAX tal como Google Maps o Gmail.

Google Web Toolkit promete masificar AJAX y se constituye como un paso más en la conquista del mundo por parte de Google.

Personalemente el que esté basado en Java no me ha parecido del todo bien. De todas formas, viendo sus ejemplos (otro), seguro que nos permite ahorrar un montón de tiempo y olvidarnos del lío de compatibilidad entre Internet Explorer, Firefox, Safari y Opera.

Recursos
Ajax
Google