Leyendo Quest’s Blog, me encontré un par de artículos de Perfection Kills, que dan unos tips acerca del uso básico de Prototype.
El primero en especial me parece muy útil, a pesar de que son cosas muy simples son errores que todos cometemos al principio, ¿Seamos sinceros, que tantos se chutan toda la documentación antes de empezar a programar?
Me servirá de recordatorio así que me he tomado la libertad de publicarlo:
Errores comunes con Prototype
1.
Modo Incorrecto
1
| document.getElementById('foo') |
Modo Correcto
El operador $ es lo mas esencial de Prototype, de ahí viene toda su magia, utilizalo!
2.
Modo Incorrecto
1
2
| var woot = document.getElementById('bar').value
var woot = $('bar').value |
Modo Correcto
El operador $F es un gran atajo para obtener valores de elementos.
3.
Modo Incorrecto
1
2
| $('footer').style.height = '100px';
$('footer').style.background = '#ffc'; |
Modo Correcto
1
2
3
4
5
6
| $('footer').setStyle(
{
height: '100px',
background: '#ffc'
}
) |
Olvidate de problemas de bugs sobre diferentes navegadores si utilizas el metodo setStyle()
4.
Modo Incorrecto
1
| $('tusuperelemento').innerHTML = 'algun contenido' |
Modo Correcto
1
| $('tusuperelemento').update('algun contenido') |
Podras decir que es casi la misma, pero no opinaras lo mismo cuando necesites concatenar funciones.
5.
Modo Incorrecto
1
| new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar') |
Modo Correcto
1
2
3
4
5
6
7
8
9
| new Ajax.Request('ninja.php',
{
parameters:
{
weapon1: 'foo',
weapon2: 'bar'
}
}
) |
Escribe código limpio, tu cerebro te lo agradecerá.
6.
Modo Incorrecto
1
2
3
4
5
6
7
8
| new Ajax.Request('blah.php',
{
method: 'POST',
asynchronous: true,
contentType: 'application/x-www-form-urlencoded',
encoding: 'UTF-8',
}
) |
Modo Correcto
1
| new Ajax.Request('blah.php') |
Todos esos parámetros ya son defaults, ¿Para que repetirlos?.
7.
Modo Incorrecto
1
| Event.observe('myContainer', 'click', doSomeMagic) |
Modo Correcto
1
| $('myContainer').observe('click', doSomeMagic) |
Es mas fácil concatenar si escoges el segundo, pero aquí es cuestión de gustos, escoge el sabor que mas te guste.
8.
Modo Incorrecto
1
2
3
4
5
| $$('div.hidden').each(function(el)
{
el.show();
}
) |
Modo Correcto
1
| $$('div.hidden').invoke('show') |
Invoke es muy útil, piensa en el como en un atajo cuando necesitas asignar valores iguales a todos tus elementos sin necesidad de iterar sobre ellos.
9.
Modo Incorrecto
1
2
3
4
5
| $$('div.collapsed').each(function(el)
{
el.observe('click', expand);
}
) |
Modo Correcto
1
| $$('div.collapsed').invoke('observe', 'click', expand) |
Y también puede ser usado para manejo de eventos, muy practico!
10.
Modo Incorrecto
1
2
| $$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur); |
Modo Correcto
1
2
3
| $$('input.date')
.invoke('observe', 'focus', onFocus)
.invoke('observe', 'blur', onBlur) |
¿Para que abusar del operador $$ dos veces si podemos concatenar?
11.
Modo Incorrecto
1
2
3
4
5
6
| $('productTable').innerHTML =
$('productTable').innerHTML +
'<tr><td>' + productId + ' '
+ productName + '</td></tr><tr><td>'
+ productId + ' ' + productPrice +
'</td></tr>' |
Modo Correcto
1
2
3
4
5
6
7
8
9
10
11
| var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
$('productTable').insert(
rowTemplate.evaluate(
{
id: productId,
name: productName,
price: productPrice
}
)
)
) |
Este tip en especial es una joya, con Prototype podemos hacer templates, evitando de esta manera enormes plastas de código. Me confieso culpable de no haber utilizado esto antes.
Enlace | How well do you know prototype
